html西式甜品网制作.docx

进行控制。

内部嵌套和

分别用来搭建左侧logo和右侧文字内容部分。

“头部”模块的具体结构如图4-3所示。

图4-3“头部”模块结构图

（2）样式分析

“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。

左侧logo

和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。

（3）搭建结构

在index04.html文件内书写“头部”模块的HTML结构代码。

具体如下：

--headbegin-->

4登录|注册

--headend-->

（4）定义样式

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

具体如下：

1.head{

2width:

980px;

3height:

80px;

4margin:

0auto;

5position:

relative;

}

.logo{

position:

absolute;

left:

100px;

top:

15px;

}

.login{

position:

absolute;

right:

100px;

top:

34px;

color:

#ff9c00;

cursor:

pointer;

font-size:

18px;

19}

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

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

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

2、制作导航及banner模块

（1）HTML结构分析

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

进行控制。

导航内容部分由标记定义，banner

图由标记定义。

“导航”及“banner”模块的具体结构如图4-5所示。

图4-5“导航”及b“anner”模块结构图

（2）样式分析

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

的宽度100%，内部嵌套的

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

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

最后还需设置“banner”模块的图片在页面中居中显示。

（3）搭建结构

在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。

具体如下：

--navbegin-->

4首页

5公司简介

6美食甜品

7用户留言

8联系我们

--navend-->

--bannerbegin-->

--bannerend-->

（4）定义样式

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

具体如下：

1.nav{

2width:

100%;

3height:

50px;

4background:

#ff9c00;

6.nav_in{

7width:

820px;

8margin:

0auto;

9line-height:

50px;

10color:

#fff;

11padding-left:

160px;

12}

13.nav_inspan{

float:

left;

padding:

038px;

color:

#9c5132;

cursor:

pointer;

}

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

3、制作产品分类模块

（1）HTML结构分析

“产品分类”模块主要由

标记定义。

“产品分类”模块的具体结构如图4-7所示。

图4-7“产品分类”模块结构图

（2）样式分析

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

的宽度100%，内部嵌套的

宽度为

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

定义每一个分类模块的

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

（3）搭建结构

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

具体如下：

--listbegin-->

4提拉米苏

5甜甜圈

6芝士蛋糕

7马卡龙

8西式甜点

--listend-->

（4）定义样式

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

具体如下：

1.list{

2width:

100%;

3height:

240px;

4background:

#e7bf80;

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;

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

4、制作产品展示模块

（1）HTML结构分析

“产品展示”模块主要由

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

“产品展示”模块的具体结构如图

4-9所示。

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

（2）样式分析

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

的宽度100%，内部嵌套的

宽度为

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

定义每一个展示模块的

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

（3）搭建结构

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

具体如下：

--contentbegin-->

6爱的N次方

7马卡龙

8价格：

30元

12果肉果冻

13双色马卡龙

14价格：

30元

18芒果味

19布丁马卡龙

20价格：

30元

24果冻荔枝味

25多彩马卡龙

26价格：

30元

30果味巧克力

31西式甜点

32价格：

30元

36奶油水果

37提拉米苏

38价格：

30元

42玫瑰花型

43布丁

44价格：

30元

48燕麦奶油

49芝士蛋糕

50价格：

30元

--contentend-->

（4）定义样式

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

具体如下：

1.content{

2width:

100%;

3height:

570px;

4background:

#f8f5bc;

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结构分析

“版权信息”模块由

标记定义。

具体结构如图4-11所示。

图4-11“版权信息”模块结构图

（2）样式分析

“版权信息”模块的背景图通栏显示，因此需设置最外层

的宽度100%，且文字内容居中显示。

（3）搭建结构

在index04.html文件内书写“版权信息”模块的HTML结构代码。

具体如下：

--footerbegin-->

110108007702

--footerend-->

（4）定义样式

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

具体如下：

1.footer{

2position:

relative;

3top:

-8px;

4width:

100%;

5height:

120px;

6background:

url（../images/footer.png）repeat-x;

7text-align:

center;

8line-height:

120px;

9color:

#fff;

10font-size:

18px;

11}

上述代码中，第6行代码用于设置背景图沿X轴平铺。

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

图4-12“版权信息”模块效果图

WelcomeToDownload

欢迎您的下载，资料仅供参考！

展开阅读全文