html 西式甜品网制作.docx

26

--footerend-->

27

28

在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。

3、定义公共样式

为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。

在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。

然后定义页面的基础样式，具体如下：

/*重置浏览器的默认样式*/

*{margin:

0;padding:

0;border:

0;background:

none;}

/*全局控制*/

body{font-family:

"微软雅黑";font-size:

16px;}

三、案例制作

1、制作头部模块

（1）HTML结构分析

“头部”模块整体由一个大盒子

6

--headend-->

（4）定义样式

在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。

具体如下：

1.head{

2width:

980px;

3height:

80px;

4margin:

0auto;

5position:

relative;

6}

7.logo{

8position:

absolute;

9left:

100px;

10top:

15px;

11}

12.login{

13position:

absolute;

14right:

100px;

15top:

34px;

16color:

#ff9c00;

17cursor:

pointer;

18font-size:

18px;

19}

上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。

保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。

图4-4“头部”模块效果图

2、制作导航及banner模块

（1）HTML结构分析

“导航”及“banner”模块分别由一个大盒子

14

--bannerend-->

（4）定义样式

在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。

具体如下：

1.nav{

2width:

100%;

3height:

50px;

4background:

#ff9c00;

5}

6.nav_in{

7width:

820px;

8margin:

0auto;

9line-height:

50px;

10color:

#fff;

11padding-left:

160px;

12}

13.nav_inspan{

14float:

left;

15padding:

038px;

16color:

#9c5132;

17cursor:

pointer;

18}

19.banner{text-align:

center;}

上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。

保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。

图4-6“导航”及“banner”模块效果图

3、制作产品分类模块

（1）HTML结构分析

“产品分类”模块主要由

8西式甜点