0

我想使用 html 和 css 实现以下目标。设计列表的最佳方法是什么。

4

3 回答 3

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;
}
于 2012-08-12T17:21:56.587 回答
0

这是一种方法（在 jsFiddle 中查看它：http://jsfiddle.net/Nw99Z/44/）：

HTML

<div id="box1">
    <span class="num">1</span>
    <h1>We Rule</h1>
    You don't know how much
</div>
<div id="box2">
    <span class="num">2</span>
    <h1>We Super Rule</h1>
    You don't know how much
</div>
<div id="box3">
    <span class="num">3</span>
    <h1>We Are Insanely Awesome</h1>
    You don't even undestand
</div>
<div id="box4">
    <span class="num">4</span>
    <h1>Yes, It's True</h1>
    Yep, it's true
</div>
<div id="box5">
    <span class="num">5</span>
    <h1>I'm Still Talking</h1>
    Yep, I am
</div>

​

CSS

body {
    background-color: #0e1013;
    font-family: Helvetica, Arial, sans-serif;
}
div {
    background-color: #414141;
    color: #ababab;
    padding: 16px 0 16px 100px;
    margin: 16px 0 16px 32px;
}
div span.num {
    color: #fff;
    font-size: 56px;
    font-weight: bold;
    display: block;
    margin-left: -116px;
    position: absolute;
}
div h1 {
    font-size: 38px;
    color: #fff;
}

div#box1 { width: 370px }
div#box2 { margin-left: 100px; width: 440px }
div#box3 { width: 700px }
div#box4 { margin-left: 160px; width: 460px }
div#box5 { width: 430px }

​</p>

结果

结果截图

于 2012-08-12T17:53:49.157 回答
0

你应该去嵌套列表：

<ul class="list">
    <li>1
        <ul>
            <li>2</li>
        </ul>
    </li>
    <li>2</li>
</ul>

然后你会使用类似这样的 CSS：

/* styles the whole list */
ul.list { }
/* styles 1st level items */
ul.list > li {}

/* styles 2nd level list */
ul.list ul { }

/* styles 2nd level items */
ul.list ul > li { }

您可以将 a 添加margin-left到二级列表，也可以为所有列表指定默认边距：

ul { margin-left:10px }

然后所有嵌套列表将继承父级的边距，加上它自己的边距，这也将创建您指定的布局。

PS：不要忘记添加其余的 CSS（背景、颜色等）..

编辑：一个例子：http: //jsfiddle.net/JTtHY/

于 2012-08-12T17:29:30.717 回答