<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width:200px;
height: 300px;
background-image:url("picture/xiaogou.png" );
background-repeat: no-repeat;
background-size:200px 300px;
/* 设置div大小200*300
设置背景图片 地址 picture/xiaogou.z
不让他平铺
设置背景图片图片的大小和div大小相同*/
}
li{
font-weight:bolder;
list-style:none;
}
/* li字体加粗 去掉前面的点 */
a {
color:black;
line-height: 35px;
display: block;
}
/* 设置超链接字为黑色，行高35px 去掉下划线 */
li:hover{color:blue;}
/* li鼠标碰到的时候变为蓝色 */
a:hover{color:blue;}
/* 超链接鼠标碰到的时候变为蓝色 */
a:link,a:visited{
text-decoration:none; /*超链接无下划线*/
}
span{color:red;
border:1px solid red;
font-size:60%;
}
/* span包裹的字颜色为红色
边框颜色为红色 span里的字变小为原来60%*/
</style>
</head>
<body>
<div class="db">
<ul><li>实时热点</li>
<a href="#">蓝洁瑛去世</a>
<a href="#">靓绝五台山<span>新</span></a>
<a href="#">Easyhoon离队<span>新</span></a>
<a href="#">北京调整医疗费用<span>新</span></a>
<a href="#">伊能静晒炫富照</a>
<a href="#">日航飞机张酒驾<span>新</span></a>
<a href="#">全球首个AI公园</a>
<a href="#">邹文怀去世</a>
</ul>
</div>
</body>
</html>
效果图：
来源：oschina
链接：https://my.oschina.net/u/4013540/blog/2480153