网页列表设计-白红宇

网页列表设计

阅读量：6657 次

发布时间：2019-06-25

本文共 3925 字，大约阅读时间需要 13 分钟。

1、建立无序的列表

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

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

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

body>   
            
      本章内容
       
                 
       建立无序的列表
           
       建立有序的列表
           
       建立定义列表
           
       列表的嵌套
         
      
   
     
    
     
    
             
      
      建立无序列表中的具体知识
      
        
                  
                       
        在ul中设置type属性为disc时的列表符号样式
                
        在li中设置type属性为circle时列表符号样式
                
        在li中设置type属性为实心正方形

2、建立有序的列表

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

同样可以

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

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

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


             
      
      建立有序的列表
      
        
                  
                       
        第一个有序列表
                
        第二个有序列表
            
       
            
       
            
                       
        使用type属性的不同格式
                
        使用type属性的不同格式
                
        使用type属性的不同格式
            
       
            
       
            
                       
        使用type属性的不同格式
                
        使用type属性的不同格式
                
        使用type属性的不同格式
            
       
            
       
            
                       
        使用type属性的不同格式
                
        使用type属性的不同格式
                
        使用type属性的不同格式
            
       
            
       
            
                       
        start属性定制起始数
                
        start属性定制起始数
                
        start属性定制起始数
            
       
            
       
            
                       
        li标签适用的value属性
                
        li标签适用的value属性
                
        li标签适用的value属性

3、建立定义列表

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

1  
     
       2         
      
      建立定义列表
      
 3         
      
        4             
       
        术语的定义：张保东
       
 5             
       
        东腾科技有限公司的创始人
       
 6         
      
 7         
      
        8             
       
        东腾科技
       
 9             
       
        东腾科技有限公司的简称，一个拥有现代科技为一体的全职能新型化公司
       
10         
      
11

4、列表的嵌套

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

1>嵌套一层列表

2>嵌套多层

3>混合嵌套

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

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

你可能感兴趣的文章