您的位置:首页 > Web前端 > css > 正文

css中ul li的用法

更多 时间:2013-8-10 类别:Web前端 浏览量:1331

css中ul li的用法

css中ul li的用法

  css样式表为列表增加了一些功能,控制ul li列表的样式包括列表样式、图形符号、列表位置三个部分。

列表符号


列表符号是指显示于每一个列表项目前的符号标识。

  •  
  • CSS 代码   复制
  • 
    /*基本格式如下:*/
    list-style-type:参数
    
    /*参数取值范围:*/
    /*参数中的disc是默认选项。*/
    ·disc:圆形
    ·circle:空心圆
    ·square:方块
    ·decimal:十进制数字
    ·lower-roman:小写罗马数字
    ·upper-roman:大写罗马数字
    ·lower-alpha:小写希腊字母
    ·upper-alpha:大写希腊字母
    ·none:无符号显示
    
    
    		

  • 图形符号


    图形符号指原来列表的项目符号将可以使用图形来代替。

  •  
  • CSS 代码   复制
  • 
    /*基本格式如下:*/
    /*URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。*/
    list-style-image:URL
    
    /*例如*/
    ul li{
    list-style-type:none;
    list-style-image: url(/blog/images/icon.gif);
    }
    			

     

  • 列表位置


    列表位置描述列表在何处显示。

  •  
  • CSS 代码   复制
  • 
    /*基本格式如下:*/
    list-style-position:参数
    
    /*参数取值范围:*/
    inside:在列表项目标记放置在文本以内,且环绕文本根据标记对齐。
    
    outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
    
    inherit:规定应该从父元素继承 list-style-position 属性的值。
    
    		
  • li和ul标签几个用法实例

  •  
  • CSS 代码   复制
  • 
    /*将列表符换成图像*/
    
    ul li{ 
    list-style-type:none; 
    list-style-image: url(/blog/images/icon.gif); 
    }
    
    
    /*列表左对齐*/
    
    ul{ 
    list-style-type:none; 
    margin:0px; 
    }
    
    
    /*给列表加背景色*/
    
    ul{ 
    list-style-type: none; 
    margin:0px; 
    } 
    ul li{ 
    background:#CCC; 
    }
    
    
    
    /*列表加MOUSEOVER背景变色效果*/ 
    
    ul{ list-style-type: none; margin:0px; } 
    ul li a{ display:block; width: 100%; background:#ccc; } 
    ul li a:hover{ background:#999; } /*说明:display:block;这一行必须要加的,这样才能块状显示!*/
    
    
     
    /*LI中的元素水平排列,关键FLOAT:LEFT: */
    
    ul{ 
    list-style-type:none; 
    width:100%; 
    } 
    ul li{ 
    width:80px; 
    float:left; 
    } 
    
    		
  •  

    标签:css ul li
    您可能感兴趣