用css做一个静态聚美美容列表

 其中一个小内容：鼠标经过列表项时让其  链接和小圆边框背景颜色一同改变 

            <style type="text/css">
            span{
                /* 行内元素不能改变大小，例如宽度和高度*/
                /* 让span这个行元素变成块元素，块元素改完之后不能和其他的行元素在一行，所以   改成行内快元素; */
                 display: inline-block;
                 
                 width: 20px;
                 height: 20px;
                 border: 1px solid green;

                 /*边框边角变成圆滑圆框 当边框是正方形时，让其属性值（边框半径）等于边长的一半，它就变成了一个圆，为之前正方形边框的内接圆*/
                 border-radius: 10px;
                 text-align: center;
            }
            a{
                color: #008000;
            }
            li{
                list-style: none;
            }
            li:hover>span{