HTML5期末⼤作业：餐饮美⾷⽹站设计——蛋糕甜品（4个页
⾯）HTML+CSS+JavaS。。。
HTML5期末⼤作业：餐饮美⾷⽹站设计——蛋糕甜品(4个页⾯) HTML+CSS+JavaScript 期末作业HTML代码 学⽣⽹页课程设计期末作业下载 web⽹页设计制作成
临近期末, 你还在为HTML⽹页设计结课作业,⽼师的作业要求感到头⼤？HTML⽹页作业⽆从下⼿？⽹页要求的总数量太多？没有合适的模板？等等⼀系列问题。你想要解决的问题，在这篇博⽂中基本都能满⾜你的需求~
原始HTML+CSS+JS页⾯设计, web⼤学⽣⽹页设计作业源码，这是⼀个不错的⽹页制作，画⾯精明，⾮常适合初学者学习使⽤。
作品介绍
1.⽹页作品简介⽅⾯ ：蛋糕甜品在线预订⽹站模板html下载。主要有：蛋糕家谱、列表页⾯、分类页⾯等总共4个页⾯。
2.⽹页作品编辑⽅⾯：此作品为学⽣期末⼤作业⽹页设计题材，代码为简单学⽣⽔平 html+css 布局制作，
作品下载后可使⽤任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使⽤)
3.⽹页作品布局⽅⾯：⽹页布局整体为LOGO、导航、主体内容布局。⼦页⾯多种布局，兴趣爱好内容使⽤图⽚列表布局，成绩页⾯插⼊了表格，使⽤图⽚对齐⽅式设置了左对齐。
4.⽹页作品技术⽅⾯：使⽤CSS制作了⽹页背景图、⿏标经过及选中导航变⾊效果、下划线等。 ⾸页制作了留⾔表单，同时简单使⽤JavaScript制作了表单判断(提交时表单不能为空)
⽂章⽬录
HTML5期末⼤作业：餐饮美⾷⽹站设计——蛋糕甜品(4个页⾯) HTML+CSS+JavaScript 期末作业HTML代码 学⽣⽹页课程设计期末作业下载 web⽹页设计制作成
作品介绍
⼀、作品演⽰
⼆、代码⽬录
三、代码实现
四、web前端⼊门到⾼级(视频+源码+资料+⾯试)⼀整套 (教程)
五、源码获取
六、更多HTML期末⼤作业(成品下载)
>>>戳我>>>点击进⼊200例期末⼤作业作品
⼆、代码⽬录
三、代码实现
<!DOCTYPE html> <html lang="en">
<meta charset="UTF-8">
<title>不急蛋糕</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="swiper/swiper.min.css">
</head>
<body id="index">
<div class="header">
<div id="headerCen">
<div id="logo"><img src="images/logo.jpg"></div>
<div class="headerTop">
<div id="notice">
<div class="notice">
<span>2017年1⽉27⽇除⼣夜，不急蛋糕配送及400客服时间最晚⾄18：00，次⽇恢复正常服务，敬请谅解。不急2017年1⽉27⽇除⼣夜，不急蛋糕配送及400客服 </div>
</div>
<ul id="ures">
<li><a href="#">登录</a> <span></span></li>
<li><a href="#">注册</a> <span></span></li>
<li><a href="#">订单</a> <span></span></li>
<li><img src="images/shou_car.png"></li>
</ul>
</div>
<!-- <div id="claer"></div> -->
<ul class="headerBut">
<li class="hover"><a href="#">⾸页</a></li>
<li><a href="about.html">蛋糕家谱</a></li>
<li><a href="tale.html">不急物语</a></li>
<li><a href="#">最新活动</a></li>
<li><a href="love.html">因为爱情</a></li>
<span><img src="images/shou_dinahua.png"><a href="#"> 4006 666 666(服务时间：8:30-22:30)</a></span>
</ul>
</div>
</div>
<!-- header -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/bnner.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/bnner.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- swiper -->
<div class="content">
<div id="content">
<h2><img src="images/shou_nr1.png"></h2>
<ul class="contentMenu">
<li>
<img src="images/shou_n1.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div>
</div>用html和css制作百度页面
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<img src="images/shou_n2.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n3.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n4.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n5.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n6.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n7.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n8.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
<p>6⼨/227RMB</p>
<span>甜度:</span>
<img src="images/tian_du.png">
<img src="images/tian_du.png">
<img src="images/tian_du.png">
</div>
<div class="mune_r"><img src="images/shou_car.png"></div> </div>
<div class="menuBut">
<p>⾹柠马斯卡邦</p>
<p>Lemon mascarpone cake</p>
</div>
</li>
<li>
<img src="images/shou_n9.jpg" class="pro">
<div class="menuOpen">
<div class="menu_l">
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论