bootstrap4網(wǎng)頁設(shè)計：期末前端web大作業(yè)——端午美食001 (5個頁面)
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實列bootstrap4 的一個美食網(wǎng)頁設(shè)計 有模態(tài)框 響應(yīng)圖片 ，相冊 圖文混排 表單 等內(nèi)容? 圖片 內(nèi)容均可修改 。
# 一、網(wǎng)頁介紹
1 網(wǎng)頁簡介：一個簡單的網(wǎng)頁設(shè)計運用基本的bootstrap4 知識局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，設(shè)計簡單風(fēng)格 大方 代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。
2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：**Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++** 等任意html編輯軟件進行運行及修改編輯等操作）。
3.**知識應(yīng)用**：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、bootsrap 鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級等，設(shè)計了Logo（源文件）等。
部分代碼展示如下：以下僅展示部分代碼供參考~ 作者：圓三網(wǎng)頁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>端午節(jié)</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">關(guān)于端午</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>
? ? ? ? ? ? ? ? <!--? -->
? ? ? ? ? ? ? ? <!-- 模態(tài)框 -->
? ? ? ? ? ? ? ? <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">關(guān)閉</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="輸入搜索內(nèi)容"" 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>端午節(jié)源自天象崇拜，由上古時代祭龍演變而來。仲夏端午，蒼龍七宿飛升至正南中央，正如《易經(jīng)·乾卦》第五爻的爻辭曰：“飛龍在天”。我國古代的星象文化源遠(yuǎn)流長、博大精深，上古時代人們定天之象、法地之儀，根據(jù)日月星辰的運行軌跡和位置，將黃道和赤道附近的區(qū)域分作“二十八宿”，在東方的“角、亢、氐、房、心、尾、箕”組成一個完整的龍形星象，即為“蒼龍七宿”。蒼龍七宿的出沒周期與一年四時周期相一致，春季于東方抬頭，夏季于南方騰升，秋季于西方退落，冬季即隱沒于北方地平線下。仲夏端午“飛龍在天”，蒼龍的主星“大火”（心宿二）高懸正南中天，龍氣旺盛。古人歷來崇尚中、正之道，在《易經(jīng)》中，“飛龍在天”既“得中”又“得正”，大吉大利。
? ? ? ? ? ? ? ? 古老節(jié)日是古老文化傳承的載體，選擇在端午舉行祭龍節(jié)儀與蒼龍七宿正處南中的時節(jié)天象有關(guān)。在傳統(tǒng)文化中，方位和時間以及卦象是聯(lián)系在一起的，仲夏午月午日，龍星飛升至正南中天，即如《易經(jīng)·乾卦》曰：“飛龍在天”；端午日龍星既“得中”又“得正”，處于“中正”之位，為大吉大利之象?！兑捉?jīng)·乾卦》爻辭中所言的“龍”，實質(zhì)是對蒼龍七宿一年四時運行的闡發(fā)。天象“飛龍在天”被賦予多重含義和寄托，衍生祭龍以酬謝龍祖恩德、祈福納祥、驅(qū)邪攘災(zāi)的禮俗。端午文化充分體現(xiàn)了中華民族先民“天人合一”的自然觀。端午節(jié)的起源涵蓋了古老星象文化、人文哲學(xué)等方面內(nèi)容，蘊含著深邃豐厚的文化內(nèi)涵；在傳承發(fā)展中雜揉了多種民俗為一體，節(jié)俗內(nèi)容豐富
? ? ? ? ? ? </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">端午的相關(guān)知識網(wǎng)</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;
}
