DIV+CSS首页布局练习

新建外部样式，
html中设置<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >表示文件格式，在加入<link rel="stylesheet" type="text/css" href="css/hh.css"> 引入外部css链接
最先布局一个最外面的层，设置宽度960像素，临时高度800像素和背景颜色

布局整个body体 ，所有外边距和内填充变成0，顶点对齐

最外面的层设置居中margin：0 auto
兼容：整个body体里也设置居中，text-align：center；
最外面的层在设置整个文本左对齐方便布局text-align：leftr；

最外面层里设置三个层
头部层，内容层，页脚层
头部层设置宽度100%沾满，临时高度150像素，背景颜色用来区分
内容层设置宽度100%沾满，临时高度150像素，背景颜色用来区分
页脚层设置宽度100%沾满，临时高度150像素，背景颜色用来区分
里面三个层高度临时固定，删除最外层的临时高度 和背景颜色

三个层之间需要有间隙，空白，如果在每个层里定义margin修改的时候很麻烦，所以定义一个加塞的层，类名nav，定义宽度width：100%，高度10px；
兼容：IE浏览器在设置高度低于18像素的时候都按照18像素计算，所以IE高度高于其他浏览器的高度，添加一句超出的部分隐藏，overflow：hidden

在头部的层里分为4格层，logo层，banner层，工具层，导航层。
样式定义在头部附近，便于寻找。 
logo层定义宽度，高度和背景颜色
banner层定义宽度，高度和背景颜色
工具层定义宽度，高度和背景颜色
导航层定义宽度，高度和背景颜色
兼容：标准的盒子外层指定高度是不会给撑开的，非标准的盒子会撑开，去掉头部的高度
logo层设置左浮动float：left；
banner层设置左浮动float：left；并且外边距设置10像素隔开
工具层设置右浮动float：right；
导航层设置左浮动
兼容：非IE浏览器出现不在一个层的情况，把所有层设置成浮动，对于间隙层，单设置浮动会往上走，所以不挨着浮动块，clear：both；
 删掉头部的颜色
body体内设置两个层，左侧层，右侧层
左侧层宽度750像素，高度600像素，背景颜色，左侧浮动
右侧层宽度200像素，高度600像素，背景颜色，右侧浮动

在左侧层里设置左右两层，小左层，小右层 。
左层的选择器定义的是id，#left，小左层选择器定义的是class，.left，在左层的附近定义小左层 ，#left .left
在定义两个层，一共四个层，中间设置间隙div布局。
去掉body的背景颜色和高度。

logo位置换成图片
html里加入<img>
csss设置图片边框为0，内边距，外边距都为0.
去掉logo层的颜色
调整图片的外边距或者logo层的内边距，让图片居中
调整图片的大小和边距给图片加格样式。

在导航栏里加列表
列表清空一下外边距，内边距和列表的样式，margin：0；padding：0；list-style：none；
列表设置左侧浮动，列表的文字居中，设置文字的行高
加小竖条，宽度和高度自定义，IE高度小于18像素，使用overflow：hidden，隐藏起来，调整位置

内容层里加两个层
上边标题层，下边内容层。
上下层的宽度设置100%适应内容层的宽度，高度设置26像素，设置边框实线，删掉内容层里的高度和背景颜色，
兼容：设置边框线后，iE浏览正常，非IE浏览时候，增加1像素的边框线。所以格外设置一个样式，用来存贮新的宽度，
在上边层 加个类名class=“tit kuan1” 下边层加一个类名class=“nei kuan2”
kuai1样式：width：298 ！important； width：300px； 

上边标题层删除背景颜色换成背景图片
在html里写入标题<h3>
样式里给h3清空样式
给h3加新样式，水平居中
给某个层里html标记的时候可以使用层里的类名加上html标记，表名只给这个层里的这个html标记样式，不影响其他层里同样html标记的样式。
图片大小和层的大小不合适的时候可以通过background-position和background-size来定义。