ul和li的用法

一、清除缩进和项目符
1、清除项目符和缩进:ul {list-style: none; padding-left:0px;}
2、清除缩进    ul {margin:7;list-style-type:disc;}
3、清除缩进    ul {margin-left:20px}
4、清除缩进    ul {margin-left: -24px;}
二、更换项目符漂亮小图标
下面有3种实现方法:
1、简单方法
ul{list-style-image:url(/images/icon.gif);}
这种方法不同的浏览器的显示效果会有一些差异,主要是在图片的垂直位置上。有些浏览器会使图片和列表项文本的中部位置平齐,有的又会显示得高一些,总之就是有些不一致。
2、复杂方法
ul {list-style:none;}
li{background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
可以解决上面的浏览器不兼容的问题。首先,清除默认的项目符号,然后加上我们自己的背景图片。no-repeat告诉浏览器不要平铺这张图片,0px 50%告诉背景图片应该位于距左侧0px 且竖直方向位于顶部往下50%处,实际上就是在竖直方向居中。我们在左侧加上了17px的边距,这样那些15px宽5像素高的小图标就能完全显露出来,不会被文本遮挡,并且和文本之间有一点间隔。
3、常规方法
li {background: url(/images/icon.gif) no-repeat 0px 50%; padding-left:17px;}
三、更换项目符为小方块
ul {list-style-type: square;}
list-style-type可以有以下取值:
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
disc:点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字i, ii, iii, iv, v, /etc.
upper-roman: 大写罗马文字I, II, III, IV, V, /etc.
lower-greek: 小写阿拉伯文字α, β, γ, ...
lower-latin: 小写拉丁文a, b, c, ... z
upper-latin: 大写拉丁文A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文a, b, c, ... z
upper-alpha: 大写拉丁文A, B, C, ... Z
none: 无(取消所有的list样式)
inherit:继承
四、行列排法
1、默认为纵向横向,无须设定。
2、横向排列,对
  • 设定左对齐:li{float:left; }
    2、多行多列排列:一是设定
  • 左对齐:li{float:left; };二是确定
      的宽度和
    • 的宽度;一个
    • 是一列,第一排横
    • 个数之和等于
        的宽度。
        五、
        • 浏览器兼容
          兼容浏览器   在CSS中加:
          list-style-position: outside;
          六、
          • 列表应用实例
            1、用无序列表(
          • )也可以代替表格()制作横向的导航列表
            html代码


            CSS代码
            #minitabs{
            height:29px;
            font-size:12px;
            margin:0px;
            padding:0px;
            border-bottom:1px solid #696;
            }
            #minitabs li {
            height:25px;
            margin:0px;
            padding:0px;
            display:inline;
            list-style-type:none;
            }
            #minitabs a {
            float:left;
            line-height:25px;
            font-weight:bold;
            margin:0px 10px 0px 10px;
            text-decoration:none;
            color:#9c9;
            }
            #minitabs a.active, #minitabs a:hover {
            border-bottom:4px solid #696;
            color:#363;
            }
            #minitabs a:hover {
            color:#696;
            }


            我们这里实际做的是去掉了项目符号以及默认的缩进。display:inline;把列表变成水平方向。我们还让列表中所有a元素 float:left; 实际上就是强制它们在水平方向对齐成一行。我们还加上了一些颜色,让链接文本以粗体显示,并且去掉了链接默认的下划线。
            2、行列排法100排十行十列
            
            
            
            
            1到100 利用CSS+ul+li 排列成十行十列
            
            
            
            
            
            


            中间用了段js代替。纯CSS用下面的代码替换就可以了。
            • 1
            • 2


            你可能感兴趣的:(JS)