初学者瞬间入门复杂div+css布局，抛弃float！[兼容IE6，IE7，FireFox]
日期：2014-05-17 浏览次数：20616 次
菜鸟瞬间入门复杂div+css布局，抛弃float！[兼容IE6，IE7，FireFox]
年底了，工作也越来越忙了。。。有时候真觉得烦。。。。做一个div+css站的首页，包括画图到切割，老板只给短短的两天。。。没办法，讨口饭吃艰难啊。。。。。
接触div+css也不少时间了，总是在想怎么不用动脑子也能写出简单而又实用的代码。。在网上看过不少教程，但鱼龙混杂，看着就烦，还不如动手自己摸索。。。我发现好多刚入门的xdjm们总是在问怎么兼容浏览器啊，float怎么总是乱啦，排版好难啊。想起我刚入门时的头疼情况，我决定把我的看家本领拿出来给大家分享一下，事先声明：我不是高手，所以以下教程只适合头疼的菜鸟看，老鸟们就不要笑话我了，有什么不足的地方，欢迎回贴共同探讨！
这个例子最大的特点就是没有用到float就能解决复杂的布局问题，只用到了position。一句话，最外面的div用的是position:relative;里面的div用position:absolute;再配合top,left,bottom,right来定位， 就基本上解决了所有的问题了！很简单吧！
先看图：
下面是源文件，为了好比较，我把大部分的css写在了div里面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size: 12px;
color: #666666;
text-align:center;
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
color: #999999;
}
</style>
</head>
<body>
<div style="width:600px; height:500px; margin:10px auto; text-align:left; border:#CCCCCC dashed 1px; position:relative;">
<div style="width:200px; height:200px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:10px;">
<div style="height:25px; background-color:#EEEEEE;">
<p style="position:absolute;top:6px; left:10px;">标题一</p>
<p style="position:absolute;top:10px; right:10px;"><a href="#">more</a></p>
</div>
<ul style=" list-style:none;line-height:26px; position:absolute; top:35px; left:10px;">
<li><a href="#">1.我是文章的题目我是文章的题目</a></li>
<li><a href="#">2.我是文章的题目我是文章的题目</a></li>
<li><a href="#">3.我是文章的题目我是文章的题目</a></li>
<li><a href="#">4.我是文章的题目我是文章的题目</a></li>
<li><a href="#">5.我是文章的题目我是文章的题目</a></li>
<li><a href="#">6.我是文章的题目我是文章的题目</a></li>
</ul>
</div>
<div style="width:200px; height:50px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:220px;"><a href="#"><img src="http://www.baidu.com/img/logo.gif" height="50px" width="200px" border="0px" /></a></div>
<div style="width:200px; height:250px;border:#CCCCCC dashed 1px; position:absolute; top:70px;; left:220px;"></div>
<div style="width:150px; height:200px; border:#CCCCCC dashed 1px; position:absolute; top:10px; ; left:437px;"></div>
<div style="width:200px; height:269px; border:#CCCCCC dashed 1px; position:absolute; top:222px; ; left:10px;"></div>
<div style="width:367px; height:50px; border:#CCCCCC dashed 1px; position:absolute; top:333px; ; left:221px;"></div>
<div style="width:150px; height:96px; border:#CCCCCC dashed 1px; pos
年底了，工作也越来越忙了。。。有时候真觉得烦。。。。做一个div+css站的首页，包括画图到切割，老板只给短短的两天。。。没办法，讨口饭吃艰难啊。。。。。
接触div+css也不少时间了，总是在想怎么不用动脑子也能写出简单而又实用的代码。。在网上看过不少教程，但鱼龙混杂，看着就烦，还不如动手自己摸索。。。我发现好多刚入门的xdjm们总是在问怎么兼容浏览器啊，float怎么总是乱啦，排版好难啊。想起我刚入门时的头疼情况，我决定把我的看家本领拿出来给大家分享一下，事先声明：我不是高手，所以以下教程只适合头疼的菜鸟看，老鸟们就不要笑话我了，有什么不足的地方，欢迎回贴共同探讨！
这个例子最大的特点就是没有用到float就能解决复杂的布局问题，只用到了position。一句话，最外面的div用的是position:relative;里面的div用position:absolute;再配合top,left,bottom,right来定位， 就基本上解决了所有的问题了！很简单吧！
先看图：
下面是源文件，为了好比较，我把大部分的css写在了div里面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size: 12px;
color: #666666;
text-align:center;
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #999999;
}
a:active {
text-decoration: none;
color: #999999;
}
</style>
</head>
<body>
<div style="width:600px; height:500px; margin:10px auto; text-align:left; border:#CCCCCC dashed 1px; position:relative;">
<div style="width:200px; height:200px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:10px;">
<div style="height:25px; background-color:#EEEEEE;">
<p style="position:absolute;top:6px; left:10px;">标题一</p>
<p style="position:absolute;top:10px; right:10px;"><a href="#">more</a></p>
</div>
<ul style=" list-style:none;line-height:26px; position:absolute; top:35px; left:10px;">
<li><a href="#">1.我是文章的题目我是文章的题目</a></li>
<li><a href="#">2.我是文章的题目我是文章的题目</a></li>
<li><a href="#">3.我是文章的题目我是文章的题目</a></li>
<li><a href="#">4.我是文章的题目我是文章的题目</a></li>
<li><a href="#">5.我是文章的题目我是文章的题目</a></li>
<li><a href="#">6.我是文章的题目我是文章的题目</a></li>
</ul>
</div>
<div style="width:200px; height:50px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:220px;"><a href="#"><img src="http://www.baidu.com/img/logo.gif" height="50px" width="200px" border="0px" /></a></div>
<div style="width:200px; height:250px;border:#CCCCCC dashed 1px; position:absolute; top:70px;; left:220px;"></div>
<div style="width:150px; height:200px; border:#CCCCCC dashed 1px; position:absolute; top:10px; ; left:437px;"></div>
<div style="width:200px; height:269px; border:#CCCCCC dashed 1px; position:absolute; top:222px; ; left:10px;"></div>
<div style="width:367px; height:50px; border:#CCCCCC dashed 1px; position:absolute; top:333px; ; left:221px;"></div>
<div style="width:150px; height:96px; border:#CCCCCC dashed 1px; pos
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
