html 西式甜品网制作.docx

上传人：b****8 文档编号：28709469 上传时间：2023-07-19 格式：DOCX 页数：14 大小：879.28KB

下载相关举报

第1页 / 共14页

第2页 / 共14页

第3页 / 共14页

第4页 / 共14页

第5页 / 共14页

点击查看更多>>

下载资源

资源描述

html 西式甜品网制作.docx

《html 西式甜品网制作.docx》由会员分享，可在线阅读，更多相关《html 西式甜品网制作.docx（14页珍藏版）》请在冰豆网上搜索。

html 西式甜品网制作.docx

html西式甜品网制作

“西式甜品网”首页面制作

一、案例描述

1、考核知识点

Ø盒子模型

Ø元素的浮动与定位

2、练习目标

Ø掌握盒子的相关属性。

Ø掌握元素的浮动与定位。

3、需求分析

盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。

4、案例展示

效果如图4-1所示。

图4-1“西式甜品网”效果展示

二、布局及定义基础样式

1、效果分析

（1）HTML结构分析

“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。

图4-2“西式甜品网”结构分析

（2）CSS样式分析

页面中的各个模块居中显示，页面的版心为980px。

另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

2、页面布局

新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

2"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml"xml:

lang="en">

6西式甜品网

--headbegin-->

--headend-->

--navbegin-->

--navend-->

--bannerbegin-->

--bannerend-->

--listbegin-->

--listend-->

--contentbegin-->

--contentend-->

--footerbegin-->

--footerend-->

在上述代码中，通过给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结构代码。

具体如下：

--headbegin-->

4登录|注册

--headend-->

（4）定义样式

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

具体如下：

1.head{

2width:

980px;

3height:

80px;

4margin:

0auto;

5position:

relative;

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结构代码。

具体如下：

--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{

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结构代码。

具体如下：

--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;

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结构代码。

具体如下：

--contentbegin-->

6爱的N次方

7马卡龙

8价格：

30元

12果肉果冻

13双色马卡龙

14价格：

30元

18芒果味

展开阅读全文