如：
-webkit-animation:gogogo 2s infinite linear
其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化，直接输出结果)
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
<div id="site-map"><dl>
<dt><h3>财经</h3></dt>
<dd>
<ul>
<li>理财生活</li>
<li>财经要闻</li>
<li>创富故事</li>
</ul>
</dd>
<dl>
<dl>
<dt><h3>教育</h3></dt>
<dd>
<ul>
<li>教育咨询</li>
<li>职业培训</li>
<li>职场人生</li>
</ul>
</dd>
<dl>
</div>
才装了系统，没编辑器，css不好输，你自己改：
#site-map{
width: 500px
line-height:1.78
}
#site-map dl{
边框:灰色 1px
下外边距：10px
}
#site-map dt{
背景:灰色
}
#site ul{
width: 100%
overflow:hidden
}
#site ul li{
浮动：左
右外边距：10px
}
你可以定义三个divlist1,list2,list3
.list1,.list2,.list3{float:leftwidth:30%}
改一下你的产品的宽度放在里面就行。
<html>
<head>
</head>
<body>
<div class=list1></div>
<div class=list2></div>
<div class=list3></div>
</body>
</html>
