菜鸟瞬间入门复杂div+css布局，抛弃float！[兼容IE6，IE7，FireFox]

huangyunbin

浏览: 2567159 次
性别:
来自: 广州

最近访客更多访客>>

cht的大摩托

xiaoxiaoHer

zzqfsy

为了ta

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS Firefox 笑话浏览器 XHTML

年底了，工作也越来越忙了。。。有时候真觉得烦。。。。做一个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; position:absolute; top:224px; ; left:437px;"></div>
<div style="width:136px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:394px; ; left:221px;"></div>
<div style="width:136px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:393px; ; left:369px;"></div>
<div style="width:73px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:392px; ; left:515px;"></div>
</div>
</body>
</html>

######################################################

分享到：