中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网站建设
中国福网
招聘求职
中国互联
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> DL.DT.DD的布局简单例子

DL.DT.DD的布局简单例子 (1)

来源:中国设计秀    作者:子鼠    点击:939     加入收藏
关键字:DIV+CSS布局 DL.DT.DD


这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方:

1、如果用UL还布局,右边一栏比较麻烦;
2、文字外边的边框自适应比较麻烦;
3、很可能要定死高度;

所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是合理的:

1、布局合理一些;
2、将来扩展很方便;
3、CSS一定很少;

试着写了写,看一看还行!在可控范围内!

布局布分当然不用说了:
程序代码
<h1>标题</h1>
<div>
  <dl>
    <dt><a href="32">·博客里的文章是我自己写的!</a></dt>
    <dd>作者:张三</dd>
  </dl>
  <dl>
    <dt><a href="3232">·博客里的文章是我自己写的!</a></dt>
    <dd>作者:张三</dd>
  </dl>
  <dl>
    <dt><a href="3232">·博客里的文章是我自己写的!</a></dt>
   <dd>作者:张三</dd>
  </dl>...........
</div>


CSS部分:

程序代码
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>



看一下效果:

HTML代码
点击下面的运行,可预览代码效果:

        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

如果说定宽?
点击下面的运行,可预览代码效果:

        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

相关的例子,我以前也写过一个:
0
顶一下
[1] [2]
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口