時(shí)間：2023-10-12 09:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-12 09:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
學(xué)生HTML靜態(tài)網(wǎng)頁(yè)基礎(chǔ)水平制作DIV+CSS+JavaScript技術(shù)制作美食網(wǎng)頁(yè)——美食城6頁(yè)面： ? 靜態(tài)網(wǎng)站的編寫(xiě)主要是用HTML DIV+CSS JS等來(lái)完成頁(yè)面的排版設(shè)計(jì) ? ,常用的網(wǎng)頁(yè)設(shè)計(jì)軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當(dāng)然不同軟件寫(xiě)出的前端Html5代碼都是一致的，本網(wǎng)頁(yè)適合修改成為各種類(lèi)型的產(chǎn)品展示網(wǎng)頁(yè)，比如美食、旅游、攝影、電影、音樂(lè)等等多種主題，希望對(duì)大家有所幫助。
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<!DOCTYPE html><html><head> <title>美食城</title> <link rel="stylesheet" href="../../../pro2/default.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/><meta name="format-detection" content="telephone=no"><meta name="renderer" content="webkit"><meta name="author" content="www.yunalading.com" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="description" content="" /><meta name="keywords" content="" /><link rel="stylesheet" href="default.css"></head><body><header> <div class="header-nav"> <div role="navigation"> <a href="#" rel="home" class="hd-logo" title="美食餐廳"><img src="images/logo.png"></a> <ul class="hd-nav"> <li class="search-box-li"> <div><input type="text" name="search-keyword" placeholder="輸入關(guān)鍵詞" form="search-keyword"><i class="iconfont search-submit"></i></div> <i class="search-exit"></i></li> <li><a href="index.html" name="index">網(wǎng)站首頁(yè)<span><i class="iconfont "></i></span></a></li> <li><a href="about.html" name="about">關(guān)于我們<span><i class="iconfont "></i></span></a></li> <li><a href="productlist.html" name="productlist">菜式欣賞<span><i class="iconfont "></i></span></a></li> <li><a href="article.html" name="article">美食資訊<span><i class="iconfont "></i></span></a></li> <li><a href="contact.html" name="contact">在線預(yù)訂<span><i class="iconfont "></i></span></a></li> </ul> <div class="motai"></div> <ul> <li><a><i class="iconfont search-botton"></i></a></li> <li><a>中文</a></li> <li><a>En</a></li> <li><a><i class="iconfont nav-bottom"></i></a></li> </ul> </div> <div class="search-box"> <form method="post" action="#" id="search-keyword"> <input type="text" name="search-keyword" placeholder="請(qǐng)輸入您的內(nèi)容"> <span> </span> </form> </div> </div> <div class="header-carousel container"> <div id="myCarousel" class="carousel slide"> <!-- 輪播（Carousel）指標(biāo) --> <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> <!-- 輪播（Carousel）項(xiàng)目 --> <div class="carousel-inner"> <div class="item active"> <img src="images/banner.jpg" style="width:100%;" alt="First slide"> </div> <div class="item"> <img src="images/banner2.jpg" style="width:100%;" alt="Second slide"> </div> <div class="item"> <img src="images/banner3.jpg" style="width:100%;" alt="Third slide"> </div> </div> <!-- 輪播（Carousel）導(dǎo)航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"></a> </div> </div></header><main class="main-first-bgcolor"> <div> <div class="main-head"> <p> <span>我們提供</span> </p> </div> <div class="main-we-provide"> <ul> <li><span><img src="images/lunch.png" alt=""></span> <h2>中餐</h2> <p>公司目前經(jīng)營(yíng)的范圍包括：電子商務(wù)平臺(tái)開(kāi)發(fā)技術(shù)支持、技術(shù)轉(zhuǎn)讓、運(yùn)維技術(shù)服務(wù)大數(shù)據(jù)、云計(jì)算等。</p></li> <li><span><img src="images/dinner.png" alt=""></span> <h2>晚餐</h2> <p>公司目前經(jīng)營(yíng)的范圍包括：電子商務(wù)平臺(tái)開(kāi)發(fā)技術(shù)支持、技術(shù)轉(zhuǎn)讓、運(yùn)維技術(shù)服務(wù)大數(shù)據(jù)、云計(jì)算等。</p></li> <li><span><img src="images/coffee.png" alt=""></span> <h2>甜品/咖啡</h2> <p>公司目前經(jīng)營(yíng)的范圍包括：電子商務(wù)平臺(tái)開(kāi)發(fā)技術(shù)支持、技術(shù)轉(zhuǎn)讓、運(yùn)維技術(shù)服務(wù)大數(shù)據(jù)、云計(jì)算等。</p></li> </ul> </div> </div> <div> <div class="main-head"> <p> <span>菜式欣賞</span> </p> </div> </div></main><main> <img class="mdbanner" src="images/mdbanner.jpg"></main><main> <div class="main-body"> <p><span>每一種食物來(lái)源都經(jīng)過(guò)我們的精挑細(xì)選，關(guān)于食材我們只選最天然、健康、優(yōu)質(zhì)的，只為一份對(duì)極致美味的追求，用心做好每一份菜，是我們不變的宗旨。</span></p> <ul class="main-body-img"> <li><img src="images/mdlist1.jpg"></li> <li><img src="images/mdlist2.jpg"></li> <li><img src="images/mdlist3.jpg"></li> <li><img src="images/mdlist4.jpg"></li> <li><img src="images/mdlist5.jpg"></li> <li><img src="images/mdlist6.jpg"></li> <li><img src="images/mdlist7.jpg"></li> <li><img src="images/mdlist8.jpg"></li> <li><img src="images/mdlist9.jpg"></li> </ul> </div></main><main> <ul class="main-submenu"> <li><a href="#">午餐</a></li> <li><a href="#">晚餐</a></li> <li><a href="#">甜品</a></li> <li><a href="#">飲料</a></li> </ul> <ul class="main-submenu-info main-submenu-first"> <li><a href="#"> <div class="food-name"> <p>玫瑰香酥西蘭花</p> <p>Rose fried broccoli</p> </div> <div class="food-price"> <p>￥<span>25</span></p> </div> <div class="img-bg"></div> <img src="images/foodlist1.jpg"></a></li> <li><a href="#"> <div class="food-name"> <p>玫瑰香酥西蘭花</p> <p>Rose fried broccoli</p> </div> <div class="food-price"> <p>￥<span>25</span></p> </div> <div class="img-bg"></div> <img src="images/foodlist2.jpg"></a></li> <li><a href="#"><img src="images/foodlist3.jpg"></a></li> <li><a href="#"><img src="images/foodlist4.jpg"></a></li> <li><a href="#"><img src="images/foodlist5.jpg"></a></li> <li><a href="#"><img src="images/foodlist6.jpg"></a></li> </ul> <a class="more" href="#">MORE</a></main><main> <div> <div class="main-head"> <p><span>美食資訊</span></p> </div> </div> <ul class="main-submenu main-submenu-second"> <li><a href="#">最新新聞</a></li> <li><a href="#">餐廳新聞</a></li> <li><a href="#">美食熱聞</a></li> <li><a href="#">甜品站</a></li> </ul> <ul class="main-submenu-info "> <li><a href="#"> <div class="activity-duration"> <img src="images/activity-duration.png"> <p>6-1日</p> </div> <img src="images/foodnewlist1.jpg"> <h1 class="food-head">周末輕松制作美味甜品</h1> <p class="food-info">每個(gè)周末都抽出一個(gè)小時(shí)的時(shí)間來(lái)為自己做一份甜品，讓周末的休閑充滿制作甜蜜和品嘗甜蜜的快樂(lè)。</p> </a></li> <li><a href="#"> <div class="activity-duration"> <img src="images/activity-duration.png"> <p>6-1日</p> </div> <img src="images/foodnewlist1.jpg"> <h1 class="food-head">周末輕松制作美味甜品</h1> <p class="food-info">每個(gè)周末都抽出一個(gè)小時(shí)的時(shí)間來(lái)為自己做一份甜品，讓周末的休閑充滿制作甜蜜和品嘗甜蜜的快樂(lè)。</p> </a></li> <li><a href="#"> <div class="activity-duration"> <img src="images/activity-duration.png"> <p>6-1日</p> </div> <img src="images/foodnewlist1.jpg"> <h1 class="food-head">周末輕松制作美味甜品</h1> <p class="food-info">每個(gè)周末都抽出一個(gè)小時(shí)的時(shí)間來(lái)為自己做一份甜品，讓周末的休閑充滿制作甜蜜和品嘗甜蜜的快樂(lè)。</p> </a></li> </ul> <a class="more" href="#">MORE</a></main><main> <div class="main-head"> <p><span>在線預(yù)定</span></p> </div> <div class="main-reserve"> <form action="#" method="post" id="food-reserve"> <ul> <li> <label for="username">姓名</label> <input type="text" name="username" id="username"> </li> <li> <label for="phonenumber">電話號(hào)碼</label> <input type="text" name="phonenumber" id="phonenumber"> </li> <li> <label for="email">電子郵件</label> <input type="text" name="email" id="email"> </li> <li> <label for="time">時(shí)間</label> <input type="text" name="time" id="time"> </li> <li> <label for="numberofpeople">人數(shù)</label> <input type="text" name="numberofpeople" id="numberofpeople"> </li> <li> <label for="date">日期</label> <input type="text" name="date" id="date"> </li> <li> <label for="guestbook">留言</label> <input type="text" name="guestbook" id="guestbook"> </li> </ul> <a class="reserve">預(yù)定</a> </form> </div></main><footer> <div> <ul class="footer-top"> <li><a href="index.html">網(wǎng)站首頁(yè)</a></li> <li><a href="about.html">關(guān)于我們</a></li> <li><a href="productlist.html">菜式欣賞</a></li> <li><a href="article.html">美食資訊</a></li> <li><a href="contact.html">在線預(yù)訂</a></li> </ul> </div> <div> <ul class="footer-body"> <li> <span>電話:</span><span>0714-8868331</span> </li> <li> <span>郵箱:</span><span>123@dayeyunalading.com</span> </li> <li> <span>地址:</span><span>浙江省大冶市大冶大道金穗小區(qū)好太太辦公室</span> </li> </ul> <P>designed and developed with by Daye Aladdin Technology Co., Ltd.</P> <ul class="footer-footer"> <li><i class="iconfont "></i></li> <li><i class="iconfont "></i></li> <li><i class="iconfont "></i></li> </ul> </div></footer></body><script src="lib/jquery/jquery.js"></script><script src="lib/bootstrap/bootstrap.js"></script><script src="js/main.js"></script></html>html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body { margin: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block;}audio,canvas,progress,video { display: inline-block; vertical-align: baseline;}audio:not([controls]) { display: none; height: 0;}[hidden],template { display: none;}a { background-color: transparent;}a:active,a:hover { outline: 0;}abbr[title] { border-bottom: 1px dotted;}b,strong { font-weight: bold;}dfn { font-style: italic;}h1 { font-size: 2em; margin: 0.67em 0;}mark { background: #ff0; color: #000;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：技術(shù),靜態(tài),基礎(chǔ),水平,學(xué)生,作美
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
