html西式甜品网制作
时间：2021-04-17 08:19:25 来源：达达文档网 本文已影响 人 
“西式甜品网”首页面制作
一、案例描述
1、考核知识点
➢盒子模型
➢元素的浮动与定位
2、练习目标
➢掌握盒子的相关属性。
➢掌握元素的浮动与定位。
3、需求分析
盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。
4、案例展示
效果如图4-1所示。
图4-1“西式甜品网”效果展示
1 / 13
二、布局及定义基础样式
1、效果分析
（1）HTML结构分析
“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
头部
导航及banner
产品分类
产品展示
版权信息
图4-2“西式甜品网”结构分析
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。
2、页面布局
新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。
2 / 13
1
2"">
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。
3、定义公共样式
为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/
*{margin:0; padding:0;border:0; background:none;}
/*全局控制*/
body{font-family:"微软雅黑";font-size:16px;}
3 / 13
4 / 13 三、案例制作
1、制作头部模块
（1）HTML 结构分析
“头部”模块整体由一个大盒子进行控制。内部嵌套和分别用来搭建左侧logo 和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。
图4-3 “头部”模块结构图
（2）样式分析
“头部”模块的宽为980px ，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。
（3）搭建结构
在index04.html 文件内书写“头部”模块的HTML 结构代码。具体如下： 1
2
3
4 登录 | 注册
5
6
（4）定义样式
在样式表文件style04.css 中书写CSS 样式代码，用于控制“头部”模块。具体如下： 1 .head{
2
width:980px; 3
height:80px; 4
margin:0 auto; 5
position: relative;
6 }
7 .logo{
8
position: absolute; 9
left:100px; 10
top:15px; 11 }
12 .login{
13
position: absolute; 14 right:100px;
15
top:34px;
16color:#ff9c00;
17cursor: pointer;
18font-size: 18px;
19}
上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。
保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。
图4-4“头部”模块效果图
2、制作导航及banner模块
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子进行控制。导航内容部分由标记定义，banner 图由标记定义。“导航”及“banner”模块的具体结构如图4-5所示。
图4-5“导航”及“banner”模块结构图
（2）样式分析
“导航”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。
（3）搭建结构
在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：
1
2
3
4首页
5 / 13
5公司简介
6美食甜品
7用户留言
8联系我们
9
10
11
12
13
14
（4）定义样式
在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如下： 1.nav{
2width:100%;
3height:50px;
4background: #ff9c00;
5}
6.nav_in{
7width:820px;
8margin:0 auto;
9line-height: 50px;
10color:#fff;
11padding-left: 160px;
12}
13.nav_in span{
14float: left;
15padding:0 38px;
16color:#9c5132;
17cursor: pointer;
18}
19.banner {text-align: center;}
上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。
保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。
6 / 13
7 / 13
图4-6 “导航”及“banner ”模块效果图
3、制作产品分类模块
（1）HTML 结构分析
“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如图4-7所示。
图4-7 “产品分类”模块结构图
（2）样式分析
“产品分类”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px ，且在页面中居中显示。定义每一个分类模块的标记左浮动，并定义相关的文字样式。
（3）搭建结构
在index04.html 文件内书写“产品分类”模块的HTML 结构代码。具体如下： 1
2
3
4
提拉米苏 5 甜甜圈
6
芝士蛋糕
7马卡龙
8西式甜点
9
10
11
（4）定义样式
在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类”模块。具体如下： 1.list{
2width:100%;
3height:240px;
4background: #e7bf80;
5}
6.list .list_in{
7width:940px;
8height:195px;
9margin:0 auto;
10padding:45px 0 0 40px;
11}
12.list .list_in div{
13float: left;
14width:146px;
15height:55px;
16padding-top: 95px;
17margin-right: 42px;
18background: url(../images/list1.png) no-repeat;
19text-align: center;
20color:#9c5132;
21}
22.list .list_in .list2{background: url(../images/list2.png) no-repeat;}
23.list .list_in .list3{background: url(../images/list3.png) no-repeat;}
24.list .list_in .list4{background: url(../images/list4.png) no-repeat;}
25.list .list_in .list5{background: url(../images/list5.png) no-repeat;}
上述代码中，第22-25行代码用于分别设置各个分类模块的背景图片。
保存index04.html与style04.css文件，刷新页面，效果如图4-8所示。
8 / 13
9 / 13
图4-8 “产品分类”模块效果图
4、制作产品展示模块
（1）HTML 结构分析
“产品展示”模块主要由标记嵌套标记和标记定义。“产品展示”模块的具体结构如图4-9所示。
图4-9 “产品展示”模块结构图
（2）样式分析
“产品展示”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px ，且在页面中居中显示。定义每一个展示模块的标记左浮动，并定义相关的文字样式。
（3）搭建结构
在index04.html 文件内书写“产品展示”模块的HTML 结构代码。具体如下：
1
2
3
4
5 
6 爱的N 次方
7
马卡龙
8价格：30元
9
10
11
12果肉果冻
13双色马卡龙 14价格：30元
15
16
17
18芒果味
19布丁马卡龙 20价格：30元
21
22
23
24果冻荔枝味
25多彩马卡龙 26价格：30元
27
28
29
30果味巧克力
31西式甜点 32价格：30元
33
34
35
36奶油水果
37提拉米苏 38价格：30元
39
40
41
42玫瑰花型
43布丁
44价格：30元
45
46
47
48燕麦奶油
49芝士蛋糕 50价格：30元
51
10 / 13
52
53
54
（4）定义样式
在样式表文件style04.css中书写CSS样式代码，用于控制“产品展示”模块。具体如下： 1.content{
2width:100%;
3height:570px;
4background: #f8f5bc;
5}
6.con{
7width:912px;
8height:530px;
9margin:0 auto;
10padding:40px 0 0 68px;
11}
12.con .con_type{
13width:180px;
14height:220px;
15border:1px solid #ccc;
16float: left;
17background: #fff;
18margin:0 39px 30px 0;
19font-size: 14px;
20color:#9c5132;
21}
22.con .con_type span{
23display: block;
24padding:2px 0 0 16px;
25}
26.con .con_type span.con_name{color:#fd8187;}
27.con .con_type span b{
28font-weight: normal;
29color:#fd8187;
30}
31.con .con_type img{
32margin:12px 12px 3px 12px;
33width:158px;
34height:122px;
35}
上述代码中，第23行代码将标记转换为块元素用于换行显示文字内容。
保存index04.html与style04.css文件，刷新页面，效果如图4-10所示。
11 / 13
12 /
13
图4-10 “产品展示”模块效果图
5、制作版权信息模块
（1）HTML 结构分析
“版权信息”模块由标记定义。具体结构如图4-11所示。
图4-11 “版权信息”模块结构图
（2）样式分析
“版权信息”模块的背景图通栏显示，因此需设置最外层的宽度100%，且文字内容居中显示。
（3）搭建结构
在index04.html 文件内书写“版权信息”模块的HTML 结构代码。具体如下： 1
2 西式甜品网版权所有2000-2016京ICP 备08001421号 京公网安备110108007702
3
（4）定义样式
在样式表文件style04.css 中书写CSS 样式代码，用于控制“版权信息”模块。具体如下：
