无懈可击的Web设计--巧妙的浮动

1、img标签，在IE下默认有一个2px蓝色的border，但是在firefox下却没有，所以要设定 border:0;

2、浮动清楚，推荐阅读：http://www.complexspiral.com/publications/containing-floats/

　　让我们来看一下实现自清楚的三种方法：

　　A.设置float来解决浮动中的问题。次方法通常依赖于页面上容器后面所跟随的对象，但这个可以跨浏览器的方法易于实现。

　　B.使用overflow属性的“简单清除浮动法”，次方法可能是最简单的方法了，但可能会产生副作用。SitePoint上对它有详细介绍：

　　　　http://www.sitepoint.com/simple-clearing-of-floats/  

　　C.使用内容生成的“简单清除法”   http://positioniseverything.net/easyclearing.html

3、IE6双边距的问题：

　　当为浮动对象添加一个左侧或者右侧的边距时，IE6就会有一个不正确的举动，它会双倍处理与浮动方向相同的那一侧边距

　　如下图：

   IE6下：

正常情况：

    

 

　　推荐： http://positioniseverything.net/explorer/doubled-margin.html

　　解决办法：  对浮动对象增加规则  display:inline;这个时候IE6就能正确显示边距了。

 

    实践代码如下：

 

View Code 
<!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=utf-8" />
        <title>无标题文档</title>
 
         <style type="text/css">
             body,div,ul,li,p,a,img,dd,dl,dt{
                 margin:0;
                 padding:0;
             }
             body{
                 font-family:微软雅黑,"Microsoft YaHei",Helvetica,Arial;
                 font-size:1em;
                 text-align:center;
         
             }
            img{
                border: 0;
            }
            #sina{
                position:absolute;
                float:left;
                margin-left:-250px;
                left:50%;
                top:0;
                padding:10px 0;
                width:500px;
                border: 2px solid #C8CDD2;
            }
            
            #sina dl{
                float:left;
                margin:10px 20px;
                display:inline;
            }
            
            #sina dt{
                float:right;
                width:260px;
                font-size:130%;
                letter-spacing: 1px;
                text-align:left;
                color:#627081;
            }
            
            #sina dd{
                font-size:85%;
                line-height:1.5em;
                color:#666;
                text-align: left;
            }
            
            .img img{
                float:left;
                margin:0 8px 0 0;
                padding:4px;
                border: 1px solid #D9E0E6;
                border-bottom-color:#C8CDD2;
                border-right-color:#C8CDD2;
                background: #fff;
            }
            
            #sina .alt dt{
                float:left;
            }
            
            #sina .alt img{
                float:right;
                margin:0 0 0 8px;
            }
         </style>
    </head>
    <body>
        <div id="sina">
            <dl>
                <dt>海螺一枚</dt>
                <dd class="img"> <a href="http://weibo.com/csimple"><img src="ccg.jpg" alt="ccg" /></a></dd>
                <dd>细水长流~@小小纳爱斯 生日快乐[蛋糕]希望以后你的每一个生日我都陪你过</dd>
            </dl>
            <dl class="alt">
                <dt>我不是小朱朱</dt>
                <dd class="img"><a href="http://weibo.com/u/1738691932"> <img src="zjn.jpg" alt="zjn" /></a></dd>
                <dd>我要快乐。刚刚传照片，发现我好像拍到亲吻的情侣了[阴险] 不好意思咯，不过还是挺浪漫的，祝你们有情人终成眷属~ [喜]</dd>
            </dl>
            <dl >
                <dt>小小纳爱斯</dt>
                <dd class="img"><a href="http://weibo.com/u/1626950820"> <img src="xxnas.jpg" alt="xxnas" /></a></dd>
                <dd>  做一个内心温暖的人。等得我花儿都谢了…三面都过了，还要来个神马综合评审，评审人还不知道干嘛去了[泪][泪][泪]折磨死了，明天我就该干嘛干嘛去，不等了。</dd>
            </dl>
        </div>

    </body>
</html>

 

 

posted @ 2012-05-10 16:39  纳爱斯  阅读(248)  评论(0)  编辑  收藏  举报