背景图实用之列表

最新推荐文章于 2020-08-10 08:20:08 发布

jlhaoran

最新推荐文章于 2020-08-10 08:20:08 发布

阅读量412

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/haoranli/article/details/72870086

版权

HTML 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

因为默认的列表在不同的浏览器可能兼容性问题而产生不同的效果所以用背景图来展示列表标识

<!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>
	<title>基本选择器</title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
 
   <style type="text/css">
     u li{margin: 0;padding: 0;}
     li{
      list-style: none;      /**用背景图设置列表项 前提是将li的默认列表去掉**/
      border-bottom: 1px dotted red;
      background: url(lidot.png) no-repeat left center;
      text-indent: 2em;
      width: 400px;
      line-height: 30px;
      }
      a{text-decoration:none;}  /** 去掉连接的默认下划线 **/
   </style>
</head>
<body >
  <div class="new">
    <ul>
    <li><a href="" style="n"> 长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li>
    <li><a href="" > 广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
    <li><a href="" > 广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
    <li><a href="" > 年内5次降息为买房人减负 百万房贷可省17万</a></li>
    <li><a href="" > 台湾太平岛灯塔完工 可照射越南所占岛礁</a></li>
    <li><a href="" > 解放军允许智能手机进军营安装部队自研软件</a></li>
    <li><a href="" > 广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
    </ul>
  </div>

</body>
</html>

text-decoration 属性值：

值

	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。