HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计
- 获取更多源码
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html>
<head>
<meta name="keywords" content="甜爱，SweetLove,甜品，甜点，生日蛋糕，冰淇淋，冰品"/>
<meta name="description" content="甜爱网上商城是专注于甜品销售、进口的网站，各种甜品、甜点齐全，还有解暑的各种冰品任顾客挑选，让他们感受到爱的温馨。">
<meta charset="utf-8">
<title>我的甜品，你的爱~</title>
<link rel="shortcut icon" href="images/logo_01.png">
<link rel="stylesheet" href="css/index.css">
<script src="http://www.jq22/jquery/jquery-1.10.2.js"></script>
<script src="js/LiftEffect.js"></script>
<style>
a, a:visited {
color: #E54028;
text-decoration: none;
}
a:hover {
color: #c22d18;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
body{
height: 6000px;
}
.lift-nav{
position: fixed;
top: 100px;
left: 30px;
display: none;
}
.lift-nav li{
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
padding: 10px 10px;
margin-bottom: 10px;
background: skyblue;
cursor: pointer;
}
.lift-nav li.current{
background:#fb0000;
}
/*.t1,.t2,.t3,.t4,.t5,.t6{
width: 800px;
height: 400px;
text-align: center;
line-height: 400px;
background: skyblue;
margin: 100px auto;
font-size: 30px;
color: #fff;
}
.t1{
margin-top: 200px;
}
.t2{
background: pink;
}
.t3{
background: tomato;
}
.t4{
background: grey;
}
.t5{
background: yellow;
}
.t6{
background: seagreen;
}*/
</style>
<!--Required libraries-->
<script src="js/jquery-v1.10.2.min.js" type="text/javascript"></script>
<script src="js/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
<!--Include flickerplate-->
<link href="css/flickerplate.css" type="text/css" rel="stylesheet">
<script src="js/flickerplate.min.js" type="text/javascript"></script>
<!--Execute flickerplate-->
<script>
$(document).ready(function(){
$('.flicker-example').flicker();
});
</script>
</head>
>
<div>
<p>红豆山药糕</p>
</div>
</a>
<a href="xiangqing.html" class="gui">
<div>
<p>龟 苓 膏</p>
</div>
</a>
</li>
</ol>
</div>
<div class="t5">
<ul>
<li></li>
<p>美味蛋糕</p>
<a href="xiangqing.html">+MORE</a>
</ul>
<ol>
<li><a href="xiangqing.html"></a></li>
<li>
<ul class="chuangyi">
<div>创意</div>
</ul>
<ul class="youya">
<div>优雅</div>
</ul>
<ul class="tongqu">
<div>童趣</div>
</ul>
<ul class="ziran">
<div>自然</div>
</ul>
</li>
</ol>
</div>
<div class="t6">
<ul>
<li></li>
<p>中秋团圆</p>
<a href="xiangqing.html">+MORE</a>
</ul>
<ol>
<li>
<div class="meixin">
<ul>
<h2>流心月饼开创者</h2>
<p>送精致鸡蛋卷</p>
<a href="xiangqing.html">
<p>进店看看</p>
<div>></div>
</a>
</ul>
</div>
<div class="wufang">
<ul>
<h2>百年匠心品质</h2>
<p>送绿豆冰糕礼盒</p>
<a href="xiangqing.html">
<p>进店看看</p>
<div>></div>
</a>
</ul>
</div>
</li>
<li>
<div class="bandao">
<ul>
<h2>奶黄月饼开创者</h2>
<p>送购物袋心意卡</p>
<a href="xiangqing.html">
<p>进店看看</p>
<div>></div>
</a>
</ul>
</div>
<div class="danxiang">
<ul>
<h2>白莲蓉月饼首创</h2>
<p>送广式风味甜品</p>
<a href="xiangqing.html">
<p>进店看看</p>
<div>></div>
</a>
</ul>
</div>
</li>
</ol>
<div></div>
</div>
<div class="jingxuan">
<ul>
<p>本周精选专题</p>
<li></li>
<span>足不出户，吃遍全球</span>
</ul>
<ol>
<a href="xiangqing.html"><li></li></a>
<a href="xiangqing.html"><div></div></a>
</ol>
</div>
</div>
<!--页脚-->
<div id="footCon">
<ul>
<li>
<div class="cold"></div>
<span></span>
<ol>
<h2>18小时低温</h2>
<p>全程冷链配送</p>
</ol>
</li>
<li>
<div class="wuxiu"></div>
<span></span>
<ol>
<h2>7*24小时营业</h2>
<p>全年无休</p>
</ol>
</li>
<li>
<div class="baoyou"></div>
<span></span>
<ol>
<h2>满88包邮</h2>
<p>次日送达</p>
</ol>
</li>
</ul>
<ol>
<li>
<i></i>
<a href="#">www.sweetlove</a>
<div>
<a href="http://www.weibo" class="weibo"></a>
<a href="http://wx.qq" class="weixin"></a>
</div>
</li>
<ul>
<li class="text01">
<p>关于甜爱</p>
<span></span>
<a href="#">媒体报道</a>
<a href="#">知识产权</a>
<a href="#">加入我们</a>
</li>
<li>
<p>帮助中心</p>
<span></span>
<a href="#">购物指南</a>
<a href="#">订单管理</a>
<a href="#">常见问题</a>
</li>
<li>
<p>服务支持</p>
<span></span>
<a href="#">服务保障</a>
<a href="#">用户协议</a>
<a href="#">售后服务</a>
</li>
<li>
<p>商业合作</p>
<span></span>
<a href="#">集合采购</a>
<a href="#">品牌合作</a>
<a href="#">媒体合作</a>
</li>
</ul>
<div>
<p>联系我们</p>
<h2>400-8888-000</h2>
<span>24小时服务热线</span>
<a href="#">在线客服</a>
</div>
</ol>
<div></div>
<li>
<p>Copyright © 2016 sweetlove Inc.All Rights Reserved. 北京甜爱食品有限公司</p>
<span>版权所有 京ICP备14049645号-1 增值电信业务经营许可证：京ICP证160100号</span>
</li>
</div>
<script>
$(function(){
LiftEffect({
"control1": ".lift-nav", //侧栏电梯的容器
"control2": ".lift", //需要遍历的电梯的父元素
"target": [".t1",".t2",".t3",".t4",".t5",".t6"], //监听的内容，注意一定要从小到大输入
"current": "current" //选中的样式
});
})
</script>
</body>
</html>
四、获取更多源码
PC电脑端关注我们
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
HTML5期末大作业：蛋糕甜品网站设计——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计
发布评论