HTML网页布局

一、网站开发的4个步骤

1.需求分析

• 客户需求
• 业务背景
• 设计风格
• 网站内容

2.确认需求

提供给客户一个前期静态的设计样板(可PhotoShop制作)

3.网站制作

创建站点 ---> 制作首页 ---> 制作模板 ---> 制作样式

4.测试网页

5.发布网站

二、Div的概念

标记:<div></div>

• 一行始终只有一个div标记
• 没有特性,css更容易控制

三、页面水平居中效果

1.Margin{0 auto}
2.必须要有类型声明

四、流式布局

1.Float:left right none
2.Clear:both left right none

五、定位

1.绝对定位

•   position:absolute
•   top bottom left right
•   当多个div在同一位置时,显示哪个层由Z-index的值决定

2.相对定位

position:relative
相对于正常位置的top bottom left right

六、页面布局

• 导航部分
• 广告部分
• 商品分类部分
• 版权声明部分

七、页面布局

1.框架布局

优点	缺点	应用场合
支持滚动条,方便导航,  节省页面下载时间等	兼容性不好,保存时不方便, 应用范围有限等   后台管理	小型商业网站,论坛,学习教程等

2.表格布局

优点	缺点	应用场合
方便排列有规律、   结构均匀的内容或数据	产生垃圾代码、影响页面下载时间、 灵活性不大,难以维护	内容或数据整齐的页面

3.DIV布局

DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素
创建DIV的步骤如下:

• 新建一个空白文档
• 选择 "插入" ---> "布局对象" --->"层"

优点	缺点	应用场合
代码精简、提高页面下载速度、  表现和内容相分离等	比较灵活,  难以控制	复杂的不规则页面、   业务种类较多的大型商业网站