bootstrap4网页设计：期末前端web大作业——端午美食001 (5个页面)
HTML实例网页代码, 本实例适合于初学HTML的同学。该实列bootstrap4 的一个美食网页设计 有模态框 响应图片 ，相册 图文混排 表单 等内容 图片 内容均可修改 。
# 一、网页介绍
1 网页简介：一个简单的网页设计运用基本的bootstrap4 知识局制作,web前端期末大作业,大学生网页设计作业源码，设计简单风格 大方 代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：**Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++** 等任意html编辑软件进行运行及修改编辑等操作）。
3.**知识应用**：技术方面主要应用了网页知识中的: Div+CSS、bootsrap 鼠标滑过特效、Table、导航栏效果、Banner、表单、二级等，设计了Logo（源文件）等。
部分代码展示如下：以下仅展示部分代码供参考~ 作者：圆三网页study https://space.bilibili.com/622032340?spm_id_from=333.788.0.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>端午节</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div>
<a href="#">端午美食</a>
<button type="button" data-toggle="collapse" data-target="#navbarsExample07"
aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="home.html">首 页 <span>(current)</span></a>
</li>
<li>
<a href="about.html">关于端午</a>
</li>
<li>
<a href="ms.html">端午美食</a>
</li>
<li>
<a href="ly.html">在线留言</a>
</li>
</ul>
<button type="button" class="btn btn-outline-light mx-auto" data-toggle="modal"
data-target="#loginModal">登录</button>
<!-- -->
<!-- 模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
<div role="document">
<div>
<div>
<h4 id="loginModalLabel">登录</h4>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div>
<form>
<div>
<p>会员账号：</p>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-group ">
<p>会员密码：</p>
<input type="tel" id="phone" placeholder="请输入您的电话号码">
</div>
</form>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
<!-- over mo -->
<!-- -->
<form class="form-inline my-2 Search">
<input type="text" placeholder="输入搜索内容"" aria-label=" Search">
<button type="submit" class="col-xs-3 btn btn-default btn-light">搜 索</button>
</form>
</div>
</div>
</nav>
<div class="container mt-4 p-2">
<div class="banner">
<img decoding="async" class="img-fluid mx-auto d-block" src="img/banner.png" alt="Chania">
</div>
<!-- over -->
<div class="about mt-4">
<p><b>端午的由来：</b>端午节源自天象崇拜，由上古时代祭龙演变而来。仲夏端午，苍龙七宿飞升至正南中央，正如《易经·乾卦》第五爻的爻辞曰：“飞龙在天”。我国古代的星象文化源远流长、博大精深，上古时代人们定天之象、法地之仪，根据日月星辰的运行轨迹和位置，将黄道和赤道附近的区域分作“二十八宿”，在东方的“角、亢、氐、房、心、尾、箕”组成一个完整的龙形星象，即为“苍龙七宿”。苍龙七宿的出没周期与一年四时周期相一致，春季于东方抬头，夏季于南方腾升，秋季于西方退落，冬季即隐没于北方地平线下。仲夏端午“飞龙在天”，苍龙的主星“大火”（心宿二）高悬正南中天，龙气旺盛。古人历来崇尚中、正之道，在《易经》中，“飞龙在天”既“得中”又“得正”，大吉大利。
古老节日是古老文化传承的载体，选择在端午举行祭龙节仪与苍龙七宿正处南中的时节天象有关。在传统文化中，方位和时间以及卦象是联系在一起的，仲夏午月午日，龙星飞升至正南中天，即如《易经·乾卦》曰：“飞龙在天”；端午日龙星既“得中”又“得正”，处于“中正”之位，为大吉大利之象。《易经·乾卦》爻辞中所言的“龙”，实质是对苍龙七宿一年四时运行的阐发。天象“飞龙在天”被赋予多重含义和寄托，衍生祭龙以酬谢龙祖恩德、祈福纳祥、驱邪攘灾的礼俗。端午文化充分体现了中华民族先民“天人合一”的自然观。端午节的起源涵盖了古老星象文化、人文哲学等方面内容，蕴含着深邃丰厚的文化内涵；在传承发展中杂揉了多种民俗为一体，节俗内容丰富
</p>
</div>
<!-- over about -->
<div class="clearfix"></div>
<div class="big-title mt-3 mb-2">
<h6>美食图片</h6>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="img/01.png" alt=""></a>
<div class="card-body">
<h4 class="card-title pt-1">
<a href="#">粽子</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="img/02.png" alt=""></a>
<div class="card-body">
<h4 class="card-title pt-1">
<a href="#">绿豆糕</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="img/03.png" alt=""></a>
<div class="card-body">
<h4 class="card-title pt-1">
<a href="#">黄酒</a>
</h4>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card h-100">
<a href="#"><img class="card-img-top" src="img/04.png" alt=""></a>
<div class="card-body">
<h4 class="card-title pt-1">
<a href="#">鸭蛋</a>
</h4>
</div>
</div>
</div>
</div>
</div>
<!-- over tp -->
<footer class="footer mt-auto py-3">
<div class=" text-center">
<span class="text-muted">端午的相关知识网</span>
</div>
</footer>
<script type="text/javascript" src="js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
部分css 样式代码如下：
* {
margin: 0;
padding: 0;
/* -weibkit-box-sizing-border: border-box;
-moz-box-sizing-border: bborder-box;
box-sizing: border-box; */
}
body {
background-color: rgb(253, 246, 221, .55);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font: 12px/150% Arial, Verdana, "Microsoft YaHei", "微软雅黑";
}
a {
text-decoration: none;
color: #000;
}
a:hover {
color: red;
text-decoration: none;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
p {
line-height: 28px;
color: #666;
}
/*header*/
.navbar {
padding: 20px 0;
}
.navbar-brand {
line-height: 72px;
font-size: 36px;
color: rgb(248, 234, 226) !important;
letter-spacing: 2px;
font-weight: bold;
text-shadow: 0 0 15px #95d40e;
}
.navbar-dark .navbar-nav {
font-size: 18px !important;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.nav-link:hover {
color: rgb(236, 84, 8) !important;
}
/* .nav-link {
padding: 0.5rem 1.rem !important;
} */
.Search .btn {
border-radius: 0 0.25em 0.25em 0 !important;
}
.Search .form-control {
border-radius: 0.25em 0 0 0.25em;
}
/* banner */
.banner img {
width: 100%;
height: 365px;
}
.about p b {
font-size: 26px;
font-weight: 600;
color: #c24d35;
}
.about p {
font-size: 14px;
line-height: 36px;
color: #666;
}
