博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
网页列表设计
阅读量：5839 次
发布时间：2019-06-18

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

hot3.png

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元素，用来指定当前列表项的序号。

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

 

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 
                    
      1. 联想不错
        2. 51 
                    
      2. 联想杠杠的
        3. 52 
                    
      3. 联想是个啥
        4. 53 
                   
      • 54                         
                
    • 戴尔
      • 55                     
               
    56                 
    • 57                 
            
  • 华硕
    • 58             
           
59         
      
60        61 62

 

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

你可能感兴趣的文章
算法-两数相加
查看>>
使用chrome performance 查看页面性能
查看>>
OpenCV3编程入门学习一架构分析
查看>>
安装docker和docker-compose
查看>>
分布式事务中间件 Fescar—RM 模块源码解读
查看>>
MYSQL中视图的使用
查看>>
四种方法实现──三栏布局（圣杯布局、双飞翼布局）
查看>>
函数&作用域提升
查看>>
第十三天-企业应用架构模式-对象-关系元数据映射模式
查看>>
资深程序员的书单 - 转载自@Axb
查看>>
Laravel核心解读--异常处理
查看>>
待实践的解决方案---微信浏览器里粘贴功能不好使
查看>>
spring cloud gateway （5）其他
查看>>
【译】 WebSocket 协议第七章——关闭连接（Closing the Connection）
查看>>
以太坊中的账户、交易、Gas和区块Gas Limit等概念
查看>>
记住这35个英文单词，你就可以在RPA界混了！
查看>>
前嗅ForeSpider数据建表和高级配置界面介绍
查看>>
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
查看>>
RxJS 实现摩斯密码(Morse) 【内附脑图】
查看>>
爬虫提交form表单中含有(unable to decode value)解决方法
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-12-24 09:09:05   当前IP: 3.146.178.220   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我