目录
前言
CSS的定位机制
文档流定位
元素类型
浮动定位
float属性
float的用处
float的特点
clear属性
层定位
position属性
fixed固定定位
相对定位：relative
绝对定位：absolute
relative+absolute
课后练习
网页标题：CSS背景样式的应用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS背景样式的应用</title>
<style>
body{
background-color:#fd8e47;
}
#box{
width:400px;
height:300px;
border:6px dashed #0000FF;
background-image:url(images/fm.jpg);
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
网页标题：背景图像的应用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景图像的应用</title>
<style>
body{
background-color:#ffcc66;
background-image:url(images/butterfly.gif);
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
h1{
width:800px;
background-color:#fc9804;
color:#900;
text-align:center;
margin:10px auto;
}
p{
width:800px;
margin:10px auto;
}
</style>
</head>
<body>
<h1>背景图像的应用</h1>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
<p>Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque. Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.</p>
</body>
</html>
网页标题：炫彩网站Logo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>炫彩网站Logo</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1>
<span class="one">缤</span><span class="two">纷</span><span class="three">夏</span><span class="four">衣</span>
</h1>
</body>
</html>
style2.css
@charset "utf-8";
/* CSS Document */
h1{
width:250px;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
color:#369;
padding-bottom:4px;
letter-spacing:12px;
border-bottom:2px solid #ccc;
background-image:url(images/3.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
.one{color:#B3EE3A;}
.two{color:#71C671; }
.three{color:#00F5FF;}
.four{color:#00EE00;}
网页标题：鼠标悬停效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停效果</title>
<link rel="stylesheet" href="CSS/style3.css">
</head>
<body>
<h2>神奇的CSS</h2>
<div id="box">
<p>学习<em>CSS</em>的最好办法就是不断的练习、不断的思考、不断的再练习。对于刚刚接触<em>CSS</em>的读者，面对满篇的代码肯定显得无从下手。</p>
<p>这里给读者一些工作经验，希望能够帮助读者提高编写代码的能力：掌握(X)HTML代码中每个标签的含义；及时查阅<em>CSS</em>手册；多做<em>CSS</em>布局网站的练习；在网络中搜索并解决问题；分析、思考<em>CSS</em>布局网站的处理方式；善于总结经验。</p>
</div>
</body>
</html>
style3.css
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
h2{
font-family:"微软雅黑";
font-size:40px;
width:500px;
height:70px;
line-height:70px;
margin-top:10px;
background-color:#fc0;
text-align:center;
color:#fff;
}
#box{
border-top:5px double #f63;
padding:10px;
background-color:#ff9;
width:480px;
}
p{
text-indent:2em;
line-height:1.5em;
font-size:12px;
}
em{
font-size:20px;
color:#f00;
text-decoration:underline;
}
