lianxi3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/lianxi3.css"/>
</head>
<body>
<div class="div1">
<ul class="ul1">
<li class="li0">保养心得<a href="#" class="i0">MORE+</a></li>
<li class="li1"></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.11</a> <a href="#" class="a1">燃油粗滤器定期放水</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.22</a> <a href="#" class="a1">空气滤清器的使用与保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.22</a> <a href="#" class="a1">发动机皮带定期保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.22</a> <a href="#" class="a1">传送抽日常维护与保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.21</a> <a href="#" class="a1">出气筒定期检查防水</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.21</a> <a href="#" class="a1">鞍座的维护与保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.21</a> <a href="#" class="a1">鞍座的维护与保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.21</a> <a href="#" class="a1">鞍座的维护与保养</a></li>
<li class="li2"><i class="i1"></i><a href="#" class="a1">2016.03.21</a> <a href="#" class="a1">鞍座的维护与保养</a></li>
</ul>
</div>
</body>
</html>
lianxi3.css
@charset "utf-8";
.ul1{
list-style: none;
}
.li0{
height: 25px;
width: 300px;
border-bottom: 1px solid gainsboro;
line-height: 23px;
color: red;
}
.li1{
width:300px ;
height: 10px;
}
.li2{
width:300px ;
height: 35px;
border-bottom: 1px solid gainsboro;
line-height: 36px;
}
.i0{
color:gainsboro;
float: right;
margin-top: 1px;
text-decoration: none;
}
.i1{
float: left;
height: 34px;
width: 1px;
margin-top: -1px;
background-color: white;
border: 1px solid white;
}
.a1{
text-decoration: none;
color: black;
}
.li2:hover{
background-color: beige;
}
.li2:hover .i1{
background-color: red;
border: 1px solid red;
}
.li2:hover .a1{
color: red;
text-decoration: underline;
}