布局概述
(1)确定的页面的版心宽度
(2)分析页面中的模块
(3)控制网页的各个模块
布局常用属性
浮动：是指设置了浮动属性的标签会脱离标准文档流,(标准文档流是指内容元素排版布局过程中，会自动从左往右，从下往是进行流式排列)的控制移动到其父元素中指定位置的过程
选择器{float:属性值;}
left:标签向左浮动
right:标签向右浮动
none:标签不浮动(默认值)
清除浮动
由于浮动标签不再占用原文档流的位置，所以它会对页面中的其他标签的排版产生影响，在其他标签的选择器中使用
clear属性只能清除标签左右两侧浮动的影响
选择器{clear:属性值}
left:清除左侧浮动影响
right:清除右侧浮动影响
both:同时清除左右两侧浮动影响
(1)使用空标签清除浮动
在浮动标签之后添加空标签，并对该标签添加"clear:both"样式，可清除标签浮动所产生的影响，这个空标签可以是
等标签上述方法虽然可以清除浮动，但增加了毫无意义的结构标签，因此在实际生活中不建议使用
(2)使用overflow属性清除浮动
overflow:hidden;必须将该标签写在被影响的标签中
(3)使用after伪对象清除浮动
只适用于IE8及以上版本，和其他浏览器
注意：1.必须为需要清除浮动的标签伪对象设置"height:0"样式，否则该标签会比其实际高出若干像素2.必须在伪对象中设置content属性，属性值可以为空，如：“content:”"; "
标签的定位属性
定位属性选择器{position:属性值；}
常用属性值
static:自动定位（默认定位方式）
relative:相对定位，相对于原文档流的位置进行定位
absolute:绝对定位，相对于上一个已经定位的父标签进行定位
fixed:固定定位，相对于浏览器窗口进行定位
边偏移
常用属性值
top:顶部偏移量，定义标签相对于父标签上边线的距离
bottom:底部偏移量，定义标签相对于父标签下边线的距离
left:左部偏移量，定义标签相对于父标签左边线的距离
right:右部偏移量，定义标签相对于父标签右边线的距离
定位类型
(1)静态定位：各个标签在HTML文档流中默认的位置，所以当没有定义position属性时，并不是说明标签没有自己的位置，它会遵循默认值显示为静态变量，在静态定位状态下，无法通过边偏移属性改变标签的位置，但是它在文档流中的位置依然保存
(2)相对定位：标签相对与它在标准文档流中的位置进行定位，当positon属性的取值为relative时，可以将标签相对定位，对标签设置相对定位后，我们可以通过边偏移属性改变标签的位置，但是它在文档流中的位置仍然保留
(3)绝对定位
将标签根据最近的已经定位的父标签进行定位，若所有的父标签都没有定位，设置绝对定位的标签会依据body根标签(也可以看做浏览器窗口)进行定位，脱离了标准文档流，同时不在占用标准文档流的空间
补充：1，如果仅对标签设置绝对定位，不设置边偏移，则标签的位置不变，但该标签不再占用标准文档流中的空间，会与上移的后继标签重叠
2，定义多个边偏移属性时，如果left和right参数值冲突，以left参数为准，如果top和bottom参数值冲突，以ltop参数为准
（4)固定定位
以浏览器窗口为参照物定义网页标签，当positon属性的取值为fixed时，可以将标签固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
background: firebrick;
border: aqua 1px dashed;
overflow: hidden; /* 使用overflow属性清除浮动,对父标签使用 */
}
/*after伪类清除浮动*/
.father:after{
display: block;
clear: both;
content:"";
height:0;
visibility: hidden;
}
.box1,.box2,.box3{
height: 50px;
line-height: 50px;
border: #00FFFF 1px dashed;
padding: 15px;
margin: 10px;
float: left;
}
.box1{
background:forestgreen;
}
.box2{
background: darkblue;
}
.box3{
background: fuchsia;
}
/*空标签清除浮动*/
/* .box4{
clear;both;
} */
p{
background: salmon;
border: #00FFFF 1px dashed;
padding: 15px;
margin: 10px;
clear: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">
<!-- 空标签清除浮动 -->
</div>
<p>陪我长大的愿望，陪着我一起飞翔，陪着我一起到多远的地方，
我们没有故事了...............
世界盛大灿烂，欢迎回家
陪我长大的愿望，陪着我一起飞翔，陪着我一起到多远的地方
感谢吃过的苦，受过的伤，让会议更难忘，青春有快乐，也有悲伤，才是最好的模样
</p>
</div>
</body>
</html>
实现效果
布局类型
单列两列三列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0px;padding: 0px;text-align: center;font-size: 24px;}
/*所有模块的宽度为980px,居中显示*/
div{
width: 980px;
margin: 5px auto;
background:deepskyblue;
}
/*分别给每个模块设置高度*/
#top{height:40px;}
/* topbar为导航栏的通栏模式,始终平铺于浏览器窗口,将宽度设为100% */
#topbar{width: 100%;height:60px;background-color:forestgreen;}
#nav{height: 60px;}
#banner{height: 100px;}
#content{height: 200px;}
#content-l{
height: 195px;
width: 300px;
float: left;
background-color:aqua;
}
#content-c{
height: 195px;
width: 400px;
float: left;
margin: 5px;
background-color:aqua;
}
#content-r{
height: 195px;
width: 270px;
float: right;
background-color:aqua;
}
#bottom{
height: 50px;
}
/*footer为页面底部的通栏模式,始终平铺于浏览器窗口,将宽度设为100% */
#footer{width: 100%;height: 50px;background-color:forestgreen;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="topbar">
<div id="nav">导航</div>
</div>
<div id="banner">焦点图</div>
<div id="content">
<div id="content-l">内容左</div>
<div id="content-c">内容中</div>
<div id="content-r">内容右</div>
</div>
<div id="footer">
<div id="bottom">底部</div>
</div>
</body>
</html>
实现效果
全新的HTML5结构元素
①header标签：一种具有引导和导航作用的结构标签，该标签包含所有通常放在页面头部的内容，也可以包含网站logo图片、搜索单或者其他内容
②nav标签；用于定义导航链接，是HTML5新增的标签。可以用于传统导航条、侧边栏导航、页内导航、翻页导航，nav标签也可以用于其他导航链接组中，并不是所有的链接都要放在nav标签，只需要将主要的和基本的链接放进nav标签即可
③footer标签：用于定义一个页面或者区域的底部，可以包含所有放在页面底部的内容
④article标签：代表文档、页面或者应用程序中与上下文不相关的独立部分
⑤section标签：表示一段标题性的内容，一般会带有标题，主要应用在文章的章节中
section不仅仅是一个普通的容器标签，当只是为了样式化或者方便脚本使用时，应该使用div标签。
如果article标签、aside标签或者nav标签更符合使用条件，那么不要使用section标签
没有标题的内容模块不要使用section标签定义。
⑥aside标签：用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。主要用法为：
被包含在article标签内作为主要内容的附属信息
在article标签之外使用，作为页面或者网站的附属信息部分。最常用的使用形式是侧边栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h2>小杜的个人介绍</h2>
</header>
<p>小杜是一个有趣的人，是个美女</p>
<section>
<h2>评论</h2>
<article>
<h3>评论者：张</h3>
<p>小杜很nice</p>
</article>
<article>
<h3>评论者：冯</h3>
<p>小杜很perfect</p>
</article>
</section>
</article>
</body>
</html>
课后案例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{font-family: "楷体";font-size: 12px;color: #FFF;}
@font-face {
font-family:maobi;
src: url(dqc.ttf);
}
#div1{
width: 1500px;
height:350px;
margin: 13px auto ;
background:navy;
}
#one{
width: 700px;
height: 350px;
font-weight: 10px;
margin-left: 150px;
background: url(tupian/pic.gif);
float: left;
}
#p1{
top: 75px;
right: 45px;
text-align: right;
}
#yy{font-size: 14px;margin-top: 100px;padding-right: 50px;}
#mb{
font-family: maobi;font-size:35px;margin-top: 10px; border-right: #FFFFFF 5px solid;margin-right: 50px;
}
#gg{font-size:20px;padding-right: 50px;margin-top: -10px;}
#ul1{
margin-top:25px;
margin-left: 370px;
list-style-type: none;
}
ul#ul1 li{
margin-left: 10px;
float: left;
}
ul#ul1 a{
background: #FFF;
width: 46px;
height: 3px;
text-align: center;
line-height: 22px;
display: block;
font-size: 18px;
opacity: 0.3;
}
/* ul#ul1 li#a1 a{opacity: 0.8;} */
/*其不透明度有多种写法，使用后代选择器时，注意父标签与子标签的嵌套关系*/
#a1{background: #FFFFFF;}
#two{
width: 400px;
height:350px;
margin-left: 820px;
background:skyblue;
}
h4{padding-top:50px;}
#ul2{margin-top:10px;list-style-type: none;margin-left: -50px;}
ul#ul2 li{
margin-left: 12px;
float: left;
}
#p2{font-size: 15px;margin-left:50px;padding-top:1px; }
div#p2 p{margin-top: 55px;margin-right: 30px;line-height: 24px;}
</style>
</head>
<body>
<div id="div1">
<div id="one">
<div id="p1">
<p id="yy">YOUDIANSHEJI</p>
<p id="mb">有点设计</p>
<p id="gg">以就业为导向<br>打造理论与实践相结合的实战性人才</p>
<ul id="ul1">
<li id="a1"><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
</ul>
</div>
</div>
<div id="two">
<div id="p2">
<h4>课程介绍<br>INTRODUCTLON</h4>
<ul id="ul2">
<li><a href="#"><input type="image" src="tupian/icon1.gif" /></a></li>
<li><a href="#"><input type="image" src="tupian/icon2.gif" /></a></li>
<li><a href="#"><input type="image" src="tupian/icon3.gif" /></a></li>
<li><a href="#"><input type="image" src="tupian/icon4.gif" /></a></li><br>
</ul>
<p>掌握平面设计，网页设计，UI设计，FLASH设计四门主流技术，让你有点设计</p>
</div>
</div>
</div>
</body>
</html>
实现效果图
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
