添加导航栏和背景颜色后,我的h1没有出现


  • 你好,在添加了背景色的导航栏后,我的h1是没有出现。我正试图将我的h1-h6标签居中网站,这样我就可以将其设置为不同的字体类型,但当我添加h1标记带有,或者h1标记仍然没有出现

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!---Font Awesome-->
<script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
<!---Google Fonts-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>



<!---CSS Stylesheets-->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="./css/all.min.css">

<!---Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!--Bootstrap Script-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></<>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<!---ICON--->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>


<!---NAVBAR MENU-->
<html>
<head>
<body>
<h1>HERES MY H1</h1>
</body>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</html>

<!---About Me --->

< !----Toggle--->
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">


< !----Icon Widgets--->

<ul class="navbar-nav ms-auto">
<li class="nav-item>
<form>
<label for="search class="search bar></label>
</form>
<a class="nav-link" href=""><input type="text" placeholder="Search"></a>
<li class="nav-item">
<a class="nav-link" href=""><i class="fa-solid fa-bag-shopping"></i></a>
</li>
</ul>
</div>
</nav>

<!---SHOPPING ICON--->

我认为你想在走路之前先跑。学习新事物是件好事,但要循序渐进。

首先试着了解网页是什么以及它是如何制作的。

尝试理解DOM DOM基础

然后是不同的标签(div、span、p、h1、h2、h3、em、style、script、head、body、html(

然后使用<a href="一些网站地址.com">酷网站老兄<>

表单对初学者来说非常困难,因为它们不仅仅涉及前端代码(HTML、CSS、JavaScript(,因为现在你正在编写后端代码,如果你有服务器和数据库的话,它可以与服务器和数据库对话!

先是基础知识,然后是更复杂的主题。

我已经更新了你的代码,但不确定它是否会给你想要的。

顺便说一句,网页中只有一对html、head和body标签。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!---Font Awesome-->
<script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
<!---Google Fonts-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>



<!---CSS Stylesheets-->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="./css/all.min.css">

<!---Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<!--Bootstrap Script-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></<>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto">
<li class="nav-item>
<form>
<label for="search" class="search-bar"></label>
<a class="nav-link" href="">
<input name="search" type="text" placeholder="Search">
</a>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href=""><i class="fa-solid fa-bag-shopping"></i></a>
</li>
</ul>
</div>
</nav>
<h1>HERES MY H1</h1>
</body>
</html>

相关内容

最新更新