chapter08

example01

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的浮动</title>
<style type="text/css">
.father{
	background: #eee;
	border: 1px dashed #999;
}
.box01,.box02,.box03{
	height: 50px;
	line-height: 50px;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
}
.box01{ background: #FF9; }
.box02{ background: #FC6; }
.box03{ background: #F90; }
p{
	background: #ccf;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
}
</style>
</head>
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
	<p>今天在大学校园里看到的精彩一幕，一个男生在湖边和一个女生表白，那个女生说，你跳下去我就答应，那个男生果断跳下去了，游上来以后满身泥，女的拿纸巾过来要给这个男生擦，这个男生躲开了，说了一句特别“汉纸”的话：我跳下去是证明我曾经真的喜欢你，但是现在我对你这种人已经没有任何兴趣了。</p>
</div>
</body>
</html>

example02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.father{
	background: #eee;
	border: 1px dashed #999;
}
.box01,.box02,.box03{
	height: 50px;
	line-height: 50px;
	background: #f9c;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
	float: left;
}
</style>
</head>
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
</div>
</body>
</html>

example03

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空标签清除浮动</title>
<style type="text/css">
.father{
	background: #ccc;
	border: 1px dashed #999;
}
.box01,.box02,.box03{
	height: 50px;
	line-height: 50px;
	background: #f9c;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
	float: left;
}
.box04{ clear: both; }
</style>
</head>
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
	<div class="box04"></div>
</div>
</body>
</html>

example04

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow属性清除浮动</title>
<style type="text/css">
.father{
	background: #ccc;
	border: 1px dashed #999;
	overflow: hidden;
}
.box01,.box02,.box03{
	height: 50px;
	line-height: 50px;
	background: #f9c;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
	float: left;
}
</style>
</head>
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
</div>	
</body>
</html>

example05

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用after伪对象清除浮动</title>
<style type="text/css">
.father{
	background: #ccc;
	border: 1px dashed #999;
}
.father:after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
.box01,.box02,.box03{
	height: 50px;
	line-height: 50px;
	background: #f9c;
	border: 1px dashed #999;
	margin: 15px;
	padding: 0px 10px;
	float: left;
}
</style>
</head>
<body>
<div class="father">
	<div class="box01">box01</div>
	<div class="box02">box02</div>
	<div class="box03">box03</div>
</div>	
</body>
</html>

example06

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的定位</title>
<style type="text/css">
body{ margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; }
.father{
	margin: 10px auto;
	width: 300px;
	height: 300px;
	padding: 10px;
	background: #ccc;
	border: 1px solid #000;
}
.child01,.child02,.child03{
	width: 100px;
	height: 50px;
	line-height: 50px;
	background: #ff0;
	border: 1px solid #000;
	margin: 10px 0px;
	text-align: center; 
}
.child02{
	position: relative;
	left: 150px;
	top: 100px;
}
</style>
</head>
<body>
<div class="father">
	<div class="child01">child-01</div>
	<div class="child02">child-02</div>
	<div class="child03">child-03</div>
</div>
</body>
</html>

example07

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子标签相对于直接父标签定位</title>
<style type="text/css">
body{ margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; }
.father{
	margin: 10px auto;
	width: 300px;
	height: 300px;
	padding: 10px;
	background: #ccc;
	border: 1px solid #000;
	position: relative;
}
.child01,.child02,.child03{
	width: 100px;
	height: 50px;
	line-height: 50px;
	background: #ff0;
	border: 1px solid #000;
	border-radius: 50px;
	margin: 10px 0px;
	text-align: center; 
}
.child02{
	position: absolute;
	left: 150px;
	top: 100px;
}
</style>
</head>
<body>
<div class="father">
	<div class="child01">child-01</div>
	<div class="child02">child-02</div>
	<div class="child03">child-03</div>
</div>
</body>
</html>

example08

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow属性</title>
<style type="text/css">
div{
	width: 260px;
	height: 176px;
	background: url(images/bg.png) center center no-repeat;
	overflow: visible;
}
</style>
</head>
<body>
<div>
晨曦浮动着诗意，流水倾泻着悠然。大自然本就是我的乐土。我曾经迷路，被纷扰的世俗淋湿而模糊了双眼。归去来兮！我回归恬淡，每一日便都是晴天。晨曦，从阳光中飘洒而来，唤醒了冬夜的静美和沉睡的花草林木，鸟儿出巢，双双对对唱起欢乐的恋歌，脆声入耳漾心，滑过树梢回荡在闽江两岸。婆娑的垂柳，在晨风中轻舞，恰似你隐约在烟岚中，轻甩长发向我微笑莲步走来。栏杆外的梧桐树傲岸繁茂，紫燕穿梭其间，是不是因为有了凤凰栖息之地呢？
</div>
</body>
</html>

example09

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列布局</title>
<style type="text/css">
body{ margin: 0; padding: 0;font-size: 24px;text-align: center; }
div{
	width: 980px;
	margin: 5px auto;
	background: #D2EBFF;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">页面底部</div>	
</body>
</html>

example10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style type="text/css">
body{margin: 0; padding: 0;font-size: 24px;text-align: center;}
div{
	width: 980px;
	margin: 5px auto;
	background: #D2EBFF;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.content_left{
	width: 350px;
	height: 200px;
	background-color: #CCC;
	float: left;
	margin: 0;
}
.content_right{
	width: 625px;
	height: 200px;
	background-color: #CCC;
	float: right;
	margin: 0;
}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
	<div class="content_left">内容左部分</div>
	<div class="content_right">内容右部分</div>
</div>
<div id="footer">页面底部</div>
</body>
</html>

example11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
body{margin: 0; padding: 0;font-size: 24px;text-align: center;}
div{
	width: 980px;
	margin: 5px auto;
	background: #D2EBFF;
}
#top{height: 40px;}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.content_left{
	width: 200px;
	height: 200px;
	background-color: #CCC;
	float: left;
	margin: 0;
}
.content_middle{
	width: 570px;
	height: 200px;
	background-color: #CCC;
	float: left;
	margin: 0 0 0 5px;
}
.content_right{
	width: 200px;
	height: 200px;
	background-color: #CCC;
	float: right;
	margin: 0;
}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
	<div class="content_left">内容左部分</div>
	<div class="content_middle">内容中间部分</div>
	<div class="content_right">内容右部分</div>
</div>
<div id="footer">页面底部</div>	
</body>
</html>

example12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通栏布局</title>
<style type="text/css">
body{ margin: 0; padding: 0;font-size: 24px;text-align: center; }
div{
	width: 980px;
	margin: 5px auto;
	background: #D2EBFF;
}
#top{height: 40px;}
#topbar{
	width: 100%;
	height: 60px;
	background-color: #3CF;
}
.nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.inner{height: 90px;}
#footer{
	width: 100%;
	height: 90px;
	background-color: #3CF;
}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="topbar">
	<div class="nav">导航栏</div>
</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">
	<div class="inner">页面底部</div>
</div>		
</body>
</html>