书签 分享 收藏 举报 版权申诉 / 19
立即下载 加入VIP,免费下载
当前位置： 首页 > 经管营销 > 经济市场 > html西式甜品网制作.docx

类型html西式甜品网制作.docx

  • 文档编号：2058629
  • 上传时间：2023-05-02
  • 格式：DOCX
  • 页数：19
  • 大小：1.25MB

11

--headend-->

12

--navbegin-->

13

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

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

进行控制。

内部嵌套和

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

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

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

（2）样式分析

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

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

（3）搭建结构

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

具体如下：

1

--headbegin-->

2

3

4登录|注册

5

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”模块分别由一个大盒子

进行控制。

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

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

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

（2）样式分析

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

的宽度100%，内部嵌套的
宽度为980px，且在页面中居中显示。

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

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

（3）搭建结构

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

具体如下：

1

--navbegin-->

2

3

4首页

5公司简介

6美食甜品

7用户留言

8联系我们

9

10

11

--navend-->

12

--bannerbegin-->

13

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

“产品分类”模块主要由

标记定义。

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

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

（2）样式分析

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

的宽度100%，内部嵌套的
宽度为980px，且在页面中居中显示。

定义每一个分类模块的

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

（3）搭建结构

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

具体如下：

1

--listbegin-->

2

3

4提拉米苏

5甜甜圈

6芝士蛋糕

7马卡龙

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

“版权信息”模块由

标记定义。

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

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

（2）样式分析

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

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

（3）搭建结构

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

具体如下：

1

--footerbegin-->

2西式甜品网版权所有2000-2016京ICP备08001421号  京公网安备110108007702

3

--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“版权信息”模块效果图

图4-13

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
html 西式 甜品 制作
提示  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：html西式甜品网制作.docx
链接地址：https://www.bingdoc.com/p-2058629.html

文档标签

热门标签

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部