Web大學(xué)生網(wǎng)頁作業(yè)成品 bootstrap響應(yīng)式網(wǎng)站開發(fā) 基于HTML+CSS+JS+Bootstrap制作火鍋美食網(wǎng)站(4頁)

這篇具有很好參考價(jià)值的文章主要介紹了Web大學(xué)生網(wǎng)頁作業(yè)成品 bootstrap響應(yīng)式網(wǎng)站開發(fā) 基于HTML+CSS+JS+Bootstrap制作火鍋美食網(wǎng)站(4頁)。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

?? 精彩專欄推薦????????????

?? 作者簡介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
?? 作者主頁: 【主頁——??獲取更多優(yōu)質(zhì)源碼】
?? web前端期末大作業(yè)：【??畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
?? 程序員有趣的告白方式：【??HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
??超炫酷的Echarts大屏可視化源碼：【?? echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
?? 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南：【??web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】
?? 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。然而，對于技術(shù)的探索和追求從未停歇。 ??堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來！

一、?????網(wǎng)站題目

?? 美食網(wǎng)頁介紹、??甜品蛋糕、??地方美食小吃文化、??餐飲文化、等網(wǎng)站的設(shè)計(jì)與制作。

二、??網(wǎng)站描述

??美食主題網(wǎng)站主要對各種美食進(jìn)行展示，讓瀏覽者清晰地了解到各種美食的詳細(xì)信息，便于瀏覽者進(jìn)行選擇。該模塊的左側(cè)有個(gè)美食分類，用戶可以選擇自己喜歡的種類，當(dāng)點(diǎn)擊種類后，就會在右側(cè)出現(xiàn)該分類下的各種美食，用戶可以點(diǎn)擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產(chǎn)地及它的一些功能，使用戶對該食品有著全面的認(rèn)識。

?????靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì)?????,常用的網(wǎng)頁設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫出的前端Html5代碼都是一致的，本網(wǎng)頁適合修改成為各種類型的產(chǎn)品展示網(wǎng)頁，比如美食、旅游、攝影、電影、音樂等等多種主題，希望對大家有所幫助。

三、??網(wǎng)站介紹

??網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。

??網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。

??網(wǎng)站素材方面：計(jì)劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；

??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）??html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）?? css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）?? js文件包含：js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。

四、??網(wǎng)站效果

Web大學(xué)生網(wǎng)頁作業(yè)成品 bootstrap響應(yīng)式網(wǎng)站開發(fā) 基于HTML+CSS+JS+Bootstrap制作火鍋美食網(wǎng)站(4頁)

五、?? 代碼實(shí)現(xiàn)

??HTML結(jié)構(gòu)代碼



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>火鍋</title>
</head>
<body style="background: #fff">
<!--頂部-->
<header class="clearfix">
  <div class="logo"> <img src="images/logo.jpg" height="120"/></div>
  <div class="container">
    <div class="nav clearfix"> <a href="index.html">首頁</a><a href="food.html">菜品</a><a href="about.html">介紹</a><a href="shop.html">火鍋店</a> </div>
    <div class="clear"></div>
  </div>
