當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML期末作业蛋糕bootstrap响应式网站html+css+javascript+jquery+bootstarp

發布時間：2024/3/7 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML期末作业蛋糕bootstrap响应式网站html+css+javascript+jquery+bootstarp 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🎀 精彩專欄推薦👇🏻👇🏻👇🏻

?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
💂 作者主頁: 【主頁——🚀獲取更多優質源碼】
🎓 web前端期末大作業：【📚畢設項目精品實戰案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🦄 echarts大屏展示大數據平臺可視化(150套) 】
🎁 免費且實用的WEB前端學習指南：【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！

📂文章目錄

一、👨?🎓網站題目
二、??網站描述
三、📚網站介紹
四、🌐網站效果
五、🪓 代碼實現
- 🧱HTML結構代碼
- 💒CSS樣式代碼
六、🥇 如何讓學習不再盲目
七、🎁更多干貨

一、👨?🎓網站題目

🥧 美食網頁介紹、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐飲文化、等網站的設計與制作。

二、??網站描述

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

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

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

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

📘網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

📒網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。

四、🌐網站效果

五、🪓 代碼實現

🧱HTML結構代碼

<!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/css.css"/> <title>蛋糕</title> </head> <body style="background:#fff;">  <div class="container"><header><div class="logo"><img src="images/logo.jpg"></div><div class="nav"><a href="index.html">網站首頁</a><a href="qiaokeli.html">巧克力蛋糕</a><a href="musi.html">慕斯蛋糕</a><a href="denglu.html">會員登錄</a><a href="jieshao.html">蛋糕介紹</a></div><div class="clear"></div></header><div class=" con"><div class="pic"><div class="banner"> <img src="images/banner.jpg"> </div></div><div class="container part2"><h2 class="Title"><strong>CAKE DESSERT</strong> <span>蛋糕甜品</span></h2><ul class="row"><a href="xq.html"><li class="col-sm-4"><img src="images/1.jpg" width="100%"/><p>榴蓮雪塔</p><h2>￥318.00</h2></li></a> <a href="xq.html"><li class="col-sm-4"><img src="images/2.jpg" width="100%"/><p>榛果摩卡布拉吉</p><h2>￥218.00</h2></li></a> <a href="xq.html"><li class="col-sm-4"><img src="images/3.jpg" width="100%"/><p>愛麗絲花境</p><h2>￥258.00</h2></li></a></ul></div><div class="Part1 container"><div class="text"><p>蛋糕是一種古老的西點，一般是由烤箱制作的，蛋糕是用雞蛋、白糖、小麥粉為主要原料。以牛奶、果汁、奶粉、香粉、色拉油、水，起酥油、泡打粉為輔料。經過攪拌、調制、烘烤后制成一種像海綿的點心。蛋糕是一種面食，通常是甜的，典型的蛋糕是以烤的方式制作出來。蛋糕的材料主要包括了面粉、甜味劑(通常是蔗糖)、黏合劑(一般是雞蛋，素食主義者可用面筋和淀粉代替)、起酥油（一般是牛油或人造牛油，低脂肪含量的蛋糕會以濃縮果汁代替），液體（牛奶，水或果汁），香精和發酵劑（例如酵母或者發酵粉）。</p><p>英語中使用的“cake ”一詞，大約于英國13世紀時出現，來源于古北歐語“kaka”。蛋糕的原始稱呼是“甜的面包”，歷史上第一個制作蛋糕的是埃及人，諸多陵墓中發掘出的壁畫也證明了這一點。</p></div></div></div><footer><p>蛋糕 </p></footer> </div> </body> </html>

💒CSS樣式代碼

