Web前端培训布局属性及应用及新增HTML5标签上

育知同创官网：Web前端培训 布局属性及应用及新增HTML5标签（上）我们已经学了这么久，不知道大家对于HTML标签及属性有没有初步的认识了呢，我们现在是不是特别想做一个自己的网页呢？这一部分我们给大家讲完CSS中的布局属性就可以完成一个简单的网页了。下面我们开始讲解吧！1、 文档流2、 布局属性3、 页面结构4、 页面布局5、 HTML5新增标签6、 页面制作首先我们先了解一下什么是文档流。一、 文档流文档流分为普通文档流和脱离文档流。普通文档流：元素从上至下排列的顺序。脱离文档流：元素从正常的排列顺序被抽离。我们先来看一下普通文档流，看一下标签是怎样在浏览器中的显示排列的。代码：普通文档流 HELLO我是段落标签我是span 标签育知同创官网：显示效果：我们看到这就是普通文档流，那个标签先写的，就在浏览器的最开始位置显示，后写的标签，就在后面依次显示。那脱离文档流就是让标签通过某种CSS属性，让其不是依次显示在后面，而是按照我们的意思在浏览器中显示。那这种脱离文档流的方式有几种呢？一种就是使用布局属性的浮动属性（float），一种就是定位属性（ position）。今天我们重点给大家讲解的就是布局属性。二、 布局属性（float 浮动）布局属性属性 描述float设置元素向哪个方向浮动。属性值为: Left：设置左浮动 Right: 设置右浮动 None: 不浮动clear清除浮动 属性值为: Both 设置同时清除全部浮动 Left:只清除左浮动 Right:只清楚右浮动首先我们先看一下float的使用。1. 没有设置浮动的两个元素，也就是正常的文档流。代码：育知同创官网：显示效果：无浮动 divwidth:500px;height:100px;color: white;.leftbackground:red;.rightbackground:blue;height:200px;leftright育知同创官网：2. 设置第一个元素左浮动。代码：第一个元素左浮动 divwidth:500px;height:100px;color: white;.leftbackground:red;float: left;.rightbackground:blue;height:200px;育知同创官网：leftright显示效果设置了第一个元素左浮动后，就会改变了元素的排列顺序了，left的这个元素就浮动了最上层，他的空间就被right这个元素占领了。大家很明显的看到了right的这个元素的高度由原来的200像素变成了100像素，其中有100 像素是在left这个元素的下面了。这种情况一般应用在以下场景。育知同创官网：图文混排的地方网页中的图文混排的地方。代码:第一个元素左浮动 imgfloat: left;margin-right: 10px;pline-height: 24px;七星瓢虫是鞘翅目瓢虫科的捕食性昆虫，它的身体像半个圆球，头黑黑的翅膀是橘色的。育知同创官网：触角很短，不太明显，他的脚在大大的翅膀底下，他的口器既有咀嚼食物的能力，因为它的翅膀有七个黑色的圆点点所以人们叫它七星瓢虫 ，七星瓢虫为益虫，成虫可捕食麦蚜、棉蚜、槐蚜、桃蚜、介壳虫、壁虱等害虫，可大大减轻树木、瓜果及各种农作物遭受害虫的损害，被人们称为“活农药” ，在我国各地广泛分布。在华北南部，俗称“花大姐”。其他的星瓢虫一生要经过卵、幼虫、蛹和成虫 4个不同发育阶段。人工饲养七星瓢虫的成虫，室内的温度要控制在2025 之间，相对湿度在70%80%，成虫产卵时要求温度较高，可在25饲养。但饲养幼虫以平均温度20左右为好。显示效果：3. 第一个元素设置右浮动时代码：第一个元素右浮动 divwidth:500px;height:100px;color: white;育知同创官网：.leftbackground:red;float: right;.rightbackground:blue;height:200px;leftright显示效果：大家看，设置了一个元素右浮动时，left这个元素就漂浮在了右侧，而他的位置被right这个元素占领了。这种情况应用在以下场景。育知同创官网：文字右侧显示文字显示在右侧。这种情况通常使用一个元素右浮动。第一个元素右浮动 *margin: 0;padding: 0;bodyfont-family: “微软雅黑 “;h3height: 35px;line-height: 35px;background: yellow;text-indent: 2em;h3 a育知同创官网：float: right;font-weight: normal;font-size: 12px;margin-right: 10px;ullist-style: none;margin-top: 15px;liline-height: 28px;background: url(img/icon_1.png) no-repeat 10px center;text-indent: 2em;li spanfloat: right;margin-right: 10px;更多栏目标题 2016-10-2绿色生产方式，增强农业可持续发展能力.2016-11-3给侧结构性改革，要在确保国家粮食安全的基础上，紧紧围绕.2016-12-5推进农业供给