html西式甜品网制作.pdf

仅供个人参考 “西式甜品网”首页面制作 一、案例描述 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 结构代码，具体代码如下。 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 2 /xhtml1/DTD/xhtml1-transitional.dtd 3 html xmlns=/xhtml xml:lang=en 4 head 5 meta http-equiv=Content-Type content=text/html;charset=UTF-8 6 title 西式甜品网 /title 7 /head 8 body 9 !--head begin-- 10 div class=head/div 11 !--head end-- 12 !--nav begin-- 13 div class=nav/div 14 !--nav end-- 15 !--banner begin-- 16 div class=banner/div 17 !--banner end-- 18 !--list begin-- 19 div class=list/div 20 !--list end-- 21 !--content begin-- 22 div class=content/div 23 !--content end-- 24 !--footer begin-- 25 div class=footer/div 26 !--footer end-- 27 /body 28 /html 在上述代码中，通过给 div 添加不同的类名来定义页面中的各个模块。 3、定义公共样式 为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要 做的就是对 CSS 样式进行初始化并声明一些通用的样式。在 index04.html 文件所在的文件夹内新建 css 文 件夹用于存放样式表文件 style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下： /* 重置浏览器的默认样式 */ *{margin:0; padding:0;border:0; background:none;} /* 全局控制 */ body{font-family: 微软雅黑 ;font-size:16px;} 不得用于商业用途 仅供个人参考 三、案