只與樣式相關的代碼用css寫不用js
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>
邏輯與樣式分離
</title>
<style type="text/css">
.clearfix{
list-style:none;
margin:0;
padding:0;
}
.clearfix li{
float:left;
margin-right:15px;
}
.clearfix li a{
color:#000;
float:left;
text-decoration:none;
position:relative;
bottomm:-1px;
left:2px;
}
.clearfix li a label{
}
.clearfix li a label input{
position:absolute;
bottom:0;
left:0;
}
.clearfix li a label span{
margin-left:20px;
}
.clearfix li a label input:checked ~i,.clearfix li a:hover label i{
background-position:0 65px;
}
.clearfix li a label i{
width:65px;
height:65px;
<!-- border:1px solid green;-->
margin:0 5px 5px 5px;
display:block;
background-position:0 0;
}
.clearfix li a label i.icon_1{
background-image:url("icon_1.jpg");
}
.clearfix li a label i.icon_2{
background-image:url("icon_2.jpg");
}
</style>
</head>
<body>
<ul class="clearfix">
<li>
<a href="##">
<label>
<input type="checkbox">
<i class="icon_1"></i>
<span>我要轉賬</span>
</label>
</a>
</li>
<li>
<a href="##">
<label>
<input type="checkbox">
<i class="icon_2"></i>
<span>賬戶查詢</span>
</label>
</a>
</li>
</ul>
</body>
</html>
