【原创】网站底部竖线布局对比/研究

近几天做页面布局，发现底部的竖线不懂咋布，于是down了阿里巴巴、新浪、网易、百度音乐几个网站来研究。

 

<html>

<head>
    <title></title>
    <style type="text/css">
    *{ margin:0; padding:0;}
    ul,li{ list-style:none;}
    .wrap{ margin:0 auto; width:978px; padding-top:100px; border:1px solid #eee;}
    <!-- alibaba  1688.com -->
    .footer-ali-pages{ float:left; height: 46px;line-height: 46px;}
    .footer-ali-pages ul{display: inline;color: #999;}
    .footer-ali-pages ul li{float:left;display: inline;color: #999;}
    .footer-ali-pages ul li a{ color:#333; font-size:12px; text-decoration:none;}
    .footer-ali-pages ul li.separation{color: #e1e1e1; margin:0 5px;}
    <!-- www.sina.com.cn / www.163.com-->
    .ft-info{text-align: center;color: #939393;font-size: 12px;padding: 7px 0;margin-bottom: 10px;background: #F7F7F7;}
    .ft-info a{text-decoration: none;color: #75839D;font-size: 12px;}
    <!-- music.baidu.com -->
    .music-foot{ height:62px; position: relative;margin-top: 20px;padding: 20px 0;color: #999;border-top: 1px solid #e4e4e4;overflow: visible;}
    .music-foot a{color: #333;height: 21px;line-height: 21px;text-decoration: none;font: 12px/20px Arial;}
    .music-foot .module-line {display: inline-block;height:8px;width: 1px;margin: 0 7px;background: #999;vertical-align: middle;}
    .music-foot .ttplayer {margin: 0;padding: 0 0 0 20px;background: url("http://mu5.bdstatic.com/static/i/0M74qEo1.png") no-repeat -501px -151px;}
    .music-foot .foot-mobile {padding: 0 0 0 16px;background: url("http://mu5.bdstatic.com/static/i/0M74qEo1.png") no-repeat -507px -187px;}
    </style>
</head>
<body>
<div class="wrap">
<h1>alibaba  1688.com</h1>
    <div class="footer-ali-pages">
        <ul>
            <li>
                <a href="http://page.1688.com/shtml/about/ali_group1.shtml?spm=a260k.6644613.0.0&amp;file=ali_group1.shtml" title="关于阿里巴巴" target="_blank" rel="nofollow">关于阿里巴巴</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://114.1688.com/kf/contact.html?tracelog=kf_2012_budian_shouyeguide10" title="联系我们" target="_blank" rel="nofollow"> 联系我们 </a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://job.1688.com/" title="诚征英才" target="_blank" rel="nofollow">诚征英才</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://view.1688.com/cms/promotion/hyhz.html" title="欢迎合作" target="_blank" rel="nofollow">欢迎合作</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://page.1688.com/trust/Intellectual.html" title="知识产权侵权投诉" target="_blank" rel="nofollow">知识产权</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://page.1688.com/fuwutiaokuan/01.html" title="著作权与商标声明" target="_blank" rel="nofollow">著作权与商标声明</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://page.1688.com/fuwutiaokuan/02.html" target="_blank" title="法律声明" rel="nofollow">法律声明</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://rule.1688.com/xize/19.html" target="_blank" title="服务条款" rel="nofollow">服务条款</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://page.1688.com/fuwutiaokuan/04.html" target="_blank" title="隐私声明" rel="nofollow">隐私声明</a>
            </li>
            <li class="separation">|</li>
            <li>
                <a href="http://page.1688.com/system/sitemap.html" title="网站地图" target="_blank">网站地图</a>
            </li>
        </ul>
    </div>
</div><!-- wrap end -->
<br/><br/><br/><br/>


<div class="wrap" style="width:978px; text-align:center;">
<h1>www.sina.com.cn / www.163.com</h1>
<div class="ft-info"><a href="http://corp.sina.com.cn/chn/">新浪简介</a> ┊ <a href="http://corp.sina.com.cn/eng/">About Sina</a> ┊ <a href="http://emarketing.sina.com.cn/">广告服务</a> ┊ <a href="http://www.sina.com.cn/contactus.html">联系我们</a> ┊ <a href="http://career.sina.com.cn/">诚聘英才</a> ┊ <a href="http://www.sina.com.cn/intro/lawfirm.shtml">网站律师</a> ┊ <a href="http://english.sina.com">SINA English</a> ┊ <a href="https://login.sina.com.cn/signup/signup.php">注册</a> ┊ <a href="http://help.sina.com.cn/">产品答疑</a></div>
</div><!-- wrap end -->
<br/><br/><br/><br/>


<div class="wrap" style=" height:62px;;">
<h1>music.baidu.com</h1>
<div class="music-foot" monkey="music-foot" alog-alias="music-foot">
      <a href="http://tousu.baidu.com/music/add" target="_blank" rel="nofollow">意见反馈</a>
      <i class="module-line"></i>
      <a target="_blank" href="/doc/help" rel="nofollow">帮助中心</a>
      <i class="module-line"></i>
      <a href="http://musicopen.baidu.com" target="_blank" rel="nofollow">资源合作开放平台</a>
      <i class="module-line"></i>
      <a href="http://y.baidu.com" target="_blank">原创音乐人</a>
      <i class="module-line"></i>
      <a href="http://ttplayer.qianqian.com/index.html" class="ttplayer" target="_blank">电脑版</a>
      <i class="module-line"></i>
      <a href="http://music.baidu.com/mobile?fr=musicfoot" class="foot-mobile" target="_blank">手机版</a>
    </div>

</div><!-- wrap end -->
</body>
</html>

 下载地址：https://files.cnblogs.com/ishibin/footer_line.rar

posted @ 2013-08-20 01:02  ishibin  阅读(400)  评论(0)  编辑  收藏  举报