<!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>