网页列表设计

1、建立无序的列表

无序列表用<ul>标签定义，表示一个没有特定顺序的相关条目的集合。无序列表的各个列表之间没有顺序级之分。通常会在每个列表前添加一个项目符号，并且每行会针对左边界压缩一定的距离。

无序列表用一对<ul>标记，但每个列表要用<li>定义。

使用type属性可以定制无序项目列表符号：disc实心圆、circle空心圆、square实心方块、默认的是disc。type属性既可以在ul中设置，还可以直接在li中设置。

body>
   <div>
       <h1 align="center">本章内容</h1>
       <ul>
           <li><h2 >建立无序的列表</h2></li>
           <li><h2>建立有序的列表</h2></li>
           <li><h2>建立定义列表</h2></li>
           <li><h2>列表的嵌套</h2></li>  
       </ul>
   </div>
    <hr />
    <div style=" 650px; margin :0 auto ">
        <p><h3>建立无序列表中的具体知识</h3></p>
        <div style=" 300px; height:120px; background-color:yellowgreen ">
            <ul type="disc">
                <li>在ul中设置type属性为disc时的列表符号样式</li>
                <li type="circle">在li中设置type属性为circle时列表符号样式</li>
                <li type="square">在li中设置type属性为实心正方形</li>
            </ul>
        </div>
    </div>
</body>

---

2、建立有序的列表

有序列表<ol>标签在列表项目前添加的编号而不是项目符号，编号从第一列表项开始向后递增。当需要给列表项目排列顺序时就可以使用有序列表。

同样可以

1>通过设置type属性定制有序列表的项目符号：设置成1数字序号、a小写字母、A大写字母、i小写罗马字母、I大写罗马数字。默认是1数字列表。

2>start属性：定制有序列表中列表项的起始数。例type=“i”，start=5.则有序表的第一个项目符号从v开始。

3>value属性：定制有序列表中列表序号的数值。仅仅使用于li元素，用来指定当前列表项的序号。

  <div style="600px;height:900px ;background-color :gold">
        <p><h3>建立有序的列表</h3></p>
        <div >
            <ol>
                <li>第一个有序列表</li>
                <li>第二个有序列表</li>
            </ol>
            <hr style="400"/>
            <ol type="i">
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
            </ol>
            <hr style="400" />
            <ol type="a">
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
            </ol>
            <hr style="400" />
            <ol type="A">
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
            </ol>
            <hr />
            <ol type=" A" start=" 3">
                <li>start属性定制起始数</li>
                <li>start属性定制起始数</li>
                <li>start属性定制起始数</li>
            </ol>
            <hr />
            <ol>
                <li>li标签适用的value属性</li>
                <li value=" 3">li标签适用的value属性</li>
                <li value="6">li标签适用的value属性</li>
            </ol>

        </div>
    </div>

---

3、建立定义列表

定义列表通常用于术语的定义，用<dl>标签实现。术语标签由<dt>标签开始，术语的解释说明由<dd>标签实现，dd后的文字会缩进显示。

 <div style ="background-color :red ">
        <p><h3>建立定义列表</h3></p>
        <dl>
            <dt>术语的定义：张保东</dt>
            <dd>东腾科技有限公司的创始人</dd>
        </dl>
        <dl>
            <dt>东腾科技</dt>
            <dd>东腾科技有限公司的简称，一个拥有现代科技为一体的全职能新型化公司</dd>
        </dl>
    </div>

---

4、列表的嵌套

通常嵌套列表用于反映层次较多的内容。可以将编号或项目列表嵌套在其他的编号列表中。

1>嵌套一层列表

2>嵌套多层

3>混合嵌套

<div style=" 600px; height: 800px; background-color: #b2e05c">
        <h3>列表的嵌套</h3><hr />
        <div>
            <h4>嵌套一层列表</h4>
            <ul>
                <li>手机</li>
                <li>
                    电脑
                    <ul>
                        <li>联想</li>
                        <li>戴尔</li>
                        <li>华硕</li>
                    </ul>
                </li>
                <li>冰箱</li>
            </ul>
        </div><hr />
        <div>
            <h4>嵌套多层无序列表</h4>
            <ul>
                <li>手机</li>
                <li>电脑
                    <ul>
                        <li>联想
                        <ul>
                            <li>联想电脑顶呱呱</li>
                            <li>联想电脑没有用</li>
                        </ul>
                        </li>
                        <li>戴尔
                        <ul>
                            <li>戴尔电脑好的不得了</li>
                            <li>戴尔电脑还不错</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>冰箱</li>
            </ul>
        </div><hr />
        <div>
            <h4>混合嵌套的列表，有序与无序</h4>
            <ul>
                <li>手机</li>
                <li>
                    电脑
                    <ul>
                        <li>联想
                        <ol>
                            <li>联想不错</li>
                            <li>联想杠杠的</li>
                            <li>联想是个啥</li>
                            </ol></li>
                        <li>戴尔</li>
                    </ul>
                </li>
                <li>华硕</li>
            </ul>
        </div>
       

    </div>