</header>
<div class="container">
  <!--內(nèi)容-->
  <div class="con">
    <div class="pic">
      <div class="banner">
        <div id="myCarousel" class="carousel slide">
  
          <ol class="carousel-indicators">
            <li data-target="#myCarousel"  data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          
          <div class="carousel-inner">
            <div class="item active"> <img src="images/banner.jpg" alt="First slide" /> </div>
            <div class="item"> <img src="images/banner2.jpg" alt="Second slide" /> </div>
            <div class="item"> <img src="images/banner3.jpg" alt="Third slide" /> </div>
          </div>
        </div>
      </div>
      <script>
            $(document).ready(function () {
              $("#myCarousel").carousel({ interval: 5000 }); //每隔5秒自動輪播
            });
          </script>
    </div>
    <div class="container part2">
      <h2 class="Title">火鍋菜品</h2>
      <ul>
        <li class="col-sm-3"> <img src="images/1.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/2.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/3.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/4.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/5.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/6.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/7.jpg" width="100%" />
          <p>菜品</p>
        </li>
        <li class="col-sm-3"> <img src="images/8.jpg" width="100%" />
          <p>菜品</p>
        </li>
      </ul>
    </div>
    <div class="Part1 container">
      <h2 class="Title">火鍋介紹</h2>
      <div class="col-sm-6"><img src="images/img.jpg" width="100%" /></div>
      <div class="col-sm-6 text"> 火鍋是我國獨(dú)創(chuàng)的一種民間美食，它湯料合一，現(xiàn)吃現(xiàn)燙，營養(yǎng)豐富，方便快捷，深受大眾喜愛。經(jīng)過人們不斷的改良，今天的火鍋類型，以及所使用的湯底和食材都花樣翻新，種類更加繁多，成為人們?nèi)粘Ｉ钪幸坏辣夭豢缮俚募央取?span id="n5n3t3z"    class="token tag"><br />
        火鍋起源之說也是眾說紛紜，就好比阿拉伯?dāng)?shù)字一樣，起源于印度，但卻是經(jīng)由阿拉伯人傳向四方的。這就是后來人們誤解阿拉伯?dāng)?shù)字是阿拉伯人發(fā)明的原因。<br />
        關(guān)于火鍋的起源，有兩種說法：一種說是在中國三國時(shí)期或魏文帝時(shí)代，那時(shí)的“銅鼎”，就是火鍋的前身；另一種說是火鍋始于東漢，出土文物中的“斗”就是指火鍋。可見火鍋在中國已有1900多年的歷史了。<br />
        我國的火鍋，歷史悠久，源遠(yuǎn)流長。浙江等地曾出土5000多年前的與陶釜配套使用的小陶灶，可以很方便地移動，可以算是火鍋初級形式。北京延慶縣龍慶峽山戎文化遺址中出土的春秋時(shí)期青銅火鍋，有加熱過的痕跡。奴隸社會后期，出現(xiàn)了一種小銅鼎，高不超過20厘米，口徑15厘米左右。有的鼎與爐合二為一，即在鼎中鑄有一個(gè)隔層，將鼎腹分為上下兩部分，下層有一個(gè)開口，可以送入炭火，四周鏤空作通風(fēng)的煙孔。有的鼎腹較淺，鼎中間夾一炭盤，人們稱這種類型的鼎為“溫鼎”，它小巧便利，可以說是一種較好的火鍋了。漢代出現(xiàn)一種稱為“染爐”、“染杯”的小銅器，構(gòu)造分為三部分：主體為炭爐；上面有盛食物的杯，容積一般為250至300毫升；下面有承接炭火的盤?？梢酝茢噙@就是古代單人使用的小火鍋。唐宋時(shí)，火鍋開始盛行，官府和名流家中設(shè)宴，多備火鍋。 </div>
    </div>
    <div class="Part6 container">
      <h2 class="Title">火鍋店</h2>
      <div class="col-sm-4">
        <div>
          <h2>火鍋店</h2>
          <div><img src="images/a1.jpg" width="100%" /></div>
        </div>
      </div>
      <div class="col-sm-4">
        <div>
          <h2>火鍋店</h2>
          <div><img src="images/a2.jpg" width="100%" /></div>
        </div>
      </div>
      <div class="col-sm-4">
        <div>
          <h2>火鍋店</h2>
          <div><img src="images/a3.jpg" width="100%" /></div>
        </div>
      </div>
    </div>
    <div class="Part6 container" >
      <h2 class="Title">注冊</h2>
      <div class="clearfix">
        <div class="col-sm-6"><img src="images/7.jpg" width="100%" /></div>
        <div class="col-sm-6">
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">郵箱</label>
              <input
                    type="email"
                    class="form-control"
                    id="exampleInputEmail1"
                    placeholder="郵箱"
                  />
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">賬號</label>
              <input
                    type="email"
                    class="form-control"
                    id="exampleInputEmail1"
                    placeholder="賬號"
                  />
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">密碼</label>
              <input
                    type="password"
                    class="form-control"
                    id="exampleInputPassword1"
                    placeholder="密碼"
                  />
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">確認(rèn)密碼</label>
              <input
                    type="password"
                    class="form-control"
                    id="exampleInputPassword1"
                    placeholder="確認(rèn)密碼"
                  />
            </div>
            <div class="checkbox">
              <label>
              <input type="checkbox" />
              勾選同意 </label>
            </div>
            <button type="submit" class="btn btn-danger btn-lg"> 立刻注冊 </button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br />
  <br />
  <!--底部-->
  <footer>
    <p>版權(quán)所有</p>
  </footer>
</div>

</body>
</html>

??CSS樣式代碼




* {
	margin:0;
	padding:0
}
body {
	margin:0 auto;
	line-height:21px
}
img {
	border:none;

}
a {
	cursor:pointer;
	color:#333;
	text-decoration:none;
	outline:none
}
em {
	font-style:normal
}
.lt {
	float:left
}
.rt {
	float:right
}
ul,li,h1,h2,h3,p {
	padding:0;
	margin:0;
	list-style:none
}
ul {
	list-style-type:none
}
.clear {
	clear:both
}
header {
	background:#990000;
	border-bottom:2px solid #f1f1f1
}
header .logo {
text-align:center;

	height:120px;
	width:auto;
	margin:0 auto;
	background:#fef100
}
header .logo img {
	
}
header .nav {
	float:left;
	width:100%;
	text-align:center;
	height:60px;
	line-height:60px;
	background:#990000
}
header .nav a {
	float:left;
	width:25%;
	display:inline-block;
	text-align:center;
	color:#fff;
	font-size:22px;
	font-weight:bold;
	text-decoration:none
}
header .nav a:hover {
	background:#996633
}
.banner {
	background-size:cover
}
746px) {
.Part6 .col-sm-4 > div  img{ height:auto}
header .nav{ display:flex;justify-content:space-between}
}

六、?? 如何讓學(xué)習(xí)不再盲目

很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級別，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬，也可通過練習(xí)模式進(jìn)行練習(xí)。

七、??更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “??點(diǎn)贊” “??評論” “??收藏” 一鍵三連哦！

2.??【????????????關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學(xué)生畢業(yè)HTML模板、期末大作業(yè)模板、等! 「在這里有好多前端開發(fā)者，一起探討前端 Node 知識，互相學(xué)習(xí)」！

3.文章來源地址http://www.zghlxwxcb.cn/news/detail-475864.html

以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)??????????????

到了這里，關(guān)于Web大學(xué)生網(wǎng)頁作業(yè)成品 bootstrap響應(yīng)式網(wǎng)站開發(fā) 基于HTML+CSS+JS+Bootstrap制作火鍋美食網(wǎng)站(4頁)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！