课程分类列表(css定义列表实现)

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
* {
    margin : 0 ;
    padding : 0 ;
}

body {
    font-family : Verdana, Geneva, sans-serif ;
    padding : 100px ;
}

.list {
    width : 238px ;
    border : 1px solid #a6b4ce ;
    overflow : hidden ;
    padding-bottom : 10px ;
    background : #ebf2fa ;
}

.list dt {
    background : #bddbfd url(arrow.gif) 10px 12px no-repeat ;
    padding-left : 20px ;
    height : 30px ;
    line-height : 30px ;
    font-size : 14px ;
    font-weight : bold ;
    color : #1d2f45 ;
}

.list dd {
    float : left ;
}

.list a {
    display : block ;
    width : 108px ;
    height : 23px ;
    text-align : center ;
    text-decoration : none ;
    color : #1d2f45 ;
    border : 1px solid #a6b4ce ;
    color : #1d2f45 ;
    margin : 10px 0 0 6px ;
    background : #bbddf8 ;  
}
</ style >
</ head >
< body >
< dl  class ="list" >
< dt > 高中教案 </ dt >
< dd >< a  href ="#" > 语言教案 </ a ></ dd >
< dd >< a  href ="#" > 英语教案 </ a ></ dd >
< dd >< a  href ="#" > 物理教案 </ a ></ dd >
< dd >< a  href ="#" > 化学教案 </ a ></ dd >
< dd >< a  href ="#" > 生物教案 </ a ></ dd >
< dd >< a  href ="#" > 政治教案 </ a ></ dd >
< dd >< a  href ="#" > 历史教案 </ a ></ dd >
</ dl >
</ body >
</ html >

 

 

源码下载 ：

点击下载