时间：2023-10-12 09:00:01 | 来源：网站运营
时间：2023-10-12 09:00:01 来源：网站运营
学生HTML静态网页基础水平制作DIV+CSS+JavaScript技术制作美食网页——美食城6页面： 静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!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="输入关键词" form="search-keyword"><i class="iconfont search-submit"></i></div> <i class="search-exit"></i></li> <li><a href="index.html" name="index">网站首页<span><i class="iconfont "></i></span></a></li> <li><a href="about.html" name="about">关于我们<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">在线预订<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="请输入您的内容"> <span> </span> </form> </div> </div> <div class="header-carousel container"> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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）项目 --> <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）导航 --> <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>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li> <li><span><img src="images/dinner.png" alt=""></span> <h2>晚餐</h2> <p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</p></li> <li><span><img src="images/coffee.png" alt=""></span> <h2>甜品/咖啡</h2> <p>公司目前经营的范围包括：电子商务平台开发技术支持、技术转让、运维技术服务大数据、云计算等。</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>每一种食物来源都经过我们的精挑细选，关于食材我们只选最天然、健康、优质的，只为一份对极致美味的追求，用心做好每一份菜，是我们不变的宗旨。</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">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</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">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</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">每个周末都抽出一个小时的时间来为自己做一份甜品，让周末的休闲充满制作甜蜜和品尝甜蜜的快乐。</p> </a></li> </ul> <a class="more" href="#">MORE</a></main><main> <div class="main-head"> <p><span>在线预定</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">电话号码</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">时间</label> <input type="text" name="time" id="time"> </li> <li> <label for="numberofpeople">人数</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">预定</a> </form> </div></main><footer> <div> <ul class="footer-top"> <li><a href="index.html">网站首页</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="productlist.html">菜式欣赏</a></li> <li><a href="article.html">美食资讯</a></li> <li><a href="contact.html">在线预订</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>浙江省大冶市大冶大道金穗小区好太太办公室</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;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：技术,静态,基础,水平,学生,作美
