为什么80%的码农都做不了架构师？>>> 
6.布局代码
<html>
<head>
<title>CSS定位演示</title>
<style type="text/css">
div{
height:120px;
width:100px;
}
#img1{
background:url("../img/img01.png");
}
#img2{
background:url("../img/img02.png");
}
#img3{
background:url("../img/img03.png");
}
/* 开发经验:background中的图片会放在缓存中,第二次访问不会再请求
一般用来设置不变的图片,注入轮播等随时变化的图片用img */
</style>
</head>
<body>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</body>
</html>
8.浮动
<html>
<head>
<title>CSS定位演示</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#nav{
margin:50px;
width:1000px;
border:1px solid #999;
}
#nav ul{
list-style:none;
}
#nav ul li{
border:1px solid red;
width:120px;
/* float:right; */
float:left;
/*当设置了float:left之后,里面的元素会自动从左向右排列对齐,
(此时对于一些用来做列表导航操作的需求很有帮助),特别注意:如果外层标签
的宽度不能满足进行float的标签的宽度,会自动换行,设置float:left
之后,IE标签依然占有空间,非IE无此状况 */
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><span>返回首页</span></li>
<li><span>摇滚音乐</span></li>
<li><span>另类电影</span></li>
<li><span>联系我们</span></li>
<li><span>网站导航</span></li>
<li><span>网站帮助</span></li>
</ul>
</div>
</body>
</html>