课程分类列表(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>

源码下载：

点击下载

posted @ 2010-01-11 02:16 唔愛吃蘋果阅读(285) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

公告