HTML5期末大作业:蛋糕甜品网站设计——蛋糕甜品店铺(11页) HTML+CSS+JavaScript 关于美食甜品的HTML网页设计
作品介绍
1.网页作品简介
:HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。
2.网页作品编辑
:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
等任意HTML软件编辑修改网页)。
3.网页作品技术
:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!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.com/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=