使用ul li绘制列表src: url("C:\\Users\\i042416\\Desktop\\fonts\\pla

<html>
<style type ="text/css">
@font-face {
 font-family: 'playericons';
 src:  url("C:\\Users\\i042416\\Desktop\\fonts\\playericons.eot");
 src:  url("C:\\Users\\i042416\\Desktop\\fonts\\playericons.eot?#iefix") format('embedded-opentype'), 
 url("C:\\Users\\i042416\\Desktop\\fonts\\playericons.woff") format('woff'), 
 url("C:\\Users\\i042416\\Desktop\\fonts\\playericons.ttf") format('truetype'), 
 url("C:\\Users\\i042416\\Desktop\\fonts\\playericons.svg#playericons") format('svg');
 font-weight: normal;
 font-style: normal;
}
 #menu ul {
  list-style:none; /* 去掉列表项目前方的圆点 */
  margin:3px;
 } 
 
 #menu ul li {
  
  float:left; /*让列表项目在水平方向从左至右依次显示 */
  margin-left: 2px;
 }
 #menu ul li:first-child{
 background-color: red; /* 将第一个li 项目背景色设置为红色 */
}
#menu ul li span:before{
 content: '\70';
 background-color: blue;
 font-size: 16px;
 line-height: 50px; /* 设置行高*/
 text-align: center;
        /* 块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。常见的块级元素有：h1~h6、p、div、ul、table，常见的行内元素有：span、a、input、select等。  使用float:left 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block*/
 float: left;
 color: #444;
 font-family: 'playericons';
 text-shadow:  1px 1px 1px rgba(255,255,255,0.9);
 font-style: normal;
 font-weight: normal;
 text-transform: none;
 speak: none;
 display: inline-block;
 text-decoration: inherit;
 width: 1em;
 margin-right: 0.2em;
 text-align: center;
}
/* 将内容为c的li项目底部添加Volume的文字说明*/
#c :after{
 content: 'Volume';
 margin-top: 15px;
 display: block;
}
/* 给内容为java的li项目设置圆角border */
#java {
 background-color: yellow;
 border: solid 10px black;
 border-radius: 30%;
}
/*鼠标移至元素上显示为黄色 */
#menu ul li:hover{
 color: yellow;
}
</style>
<div id="menu"> 
<ul> 
<li><a href="#">ABAP</a><span>test</span></li> 
<li class="menuDiv"></li> 
<li><a href="#">C++</a></li> 
<li class="menuDiv"></li> 
<li id="c"><a href="#">C</a></li> 
<li class="menuDiv"></li> 
<li id="java"><a href="#">Java</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">Javascript</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">C#</a></li> 
</ul> 
</div> 
</html>