吉软-人文精英班-第二次作业原

最新推荐文章于 2021-03-25 03:33:33 发布

chengzhao9683

最新推荐文章于 2021-03-25 03:33:33 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3962295/blog/2508143

本文通过实例展示了如何使用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>