--本页仅作为文档封面，使用时请直接删除即可-- --内页可以根据需求调整合适字体及大小--
html-西式甜品网制作(总14页)

“西式甜品网”首页面制作
一、案例描述
1、考核知识点
盒子模型
元素的浮动与定位
2、练习目标
掌握盒子的相关属性。
掌握元素的浮动与定位。
3、需求分析
盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。
4、案例展示
效果如图4-1所示。
图4-1“西式甜品网”效果展示
二、布局及定义基础样式
1、效果分析
（1）HTML结构分析
“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
图4-2“西式甜品网”结构分析
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。
2、页面布局
新建文件，在文件内书写HTML结构代码，具体代码如下。
1<!DOCTYPE html PUBLIC "-ead{
2    width:980px;
3    height:80px;
4    margin:0 auto;
5    position: relative;
摸车大赛 6}
7.logo{
8    position: absolute;
9    left:100px;
10    top:15px;餐饮美食食谱网站html模板
11}
12.login{
13    position: absolute;
14    right:100px;
15    top:34px;
16    color:#ff9c00;
17    cursor: pointer;
18    font-size: 18px;
19}
上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。
保存与文件，刷新页面，效果如图4-4所示。
图4-3“头部”模块效果图
宝宝发热怎么办
孕妇都不能吃什么
2、制作导航及banner模块
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航内容部分由<span>标记定义，banner图由<img>标记定义。“导航”及“banner”模块的具体结构如图4-5所示。
图4-4“导航”及“banner”模块结构图
（2）样式分析
“导航”模块的背景通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。
（3）搭建结构
在文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：
1<!--nav begin-->
2<div class="nav">
3    <div class="nav_in">
4        <span>首页</span>
5        <span>公司简介</span>
6        <span>美食甜品</span>
7        <span>用户留言</span>
8        <span class="last" ></span>
9    </div>
10</div>
11<!--nav end-->
12<!--banner begin-->
13<div class="banner"><img src="images/" /></div>
14<!--banner end-->
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如下：
1.nav{
2    width:100%;
3    height:50px;
4    background: #ff9c00;
5}
6.nav_in{
游乐场设备 7    width:820px;
8    margin:0 auto;
9    line-height: 50px;
10    color:#fff;
11大自然的语言课件    padding-left: 160px;
12}
13.nav_in span{
14    float: left;
15    padding:0 38px;