列表样式的使用与注意事项

最新推荐文章于 2022-10-07 01:27:17 发布

荒--

最新推荐文章于 2022-10-07 01:27:17 发布

阅读量501

点赞数

分类专栏： WEB基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/70162632

版权

WEB基础专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>列表样式</title>
    <meta charset="utf-8"/>
    <style type="text/css">
      .open{
        list-style-image:url("../images/open.png");
      }
      .close{
        list-style-image:url("../images/close.png");
      }
      .add{
        list-style-image:url("../images/add.png");
      }
      .modify{
        list-style-image:url("../images/modify.png");
      }
      .delete{
        list-style-image:url("../images/remove.png");
      }
      
      /*先去掉li前面的编号*/
      li{
        list-style-type:none;
      }
      /*去掉左侧内边距*/
      #list2{
        padding-left:0;
      }
      .open1{
        background:url("../images/open.png") no-repeat;
        /*用text-indent来控制文字缩进到图片的后面*/
        text-indent:25px;
      }
      .close1{
        background:url("../images/close.png") no-repeat;
        text-indent:25px;
      }
      .add1{
        background:url("../images/add.png") no-repeat;
        text-indent:25px;
      }
      .modify1{
        background:url("../images/modify.png") no-repeat;
        text-indent:25px;
      }
      .delete1{
        background:url("../images/remove.png") no-repeat;
        text-indent:25px;
      }
    </style>
  </head>
  <body>
  <h1>列表样式图片--不对齐</h1>
    <ul>
      <li class="open">
      	部门管理
      	<ul>
      	  <li class="add">增加</li>
      	  <li class="modify">修改</li>
      	  <li class="delete">删除</li>
      	</ul>
      </li>
      <li class="close">
     	 员工管理
     	<ul>
      	  <li class="add">增加</li>
      	  <li class="modify">修改</li>
      	  <li class="delete">删除</li>
      	</ul> 
      </li>
       <li class="close">
     	 资产管理
     	<ul>
      	  <li class="add">增加</li>
      	  <li class="modify">修改</li>
      	  <li class="delete">删除</li>
      	</ul>
      </li>
    </ul>
    <h1>列表样式图片--处理方式</h1>
    <h2>不使用list-style-image,用background设置为背景</h2>
    <ul id="list2">
      <li class="open1">
      	部门管理
      	<ul>
      	  <li class="add1">增加</li>
      	  <li class="modify1">修改</li>
      	  <li class="delete1">删除</li>
      	</ul>
      </li>
      <li class="close1">
     	 员工管理
     	<ul>
      	  <li class="add1">增加</li>
      	  <li class="modify1">修改</li>
      	  <li class="delete1">删除</li>
      	</ul> 
      </li>
       <li class="close1">
     	 资产管理
     	<ul>
      	  <li class="add1">增加</li>
      	  <li class="modify1">修改</li>
      	  <li class="delete1">删除</li>
      	</ul>
      </li>
    </ul>
  </body>
</html

显示结果如下：

荒--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
列表样式的使用与注意事项

列表样式 .open{ list-style-image:url("../images/open.png"); } .close{ list-style-image:url("../images/close.png"); } .add{ list-style-image:
复制链接

扫一扫