收藏

下载资源 加入VIP,免费下载

第1页 / 共19页

第2页 / 共19页

第3页 / 共19页

第4页 / 共19页

第5页 / 共19页

第6页 / 共19页

第7页 / 共19页

第8页 / 共19页

第9页 / 共19页

第10页 / 共19页

第11页 / 共19页

第12页 / 共19页

第13页 / 共19页

第14页 / 共19页

第15页 / 共19页

第16页 / 共19页

第17页 / 共19页

第18页 / 共19页

第19页 / 共19页

14

--navend-->

15

--bannerbegin-->

16

17

--bannerend-->

18

--listbegin-->

19

20

--listend-->

21

--contentbegin-->

22

23

--contentend-->

24

--footerbegin-->

25

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西式甜点

9

10

11

--listend-->

（4）定义样式

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

具体如下：

1.list{

2width:

100%;

3height:

240px;

4background:

#e7bf80;

5}

6.list.list_in{

7width:

940px;

8height:

195px;

9margin:

0auto;

10padding:

45px0040px;

11}

12.list.list_indiv{

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所示。

图4-8“产品分类”模块效果图

4、制作产品展示模块

（1）HTML结构分析

“产品展示”模块主要由

标记嵌套标记和标记定义。

“产品展示”模块的具体结构如图4-9所示。

图4-9“产品展示”模块结构图

（2）样式分析

“产品展示”模块的背景色通栏显示，因此需设置最外层

的宽度100%，内部嵌套的

宽度为980px，且在页面中居中显示。

定义每一个展示模块的

标记左浮动，并定义相关的文字样式。

（3）搭建结构

在index04.html文件内书写“产品展示”模块的HTML结构代码。

具体如下：

1

--contentbegin-->

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

52

53

54

--contentend-->

（4）定义样式

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

具体如下：

1.content{

2width:

100%;

3height:

570px;

4background:

#f8f5bc;

5}

6.con{

7width:

912px;

8height:

530px;

9margin:

0auto;

10padding:

40px0068px;

11}

12.con.con_type{

13width:

180px;

14height:

220px;

15border:

1pxsolid#ccc;

16float:

left;

17background:

#fff;

18margin:

039px30px0;

19font-size:

14px;

20color:

#9c5132;

21}

22.con.con_typespan{

23display:

block;

24padding:

2px0016px;

25}

26.con.con_typespan.con_name{color:

#fd8187;}

27.con.con_typespanb{

28font-weight:

normal;

29color:

#fd8187;

30}

31.con.con_typeimg{

32margin:

12px12px3px12px;

33width:

158px;

34height:

122px;

35}

上述代码中，第23行代码将标记转换为块元素用于换行显示文字内容。

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

图4-10“产品展示”模块效果图

5、制作版权信息模块

（1）HTML结构分析

“版权信息”模块由