css:ul,ol,li妙用

最新推荐文章于 2025-05-23 13:28:02 发布

转载最新推荐文章于 2025-05-23 13:28:02 发布 · 293 阅读

文章标签：

#xhtml #javascript #面试 #ViewUI

本文介绍如何使用CSS对HTML列表进行格式化，包括更改列表符号、调整对齐方式、设置背景颜色及鼠标悬停效果等。通过具体实例展示了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

LI代码的格式化:
A).运用CSS格式化列表符：
ul li{
list-style-type:none;
}
例如下面的：
供求信息

B).如果你想将列表符换成图像，则：
ul li{
list-style-type:none;

　　　font-size:12px;
list-style-image: url("csdnindex_pic35.gif");
vertical-align:middle;
}
例如下面的：
供求信息

C).为了左对齐，可以用如下代码：
ul{
list-style-type:none;
margin:0px;
}
例如下面的：
供求信息

D).如果想给列表加背景色，可以用如下代码：
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
例如下面的：
供求信息

E).如果想给列表加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;这一行必须要加的，这样才能块状显示！

例如下面的：
供求信息

F).LI中的元素水平排列,关键FLOAT:LEFT：
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
取消ul前缩进:
margin:0px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
   #test{
    margin-left:10px;
   }

    #test li{
        font-size:12px;
        list-style-type:none;
        vertical-align:middle;
        margin-bottom:3px;
    }

    .top{
        background:url(csdnindex_pic35.gif) 0 3px no-repeat;/*其中0 3px 代表background-position的横坐标和纵坐标*/
    }

    #test li a:hover{
        background:#999;
    }

    #test li a{
        background:#ccc;
        margin-left:20px;
        color:Black;
        text-decoration:none;
        width:100%;
        display:block;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="test">
    <li class="top"><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
    <li><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
    <li><a href="javascript:">程序员面试一句话让HR面无人色</a></li>
    </ul>
     </div>
    </form>
</body>
</html>

示例用到的图标:

点击下载