本文介绍了初学者如何使用HTML、CSS和Bootstrap创建一个简单的网页布局，包括导航栏和学习启动按钮，旨在展示前端设计的基础实践。
<!DOCTYPE html>
<html lang="CH-zn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>丞丞的第一个网页</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css";
rel="stylesheet";
crossorigin="anonymous";
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<a href="#" class="navbar-brand">我在网页设计课划水</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"id="navmenu">
<ul class="navbar-nav ms-auto"><!--margin start left-->
<li class="nav-item"><div class="nav-link">HTML</div></li>
<li class="nav-item"><div class="nav-link">CSS</div></li>
<li class="nav-item"><div class="nav-link">BootStrap</div></li>
</ul>
</div>
</div>
</nav>
<section>
<div class="container">
<div class="d-flex"> <!--display flex-->
<h1>励志学好网页<span class="text-warning">前端设计</span></h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, veritatis!
Quas sint eligendi natus nobis quia magni nesciunt illum nihil?
Ab ratione aliquid, explicabo eum tempora dolores. Repellat, atque eius.
Voluptas vel fugiat a eveniet sunt. Ullam officiis iure omnis?
Qui eligendi deleniti soluta voluptates? Optio pariatur omnis facilis molestiae!
Omnis assumenda, quidem ratione a quae deleniti eum at ipsum?
Sequi atque quis illum iste repellat provident neque nulla libero.
Fugiat doloribus dolorem veniam ipsam nemo qui adipisci eos quia.
</p>
<button>学习启动！</button>
</div>
<img src="C:\Users\86151\Desktop\QQ图片20231124173217.png" alt="showcase">
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
扫一扫
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
