本文通过实例展示了如何使用HTML和CSS构建一个具有动态效果的新闻列表，包括鼠标悬停时的文字颜色变化和下划线效果，以及带有红色边框的新字标识。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.zhengti{
width:1000px;
height:1000px;
margin-top:50px;
margin-left:100px;
background-image:url("http://dingyue.nosdn.127.net/jHln=gJ0UTcUa0T9WAwEF6BZPUyMF37fu0xdGRSG4FinT1537439939543.jpg");
background-repeat:no-repeat;
}
li{
list-style:none;
line-height:36px;
}
ul li a{
font-size:14px;
text-decoration: none;
color:yellow;/*文字本来黄色*/
}
.k3:hover{
color:blue;/*移动鼠标变蓝色*/
text-decoration:underline;/*移动鼠标下划线*/
}
.k2:hover{
color:blue;/*移动鼠标变蓝色*/
text-decoration:underline;/*移动鼠标下划线*/
}
h5{
width:200px;
height:6px;
margin-left:40px;
color:yellow;
}
.k1{
border:1px solid red;/*加边框*/
color:red;/*边框颜色*/
}
</style>
</head>
<body>
<div class="zhengti">
<!--标题-->
<div>
<h5 >实时热点</h5>
</div>
<div>
<ul>
<!--八个无序的小标题-->
<li><a href="#"><span class="k3">蓝洁瑛去世</span></a></li>
<li><a href="#">
<span class="k2">靓绝五台山</span>
<!--小标题后面的带框新字-->
<span class="k1">新</span>
</a>
</li>
<li><a href="#">
<span class="k2">Easyhoon离队</span>
<!--小标题后面的带框新字-->
<span class="k1">新</span>
</a></li>
<li><a href="#">
<span class="k2">北京调整医疗费用</span>
<!--小标题后面的带框新字-->
<span class="k1">新</span>
</a></li>
<li><a href="#"><span class="k3">伊能静晒炫富照</span></a></li>
<li><a href="#">
<span class="k2">日航副机长酒驾</span>
<!--小标题后面的带框新字-->
<span class="k1">新</span>
</a></li>
<li><a href="#"><span class="k3">全球首个AI公园</span></a></li>
<li><a href="#"><span class="k3">邹文怀去世</span></a></li>
</ul>
</div>
</div>
</body>
</html>
效果图如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
