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 >程序员面试一句话让HR面无人色</a></li>
    </ul>
     </div>
    </form>
</body>
</html>

 

 示例用到的图标:

点击下载

 

相关文章:

  • 2021-10-05
  • 2022-12-23
  • 2021-05-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-26
猜你喜欢
  • 2021-06-24
  • 2022-12-23
  • 2022-12-23
  • 2022-02-17
  • 2022-12-23
  • 2021-10-11
相关资源
相似解决方案