程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=gbk" http-equiv="content-type">
<title></title>
<style type="text/css">
.time{
width: 740px;
}
.time ul{
list-style-type: none;
background-image: url(../ui/purduct-nav/timeline-bg.png);
background-repeat: repeat-x;
height: 10px;
position:relative;
top: 10px;
.timeline li{
float: left;
width: 110px;
background-image: url(../ui/purduct-nav/timeline-arrowgray.png);
background-repeat: no-repeat;
top:-4px;
left: 30px;
li .pront-text{
top:-20px;
left: -25px;
font-size: 16px;
font-family: arial, Arial, Tahoma;
.timeline li:hover{
background-image: url(../ui/purduct-nav/timeline-arrowred.png);
color: #d3181c;
font-weight: bold;
</style>
</head>
<body>
<div>
<ul>
<li>
<a>
product
</a >
</li>
</ul>
</div>
</body>
</html>
程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=gbk" http-equiv="content-type">
<title></title>
<style type="text/css">
.time{
width: 740px;
}
.time ul{
list-style-type: none;
background-image: url(../ui/purduct-nav/timeline-bg.png);
background-repeat: repeat-x;
height: 10px;
position:relative;
top: 10px;
}
.timeline li{
float: left;
width: 110px;
background-image: url(../ui/purduct-nav/timeline-arrowgray.png);
background-repeat: no-repeat;
position:relative;
top:-4px;
left: 30px;
}
li .pront-text{
position:relative;
top:-20px;
left: -25px;
font-size: 16px;
font-family: arial, Arial, Tahoma;
}
.timeline li:hover{
background-image: url(../ui/purduct-nav/timeline-arrowred.png);
background-repeat: no-repeat;
color: #d3181c;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a>
product
</a >
</li>
<li>
<a>
product
</a >
</li>
<li>
<a>
product
</a >
</li>
<li>
<a>
product
</a >
</li>
<li>
<a>
product
</a >
</li>
<li>
<a>
product
</a >
</li>
</ul>
</div>
</body>
</html>