前台的HTML代码如下:
<div class="last">
<span class="title">专题教程</span>
<ul>
<li><a href="#">Lightroom专题集</a></li>
<li><a href="#">非主流照片教程集</a></li>
<li><a href="#">艺术照片效果教程</a></li>
<li><a href="#">新照旧照老残效果</a></li>
<li><a href="#">PhotopsCS3专题集</a></li>
<li><a href="#">Photoshop调出美女照片纯</a></li>
<li><a href="#">Photoshop为婚片打造出华丽的金色效果</a></li>
<li><a href="#">照片色调教程专辑</a></li>
<li><a href="#">照片边框效果教程</a></li>
<li><a href="#">PS打造出MM照片的柔软淡色艺术效果</a></li>
</ul>
</div>
<!-- *******************正文内容 .last******************* -->
CSS代码
* {
margin:0px;
padding:0px
}
html,body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
span {
font-size:14px; font-weight:bold; color:#000;
}
ul , ol {
list-style:none;
margin:0px;
padding:0px;
}
li {
display:block;
float:left;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline; color:#000
}
.last {
300px;
overflow:visible;
border:1px solid #A2B7DB;
float:left;
margin-top:5px
}
.last span.title {
display:block;
100%;
height:29px;
background:url(../image/title_b_bg.gif) repeat-x;
line-height:29px;
}
.last span {text-indent:10px; color:#10326B; font-weight:bold}
.last ul {
clear:both;
}
.last li {
height:20px;
290px;
background:url(../image/ico-2.gif) 5px 8px no-repeat ;
border:1px dashed #FAFAFA;
}
.last li a {
color:#10326B;
padding-left:30px;
}
.last li a:hover {
color:#FF3300;
}
效果图如下: