新闻案例

最新推荐文章于 2019-07-14 16:06:52 发布

jlhaoran

最新推荐文章于 2019-07-14 16:06:52 发布

阅读量669

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/72831301

HTML 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种在CSS中精简样式的技巧，通过对比两种不同的列表项样式定义方法，展示了如何利用简洁的代码实现相同的视觉效果。

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


<!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">
     body{margin: 0;padding: 0;}
     .new{border:1px solid green;width: 500px;}
     
     .title{font-size: 24px;border:1px solid green;background-color: green;width: 500px;height:45px; line-height: 45px}
     
     /*.new ul li{height:30px;line-height: 30px;border-bottom-width: 1px;border-bottom-color: green;border-bottom-style:dashed;text-decoration:none;}*/

     .new ul li{height:30px;line-height: 30px;border-bottom: 1px dashed #ccc;width: 420px}
     
     .new li a:link, .new li a:visited {color: #778899;text-decoration:none;}    /* 未访问的链接 */ 
     .new li a:hover, .new li a:active {color: #FF0000;text-decoration:none;}    /* 鼠标移动到链接上 */
   
   </style>
</head>
<body >
  <div class="title">新闻中心</div>
  <div class="new">
    <ul>
    <li><a href="" > 长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</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>

红色部分是一种写法比较繁琐，蓝色标注的比较简洁但效果是一样的

结果如图：