网页列表设计

2019独角兽企业重金招聘Python工程师标准>>>

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="width: 650px; margin :0 auto ">
        <p><h3>建立无序列表中的具体知识</h3></p>
        <div style=" width: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="width:600px;height:900px ;background-color :gold">
        <p><h3>建立有序的列表</h3></p>
        <div >
            <ol>
                <li>第一个有序列表</li>
                <li>第二个有序列表</li>
            </ol>
            <hr style="width:400"/>
            <ol type="i">
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
            </ol>
            <hr style="width:400" />
            <ol type="a">
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
                <li>使用type属性的不同格式</li>
            </ol>
            <hr style="width: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后的文字会缩进显示。

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

---

 

4、列表的嵌套

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

1>嵌套一层列表

2>嵌套多层

3>混合嵌套

 1 <div style="width: 600px; height: 800px; background-color: #b2e05c">
 2         <h3>列表的嵌套</h3><hr />
 3         <div>
 4             <h4>嵌套一层列表</h4>
 5             <ul>
 6                 <li>手机</li>
 7                 <li>
 8                     电脑
 9                     <ul>
10                         <li>联想</li>
11                         <li>戴尔</li>
12                         <li>华硕</li>
13                     </ul>
14                 </li>
15                 <li>冰箱</li>
16             </ul>
17         </div><hr />
18         <div>
19             <h4>嵌套多层无序列表</h4>
20             <ul>
21                 <li>手机</li>
22                 <li>电脑
23                     <ul>
24                         <li>联想
25                         <ul>
26                             <li>联想电脑顶呱呱</li>
27                             <li>联想电脑没有用</li>
28                         </ul>
29                         </li>
30                         <li>戴尔
31                         <ul>
32                             <li>戴尔电脑好的不得了</li>
33                             <li>戴尔电脑还不错</li>
34                             </ul>
35                         </li>
36                     </ul>
37                 </li>
38                 <li>冰箱</li>
39             </ul>
40         </div><hr />
41         <div>
42             <h4>混合嵌套的列表，有序与无序</h4>
43             <ul>
44                 <li>手机</li>
45                 <li>
46                     电脑
47                     <ul>
48                         <li>联想
49                         <ol>
50                             <li>联想不错</li>
51                             <li>联想杠杠的</li>
52                             <li>联想是个啥</li>
53                             </ol></li>
54                         <li>戴尔</li>
55                     </ul>
56                 </li>
57                 <li>华硕</li>
58             </ul>
59         </div>
60        
61 
62     </div>

 

转载于:https://my.oschina.net/dongteng/blog/684369