【6】CSS布局属性及简单网页制作

一:布局属性

普通文档流：元素从上至下排列的顺序
脱离文档流：元素从正常的排列顺序被抽离
浮动：将元素移动到父元素最左和最右（可以将元素按着我们的意思进行排列）

float浮动：设置元素向哪个方向浮动
        Left:设置左浮动
        Right:右浮动
        None:不浮动

二：没有设置浮动的两个元素

代码如下:
.left{
    width:500px;
    height:300px;
    background:red;
}
.right{
    width:500px;
    height:400px;
    background:blue;
}

三：第一个元素设置左浮动时

代码如下:
.left{
    width:500px;
    height:300px;
    background:red;
    float:left;
}
.right{
    width:500px;
    height:400px;
    background:blue;
}

四：第一个元素设置右浮

代码如下:
.left{
    width:500px;
    height:300px;
    background:pink;
    float:right;
}
.right{
    width:500px;
    height:400px;
    background:green;
}

五：两个元素同时左浮动

代码如下:
.left{
    width:500px;
    height:300px;
    background:red;
    float:left;
}
.right{
    width:500px;
    height:400px;
    background:blue;
     float:left;
}

六：清除浮动

遇到问题：底部怎么跑上去了？

clear属性：清除浮动
常用属性值:
Both   设置同时清除全部浮动
Left:只清除左浮动
Right:只清楚右浮动

清除浮动效果图

代码如下:
.left{
    width:500px;
    height:300px;
    background:red;
    float:left;
}
.right{
    width:500px;
    height:400px;
    background:blue;
     float:right;
}
.clear{
    clear:both;
}

---

网页的基本结构

网页的头部
网页的导航
网页的banner
网页的主体
网页的脚部

网页中存在的基本部分

导航的制作
栏目标题的制作
文章列表或新闻列表
图片列表的制作（分上下形和左右形式的图片列表）

Html5新增结构元素：主体结构元素

新增属性	元素说明
article	标签规定独立的自包含内容
section	标签定义文档中的节
nav	标签定义导航链接的部分
aside	标签定义其所处内容之外的内容
time	标签定义公历的时间
header	标签定义文档的页眉
hgroup	用于对网页或区段的标题进行组合
footer	标签定义文档或节的页脚
address	标签定义文档或文章的作者