DL.DT.DD实现左右的布局简单例子第1/2页


这是今天有人发邮件问的一个问题,最开始的想法是用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>

看一下效果：

*{ 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;}

test

·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx

test

·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx
·我是女生！博客里的文章是我自己写的！
xxx

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

如果说定宽？

*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;width:100%}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ float:right}
h1{clear:both;font-size:14px;}
div{ width:500px; float:left;}

标题

·博客里的文章是我自己写的！
作者：张三
·博客里的文章是我自己写的！
作者：张三
·博客里的文章是我自己写的！
作者：张三
·博客里的文章是我自己写的！
作者：张三
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx

标题

·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx
·博客里的文章是我自己写的！
xxx

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

相关的例子，我以前也写过一个：

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • DL.DT.DD实现左右的布局简单例子第1/2页

    DL.DT.DD实现左右的布局简单例子第1/2页

    这是今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方: 1.如果用UL还布局,右边一栏比较麻烦: 2.文字外边的边框自适应比较麻烦: 3.很可能要定死高度: 所以,细细地看一看这个布局,想一想还是用DL.DT.DD作是合理的: 1.布局合理一些: 2.将来扩展很方便: 3.CSS一定很少: 试着写了写,看一看还行!在可控范围内! 布局布分当然不用说了: 复制代码 代码如下: <h1>标题</h1>  <div>    <

  • div+css布局必了解的列表元素ul ol li dl dt dd详解

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>--</li> <li>--</li> <li>--</li> </ol> 表现为: 1-- 2-- 3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>--</li> <li>--</li> </ul&

  • dl,dt,dd制作的CSS垂直菜单

    感觉跟ul和li有点类似,不过也算是一种新思路,源码如下: dl,dt,dd制作的CSS垂直菜单 #menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(file:///E|/ceshi/media/bottom.gif) no-repeat bottom left;} #menu dt {margin:0; padding: 10px; font-size: 1.4em; font-we

  • XHTML下用dl,dt,dd标签实现翻页的效果代码

    XHTML下用dl,dt,dd标签实现翻页的效果代码

    今天在标准之类的blog(http://www.aa25.cn)看到"纯CSS代码实现翻页" 的文章 dl { position:absolute; width:389px; height:154px; border:10px solid #eee; } dd { margin:0; width:389px; height:154px; overflow:hidden; } img { border:1px solid black } dt { position:absolute; r

  • Android TabLayout(选项卡布局)简单用法实例分析

    Android TabLayout(选项卡布局)简单用法实例分析

    本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个

  • 非常漂亮的Div+CSS布局入门教程第1/5页

    非常漂亮的Div+CSS布局入门教程第1/5页

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

  • 一个颜色轮换的简单例子

    一个颜色轮换的简单例子,使用三元运算子,使程序简练. 我们曾经在网站上看过一些表格单元格的背景颜色是隔行变化的,其实用下面一段很小的一段代码就可以实现: $color=(($coloralter++ %2)? "e0e0e0":"e8e8e8") ,即通过将变量累加和2取余,运用三元运算子来取得两个不同得颜色值. 示例如下: <html> <head> <title>test</title> <meta http

  • Python操作json数据的一个简单例子

    更多的信息,可以参考python内部的json文档: python>>> help(json) 或者官方文档: http://docs.python.org/library/json.html#module-json. 下面给出一个使用python解析json的简单例子: 复制代码 代码如下: #!/usr/bin/python import json #Function:Analyze json script #Json is a script can descript data st

  • WML的简单例子及编辑、测试方法第1/2页

    完成WAP服务器的建立和WAP浏览器的安装之后,我们接下来就可以使用WML语言来编写WAP网页或应用,并通过WAP服务器及浏览器进行调试.从本章开始我们将系统地学习WML语言,本章主要讲解WML语言的基础知识,下一章全面讲解WML的语法.标签和规则. 2.1 WML的简单例子及编辑.测试方法 无限标记语言WML(Wireless Markup Language)是一种基于扩展标记语言XML(Extension Markup Language)的语言,是XML的子集.它可以显示各种文字.图像等数据

  • springboot 1.5.2 集成kafka的简单例子

    本文介绍了springboot 1.5.2 集成kafka的简单例子 ,分享给大家,具体如下: 随着spring boot 1.5版本的发布,在spring项目中与kafka集成更为简便. 添加依赖 compile("org.springframework.kafka:spring-kafka:1.1.2.RELEASE") 添加application.properties #kafka # 指定kafka 代理地址,可以多个 spring.kafka.bootstrap-server

随机推荐