html - 列出 HTML/CSS 设计方法

Question

<分区>

Answer 1

参见 http://jsfiddle.net/X9Nch/1/

HTML:

<ol id="list">
 <li><ul><li>Text 1</li><li>Sub 1</li></ul></li>
 <li><ul><li>Text 2</li><li>Sub 2</li></ul></li>
 <li><ul><li>Text 3</li><li>Sub 3</li></ul></li>
 <li><ul><li>Text 4</li><li>Sub 4</li></ul></li>
 <li><ul><li>Text 5</li><li>Sub 5</li></ul></li>
</ol>

CSS:

#list{
    background:black;
    color:white;
}
#list>li{
    list-style:decimal inside none;
    font-weight:bold;
    line-height:75px;
    height:75px;
    padding-left:20px;
    font-size:300%;
}
#list>li:nth-child(even){
    padding-left:50px;
}
#list>li>ul{
    font-weight:normal;
    vertical-align:middle;
    display:inline-block;
    font-size:medium;
    list-style:none;
    margin:0;
    padding:0;
}

#list>li>ul>li{
    display:block;
    line-height:normal;
    color:#aaa;
    margin-left:5px;
    padding:0;
}

#list>li>ul>li:first-child{
    font-size:200%;
    color:white;
    margin-left:0;
}