列表制作

标签：ul li   家庭   lin   分享图片   列表   one   :hover   ott   http   

1.制作下面图像列表

2.<style type="text/css">

ul{ width: 200px; list-style: none;}
ul li{margin-top: 10px;}
ul li a{
display: block;
height: 35px;
line-height: 35px;
text-decoration: none;
color:#fff;
background-image: linear-gradient(to bottom,#9EB829,#9EB829);
border-radius: 8px;
font-size: 12px;
padding-left: 20px;
}
ul li a:hover{background-image: linear-gradient(to bottom,#,#);padding left: 25px;}
ul li a:active{background-image: linear-gradient(to bottom,#,#);}

</style>

<ul>
<li><a href="#">公司福利</a></li>
<li><a href="#">家庭福利</a></li>
<li><a href="#">情侣福利</a></li>
<li><a href="#">个人福利</a></li>
<li><a href="#">儿童福利</a></li>
</ul>

列表制作

标签：ul li   家庭   lin   分享图片   列表   one   :hover   ott   http   

原文地址：https://www.cnblogs.com/feifei521/p/8945794.html