爱奇思

学习就是——从糊涂中慢慢走向清醒,然后再从清醒中慢慢走向糊涂,所以说我说它是一个O,只是圆的半径慢慢的扩大罢了!
posts - 60, comments - 128, trackbacks - 0, articles - 8
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
虽然我是做后台的,但有时候难免要做些前台,最常设计的模块布局,如下图

原来我们用table布局时,不用说都很简单
但随着web2.0的到来,采用css布局,用不好还比较麻烦,一直以来,我都用浮动来定位那个“更多”的span ,这样有好多问题  浏览器兼容也众口难调
结构如下:
<div class="block">
<ul>
<li><h4>标题<h4><span class="more">更多<span><li>
</ul>
<div class="content">内容</div>
</div>

今天在开老外的一个站点的源代码时  发现了一个最佳解决方案
结构代码如下:

        <div class="box">
          
<h4>标题</h4>
          
<dl class="title">
            
<dd>更多</dd>
          
</dl>
          
<div class="content">
          内容
          
</div>
        
</div>
css代码:
1     *{ margin:0; padding:0;}
2     .box{width:200px;position:relative;}
3     .box h4{height:26px; background:#f00; line-height:25px;}
4     .title{position:absolute; top:1px;  right:3px;line-height:25px;}
5     .content{border:1px solid #CCDFF2;overflow:hidden;}

注意 *{ margin:0; padding:0;}是必须的  还有就是box的position:relative;是必须的  不然当你绝对定位“更多”时会出问题 
这样  我们要建这样的小模块  就很爽了  只要复制  修改  ,还可以在h4上用漂亮的背景图
好了附图我美化过的;

还不错吧???