当前位置：首页 → 问答吧 → dl dt dd和div布局的比较

dl dt dd和div布局的比较

时间：2009-03-18

来源：互联网

本帖最后由 longxinhe 于 2009-3-19 10:16 编辑

<div class="model">
 <div class="title">推荐文章</div>
 <div class="list">
 <ul>
 <li><img src="">
 <a href="#">印度国产钢材印度国产钢材印度国产钢材</a></li>
 <li><img src="">
 <a href="#">印度国产钢材印度国产钢材印度国产钢材</a></li>
 <li><img src="">
 <a href="#">印度国产钢材印度国产钢材印度国产钢材</a></li>
 </ul>
 </div>
</div>
<style type="text/css">
body {
 color:#000000;
 font-size:12px;
}
.model {
 width:300px;
 height:200px;
 border:1px solid #ASDFGG;
}
.title {
 width:290px;
 height:30px;
 line-height:30px;
 background:url();
}
.list {
 width:290px;
 height:auto;
}
.list ul {
 margin:0px;
 padding:0px;
}
.list ul li {
 width:290px;
 height:24px;
 line-height:24px;
 border-bottom:1px solid #000000；
}
.list a {
 color:#000000;
 text-decoration:none;
}
</style>

作者: longxinhe 发布时间: 2009-03-18

<!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">
/*----------全局*/
*{
padding:0px;
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
body {
padding:0px;
margin:0px;
color: #00599B;
}
html,body {
text-align:center;
font-size:12px;
}

ul{
list-style:none;
}
.margintop5{
margin-top:5px;
}
/*------------新闻列表板块*/
.newsbox{
width:740px;
overflow:hidden;
}
.newsbox dl{
width:360px;
float:left;
margin-right:6px;
border:1px solid #AACCEE;
}
.newsbox dl dt{
width:358px;
height:26px;
font-size:14px;
margin:1px auto 0px;
background: url(images/box_title_bg.gif) repeat-x;
border-bottom:1px solid #AACCEE;
}
.newsbox dl dt strong{
height:26px;
float:left;
line-height:26px;
padding-left:10px;
letter-spacing:2px;
font-size:13px;
color: #00599B;
}
.newsbox dl dt a{
height:26px;
line-height:26px;
font-size:13px;
font-weight:bold;
letter-spacing:2px;
text-decoration:none;
color: #00599B;
}
.newsbox dl dt a:hover{
font-size:13px;
color: #00599B;
text-decoration:none;
}
.newsbox dl dt span{
float:right;
padding-right:10px;
font-size:13px;
}
.newsbox dl dd{
width:360px;
}
.newsbox dl dd ul{
width:335px;
margin:6px auto;
}
.newsbox dl dd ul li{
height:25px;
line-height:25px;
background:url(images/ico_2.gif) 3px 10px no-repeat;
text-indent:13px;
border-bottom:1px #AACCEE dotted;
}
.newsbox dl dd ul li a{
color: #00599B;
font-size:13px;
float:left;
}
.newsbox dl dd ul li span {
color: #666666;
float:right;
padding-top:5px;
font:normal 11px Tahoma;

}
</style>
</head>
<body>
<div class="newsbox">
<dl class="margintop5">
<dt>军事<a href="/html/mil">更多</a></dt>
<dd>
<ul>
<li><a href="/html/mil/article.aspx?id=76">印度国产钢材母将于12月铺设钢材龙骨过关印</a>09-03-17</li>
<li><a href="/html/mil/article.aspx?id=75">印度军官嫌薪资低纷纷退役严重影响军队战斗</a>08-12-01</li>
<li><a href="/html/mil/article.aspx?id=74">印度海军将派军舰在亚丁湾打击海盗保护商船</a>08-12-01</li>
<li><a href="/html/mil/article.aspx?id=73">印度空军自称已进入世界强大空军行列(组图)</a>08-12-01</li>
<li><a href="/html/mil/article.aspx?id=72">印将在印中边境建隧道网防核生化攻击(组图)</a>08-12-01</li>
<li><a href="/html/mil/article.aspx?id=71">印度外长宣称对中国达旺地区拥有主权(组图)</a>08-12-01</li>
</ul>
</dd>
</dl>
<dl class="margintop5">
<dt>体育<a href="/html/sports">更多</a></dt>
<dd>
<ul>
<li><a href="/html/sports/article.aspx?id=301">费德勒望延续美网完美状态 澳网夺冠开启新赛</a>08-12-04</li>
<li><a href="/html/sports/article.aspx?id=300">桑神点评男网四巨头 小德穆雷与牛豆仅一步之</a>08-12-04</li>
<li><a href="/html/sports/article.aspx?id=299">埃德博格预测穆雷明年首夺大满贯 纳豆王位成</a>08-12-04</li>
<li><a href="/html/sports/article.aspx?id=298">视频:纳豆获马德里国际体育奖 被赞是年轻人</a>08-12-04</li>
<li><a href="/html/sports/article.aspx?id=297">桑神获元老赛开门红 麦肯罗称其可以和费纳抗</a>08-12-04</li>
<li><a href="/html/sports/article.aspx?id=296">桑神欲重回全英俱乐部 称美欲返No.1至少要5</a>08-12-04</li>
</ul>
</dd>
</dl>
<dl class="margintop5">
<dt>娱乐<a href="/html/ent">更多</a></dt>
<dd>
<ul>
<li><a href="/html/ent/article.aspx?id=200">《叶问》 成国家广电总局重点推荐年末唯一功</a>08-12-04</li>
<li><a href="/html/ent/article.aspx?id=199">黄立行与旧绯闻女友“上床”重温旧梦（图）</a>08-12-04</li>
<li><a href="/html/ent/article.aspx?id=198">黎明亮相上海揭幕“梅兰芳扮相”新蜡像(图)</a>08-12-04</li>
<li><a href="/html/ent/article.aspx?id=197">《聊斋》片尾曲《白狐》被认定侵权 并赔偿1</a>08-12-04</li>
<li><a href="/html/ent/article.aspx?id=196">叶熙祺处女EP造型曝光  练舞以蔡依林为</a>08-12-03</li>
<li><a href="/html/ent/article.aspx?id=195">《叶问》瞄准大学生市场 三大原因逐个解析(</a>08-12-03</li>
</ul>
</dd>
</dl>
<dl class="margintop5">
<dt>科技<a href="/html/tec">更多</a></dt>
<dd>
<ul>
</ul>
</dd>
</dl>
</div>
</body>
</html>

作者: 随风缘发布时间: 2009-03-18

dl dt dl在html布局上感觉比用div嵌套更合理啊

作者: longxinhe 发布时间: 2009-03-18

dl dt dd和div布局的比较

热门阅读

热门下载