近几天做页面布局，发现底部的竖线不懂咋布，于是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&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="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>
下载地址：http://files.cnblogs.com/ishibin/footer_line.rar