html-西式甜品网制作

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

一、案例描述

1、考核知识点

➢盒子模型

➢元素的浮动与定位

2、练习目标

➢掌握盒子的相关属性。

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

3、需求分析

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

4、案例展示

效果如图4-1所示。

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

二、布局及定义基础样式

1、效果分析

（1）HTML结构分析

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

头部

导航及banner

产品分类

产品展示

版权信息

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

（2）CSS样式分析

页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

2、页面布局

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

1

2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

2

3

4

登录 | 注册

5

6

（4）定义样式

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

1.head{

2width:980px;

3height:80px;

4margin:0 auto;

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