css複雜的列表布局

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複雜的列表布局是我最為頭痛的。往往在測試時會亂得不堪入目，而且不能相容IE和FireFox。這個問題困擾了我幾個晚上，今天終於搞定了。在IE和FireFox中測試幾乎一模一樣。
源碼下載：

先看：這是模仿閃客帝國的作品熱門排行榜。

實現代碼：程式碼<!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>步步為營，實戰div+css系列教程--chaojibaby.com--</title>
</head>
<style tpye="text/css">
<!--
a{color:#349DEF;text-decoration:none;}
a:hover{color:#F1B246;text-decoration: underline}
h2 a {color:#ff0000;}
.t1 h1{color:#ff0000;}

#paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
[xmlns] #paihang{height:300px;width:230px;} /*此處運用了css hack技術：對象前加[xmlns]只被非IE瀏覽器識別*/
.tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
.tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
.more{float:right;padding:1px;}

#top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*對於ul對象，一定要設定寬度*/
#top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此處類前不能加li,否則不正常，涉及到列表與div的關係*/
#top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
#top10 h2{font-size:12px;}
#top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
#top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
#top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
#top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
#top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
#top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
-->
</style>
<body>
<div id="paihang">

    <div class="title">
        <span class="tit_bg"><img src="tit_bg.gif" /></span>
        <span class="tit_txt">中國娛樂熱門排行榜</span>
        <span class="more"><img src="tit_more.gif" alt="瀏覽更多資訊" longdesc="#" /></span>
    </div>
    <div id="top10">
            <li class="t1">
            <div class="topimg"><img src="t1_img.gif" alt="孫燕姿" longdesc="#" /></div>
            <h1><a href="#">明天我就要嫁給你了</a></h1>
            <h2><a href="http://www.chaojibaby.com/">歌手：超級寶貝</a></h2>
            <h3>1267</h3>
             </li>
            <li class="t2">
            <h1><a href="#">十年</a></h1>
            <h3>847</h3>
            </li>
            <li class="t3">
            <h1><a href="#">蘭花草</a></h1>
            <h3>634</h3>
            </li>
            <li class="t4">
            <h1><a href="#">海浪（女生版）</a></h1>
            <h3>598</h3>
            </li>
            <li class="t4">
            <h1><a href="#">親愛的你在哪裡</a></h1>
            <h3>548</h3>
            </li>
            <li class="t4">
            <h1><a href="#">信仰（真情版）</a></h1>
            <h3>439</h3>
            </li>
            <li class="t4">
            <h1><a href="#">紅豆8過火</a></h1>
            <h3>324</h3>
            </li>
            <li class="t4">
            <h1><a href="#">相親相愛--九天</a></h1>
            <h3>287</h3>
            </li>
            <li class="t4">
            <h1><a href="#">愛你一萬年</a></h1>
            <h3>156</h3>
            </li>
            <li class="t4">
            <h1><a href="#">親愛的你在哪裡</a></h1>
            <h3>67</h3>
            </li>
    </div>
</div>
</body>
</html>

注意：
1、如果在測試寫代碼時DW展示出來的比較亂，大多原因是對象的屬性沒有寫全，比如沒有寬度高度的設定，沒有右浮動等。這在列表布局中尤其重要。
2、此處使用了css hack技術，以解決瀏覽不相容問題。如在對象前加頂極選擇符[xmlns]，只被非IE瀏覽器識別。當然前提是html標籤已經加上了xmlns屬性：
<html xmlns="http://www.w3.org/1999/xhtml">
當然還有其它方法來實現，我們放在以後的教程中陸續講解。
3、#top10 li.t1 h1{}而不是#top10 li .t1 h1{}，中間空一下，表示的是對象的上下級關係。而t1是作為類出現的，li.t1 h1表示類為ti的列表下的h1子物件。
4、幾個對象想在同行顯示的話，可用span選擇符，span選擇符也可以重複嵌套。如果並非在同行顯示的話，盡量不要用span選擇符，這時的div選擇符就派上了用場。因為之前我們也說過，這兩種選擇符預設的顯示方式分別為：行間內聯和塊狀顯示。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More