<pre name="code" class="html">	<div class="wrapper">
	  	<ul>
	      <li><a href="#">qwqwqwq</a></li>
	      <li><a href="#">qwqwqwq</a></li>
	      <li><a href="#">qwqwqwq</a></li>
	      <li><a href="#">qwqwqwq</a></li>
	  	</ul>
	</div>
 

		/*需要觸發點選事件的是<a>標籤，所以我們需要把<a>標籤設定塊級元素：display：block，然後再設定<a>的width和height去填充<li>*/
		.wrapper ul li{
		    border: 1px dotted;
		    background-color:orange;
		    list-style:none;
		    float:left;
		    padding-left:10px;
			-webkit-transition: all .5s linear .2s;
			transition: all .2s linear .2s;
		}
		.wrapper ul li a{
		    margin-top:4px;
		    margin-right:10px;
		    display:block;
		    width：50px;height:30px;
		    text-decoration:none;
		}
 

		/*再新增一些動畫樣式，更加形象，可忽略<span style="font-family: Arial, Helvetica, sans-serif;">*/
		.wrapper ul li{
		    border: 1px dotted;
		    background-color:orange;
		    list-style:none;
		    float:left;
		    padding-left:10px;
			-webkit-transition: all .5s linear .2s;
			transition: all .2s linear .2s;
		}
		.wrapper ul li:hover{
		  background-color: red;
		  border-radius: 10px;
		}