如何使用CSS 浮动
1、定义图像浮动于文章的左面。
<style type="text/css">
img
{
float:left
}
</style>
2、让一个有着边框与边界的图像浮动于文章的左面。
<style type="text/css">
img
{
float:left;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
3、定义一个标题图像，并让其出现在文章的右面。
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
<body>
<div>
<img src="/i/e.gif" /><br />
CSS is fun!
</div>
4、定义文章的首字母进行一个侧边的浮动。
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
5、利用浮动代码与链接代码再结合表格做一个导航条。
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
6、利用浮动代码创建一个完整的页面效果。在这个网页当中，我有了完整的页面。
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
