1 “西式甜品网”首页面制作 一、案例描述 1 、考核知识点 ➢ 盒子模型 ➢ 元素的浮动与定位 2 、练习目标 ➢ 掌握盒子的相关属性。 ➢ 掌握元素的浮动与定位。 3 、需求分析 盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。 4 、案例展示 效果如图 4 -1 所示。 2 图4 -1 “西式甜品网”效果展示 二、布局及定义基础样式 1、效果分析 （1）HTML 结构分析 “西式甜品网”首页面从上到下可以分为 5 个模块，如图4 -2 所示。 3 头部导航及banner产品分类产品展示版权信息 图4-2 “西式甜品网”结构分析 （2）CSS样式分析 页面中的各个模块居中显示，页面的版心为 980px 。另外，页面中的所有字体均为微软雅黑，字体大小为 16px ，这些可以通过 CSS 公共样式进行定义。 2、页面布局 新建 index 04.html 文件，在 index 04.html 文件内书写 HTML 结构代码，具体代码如下。 1 3 4 5
6
西式甜品网 7 4 8 9 10
11 12 13
14 15 16
17 18 19
20 21 22
23 24 25 26 27 28 在上述代码中，通过给div 添加不同的类名来定义页面中的各个模块。 3、定义公共样式 为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS 样式进行初始化并声明一些通用的样式。在index 04.html 文件所在的文...