/*通用類*/ * {margin: 0;padding: 0; } body {margin: 0 auto;line-height: 21px } img {border: none;max-width: 100%; } 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 開始*/ header {background: #e8d2ad;border-bottom: 2px solid #f1f1f1; } header .logo {height: 120px;width: auto;text-align:center;margin: 0 auto; } header .logo img {width: auto;height: 100%; } header .nav {float: left;width: 100%;text-align: center;height: 40px;line-height: 40px;background:#d4ba8d; } header .nav a {float: left;width: 20%;display: inline-block;text-align: center;color: #000; float:left;font-size: 16px;text-decoration:none } header .nav a:hover{ background:#996633} .banner {background-size: cover; } .banner img {width: 100%;display: block; } footer {text-align: center;background: #e8d2ad; } footer p {height: 70px;line-height: 70px; }.Title {font-size: 32px;color: #333;text-align:center;line-height: 50px;margin: 20px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .Title strong{ display:block; position:relative; top:20px; color:#ddd; font-size:44px} .Title span{ position:relative; top:-10px; display:block} .con .text {font-size: 18px;color: #333;line-height: 26px; } .csf li h3{ margin:20px 0} .csf{ padding-bottom:40px} .csf p{ line-height:24px} .con .text p {margin: 0 0 10px 0; } .Part1{ padding-bottom:40px} .Part1 .text{ margin:0 auto; max-width:800px; text-align:center; font-size:16px; line-height:30px;} .part2 {margin-bottom:0px; } .part2 li {text-align: center;margin-bottom: 30px; } .part2 li p {font-size: 16px;padding: 10px 0;display: block;} .part2 li img {} .container {} .bj {display: block;width: 100%;background: url(../images/bj.gif);height: 40px;margin-bottom: 20px; } .part3 li {text-align: left; } .part3 li h3 {font-size: 20px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .part3 li p {height: 420px;padding: 10px;line-height: 26px;color: #333;overflow: hidden;font-size: 14px; } .part4 li {margin-bottom: 20px;text-align:center; } .text2{ max-width:500px; margin:0 auto} .part4 { padding-bottom:40px} .part4 li p{ margin:15px 0; margin-bottom:0} .part4 li img {width: 100%;height: 100%;object-fit: cover;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s; } .tx h1{ padding-bottom:30px;} .tx{ font-size:16px; line-height:30px} .part4 li img:hover {box-shadow: 0px 0px 15px #888888; } .form_con {margin: 30px 0;font-size: 16px; } .form_con .phone {width:100%;height: 36px;padding: 0 15px;box-sizing: border-box;font-size: 14xp;margin-bottom: 10px;display: block; } .form_con .phone.oi {height: 120px; } .form_con button {width: 140px;height: 36px;background: #666;border: none;color: #fff; }@keyframes my1 {0% { transform:translate(0px, 0px) }50% { transform:translate(0px, -20px) }100% { transform:translate(0px, 0px) } } .ditu {position: relative; } .xiaoqi {position: absolute;width: 50px;top: 30px;left: 20%; } .xiaoqi img {width: 100%; } .xiaoqi1 {animation: my1 2s ease-in-out infinite;-webkit-animation: my1 ease-in-out 2s infinite; } .xiaoqi2 {position: absolute;width: 50px;top: 30%;left: 30%;animation: my1 2s ease-in-out infinite;-webkit-animation: my1 ease-in-out 2s infinite; } .xiaoqi3 {position: absolute;width: 50px;top: 60%;left: 80%;animation: my1 2s ease-in-out infinite;-webkit-animation: my1 ease-in-out 2s infinite; }@media only screen and (max-width:1200px) { }@media only screen and (max-width:1000px) { header .nav a {font-size: 20px; } }@media only screen and (max-width:746px) { .row,.Title{ margin:0}.Part1 .text{ font-size:14px; line-height:22px} .text2,.Part1 .text{ margin:10px}.Title strong{ font-size:30px} header .nav {width:100%;height: 50px; display:flex;line-height: 50px; text-align:center; justify-content:center; } header .logo {height: 50px; } header .nav a {font-size: 14px; float:none;width:auto;margin:0 5px; } .part2 li img {height: auto; } .part4 li {height: auto; } .Title{ font-size:20px;} .text{ font-size:14px; line-height:26px;} }

六、🥇 如何讓學習不再盲目

很多剛入門編程的小白學習了基礎語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網上的編程初學者入門訓練。該專題為編程入門級別，適合剛學完語法的小白練習，題目涉及編程基礎語法，基本結構等，每道題帶有練習模式和考試模式，可還原考試模式進行模擬，也可通過練習模式進行練習。

七、🎁更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、期末大作業模板、等! 「在這里有好多前端開發者，一起探討前端 Node 知識，互相學習」！

以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻🔥

總結

以上是生活随笔為你收集整理的HTML期末作业蛋糕bootstrap响应式网站html+css+javascript+jquery+bootstarp的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： LCD制作工艺及相关设备资料配方大全(转
下一篇： gradle idea java ssm