运用HTML、CSS设计Web网页——“西式甜品网”图例及代码
目录
一、效果展示图
二、设计分析
1.整体效果分析
2.头部header模块效果分析
4.分类classify模块效果分析
5.产品展示show模块效果分析
6.版权banquan模块效果分析
三、HTML、CSS代码分模块展示
1. 头部header模块代码
3.分类classify模块
4.产品展示show模块代码
5.版权banquan模块代码
四、完整代码
1.HTML代码：
2.CSS代码：
一、效果展示图
二、设计分析
1.整体效果分析
（1）HTML结构分析
“西式甜品网”首页面从上到下可以分为5个模块
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。
2.头部header模块效果分析
（1）HTML结构分析
“头部”模块整体由一个大盒子<div>进行控制。内部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字内容部分。
（2）CSS样式分析
“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。
3.导航及banner模块效果分析
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航内容部分由<span>标签定义，banner图由<img>标签定义。
（2）css样式分析
“导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标签左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。
4.分类classify模块效果分析
（1）HTML结构分析
“产品分类”模块主要由<div>标签定义。
（2）css样式分析
“产品分类”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个分类模块的<div>标签左浮动，并定义相关的文字样式。
5.产品展示show模块效果分析
（1）HTML结构分析
“产品展示”模块主要由<div>标签嵌套<img>标签和<span>标签定义。
（2）样式分析
“产品展示”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个展示模块的<div>标签左浮动，并定义相关的文字样式。
6.版权banquan模块效果分析
（1）HTML结构分析
“版权信息”模块由<div>标签定义。
（2）样式分析
“版权信息”模块的背景图通栏显示，因此需设置最外层<div>的宽度100%，且文字内容居中显示。
三、HTML、CSS代码分模块展示
1. 头部header模块代码
HTML代码：
<!-- header begin!--><div id="header"><div class="logo"><img src="images/logo.jpg" alt=""> </div> <div class="one"><span>登录 | 注册</span></div></div>
<!-- herder end-->CSS代码：
#header{width: 980px;height: 80px;margin: 0 center;
/* position: absolute; 设置绝对定位*/background-color:white;
}.logo{float: left;position: relative; /*设置相对定位*/padding-left: 20px; /*设置内边距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}2.导航及banner模块代码
HTML代码：
<!-- banner begin--><div id="banner"><div class="two"><span>首页</span><span>公司简介</span><span>美食甜品</span><span>用户留言</span><span>联系我们</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!-- banner end-->CSS代码：
#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}3.分类classify模块
HTML代码：
<!-- classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米苏</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>马卡龙</p></div><div class="con"><img src="images/list5.png"><p>西式甜点</p></div></div>
<!-- classify end-->CSS代码：
#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/* position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}
4.产品展示show模块代码
HTML代码：
<!-- show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>爱的N次方</span><span class="name">马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果冻</span><span class="name">双色马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果冻荔枝味</span><span class="name">多彩马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜点</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米苏</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麦奶油</span><span class="name">芝士蛋糕</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!-- show end-->CSS代码：
#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}5.版权banquan模块代码
HTML代码：
<!-- banquan begin--><div id="banquan"><p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p></div>
<!-- banquan end-->CSS代码：
#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}四、完整代码
1.HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="实验1.css" type="text/css" rel="stylesheet"/>
<title>西式甜品网</title>
</head><body>
<!-- header begin!--><div id="header"><div class="logo"><img src="images/logo.jpg" alt=""> </div> <div class="one"><span>登录 | 注册</span></div></div>
<!-- herder end--><!-- banner begin--><div id="banner"><div class="two"><span>首页</span><span>公司简介</span><span>美食甜品</span><span>用户留言</span><span>联系我们</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!-- banner end--><!-- classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米苏</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>马卡龙</p></div><div class="con"><img src="images/list5.png"><p>西式甜点</p></div></div>
<!-- classify end--><!-- show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>爱的N次方</span><span class="name">马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果冻</span><span class="name">双色马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果冻荔枝味</span><span class="name">多彩马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜点</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米苏</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麦奶油</span><span class="name">芝士蛋糕</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!-- show end--><!-- banquan begin--><div id="banquan"><p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p></div>
<!-- banquan end-->
</body>
</html>
2.CSS代码：
@charset "utf-8";
/* CSS Document */
*{margin: 0 auto 0;padding: 0;}
body{font-family: "微软雅黑";font-size: 16px;width: 980px;} /*页面各个模块居中显示*/#header{width: 980px;height: 80px;margin: 0 center;
/* position: absolute; 设置绝对定位*/background-color:white;
}.logo{float: left;position: relative; /*设置相对定位*/padding-left: 20px; /*设置内边距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/* position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}