`
joerong666
  • 浏览: 418107 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

DivCSS布局实例 用dl dt dd来制作列表

阅读更多

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

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

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

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




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

  布局布分当然不用说了:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<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部分:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]

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


  看一下效果:

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

 

分享到:
评论

相关推荐

    CSS 之dl dt dd模拟表格实例代码

    本文介绍了如何使用`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`元素结合CSS来模拟表格布局。`&lt;dl&gt;`代表定义列表(Definition List),`&lt;dt&gt;`用于定义术语或名词(Definition Term),而`&lt;dd&gt;`则用于描述或定义这些术语(Definition ...

    HTML+CSS+JS制作一个迅雷看看电影网页设计实例 ,排版整洁,内容丰富,主题鲜明,简单的网页制作期末作业

    - 通过 `&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;` 标签组织了迅雷下载链接的信息,这些标签常用于定义描述列表。 综上所述,这个网页设计实例不仅包含了丰富的HTML结构,还涉及到了CSS和JavaScript的基本运用,是一个非常适合初学者...

    学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板

    - **页面种类**:包含了多个页面,每个页面都有不同的内容和功能,如首页、产品列表页、详情页等,这有助于学生理解不同类型的网页设计和制作流程。 - **元素使用**:除了基本的文本和图片元素外,还包含了一些高级...

    代码实例之纯CSS代码实现翻页效果

    代码实例之纯CSS代码实现翻页效果 在本篇文章中,我们将探索如何使用纯CSS来实现翻页效果。翻页效果是网页中非常常见的交互效果,它可以提高用户体验和网站的可用性。在本例中,我们将使用CSS来实现翻页效果, 无需...

    前端练习01-前端-HTML实例练习

    此外,`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`组合用于定义列表,常用于术语解释。 8. **表格**:`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`(数据单元格)用于创建表格。`&lt;caption&gt;`添加表格标题,`&lt;colgroup&gt;`和`...

    HTML+CSS学习与练习.docx

    在布局方面,常见的局部结构有Div-ul-li、Div-dl-dt-dd、Table-tr-td以及Form-table-tr-td,分别适用于导航、图文混编、数据展示和表单布局。CSS引入有三种方式:行内样式(直接在HTML元素中定义)、内部样式(在中...

    HTML教程 文档

    ... ...它通过一系列的标签来组织网页内容,并使其...这个实例展示了如何使用基本标签来构建文档结构,并使用格式化标签来展示文本和列表等内容。通过这些基础知识的学习,你可以开始创建简单的网页并逐步深入HTML的学习。

    HTML教程.rar

    - `&lt;dl&gt;`:定义列表,`&lt;dt&gt;`定义术语,`&lt;dd&gt;`定义解释。 5. HTML表单 用于收集用户输入,主要涉及`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;option&gt;`等标签。`&lt;input&gt;`标签可以有不同的类型,如text...

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    在本实例中,我们讨论如何使用jQuery来创建一个简单的折叠菜单,这种菜单也被称为折叠面板。这个效果允许用户点击菜单项来展开或隐藏相关内容,从而提高网页的交互性和用户体验。以下是如何实现这一功能的关键点: ...

    JS简单实现无缝滚动效果实例

    首先,HTML部分定义了页面结构,包含一个`&lt;div&gt;`元素,其ID为"marquee",它包裹着一个`&lt;dl&gt;`列表,列表中包含一个`&lt;dt&gt;`和一个空的`&lt;dd&gt;`。`&lt;dt&gt;`用于存放原始内容,而`&lt;dd&gt;`用于存放复制的内容,以便于实现滚动效果...

    PHP必备基础:HTML基本元素参考手册

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`则用于定义描述列表。 在布局方面,`&lt;div&gt;`标签是块级元素,常用于组合其他元素或作为CSS布局的基础。而`&lt;span&gt;`是内联元素,用于在行内应用样式或组合文本。 HTML5引入了一些新的元素,...

    html教案.rar

    5. **列表类型**:讲解无序列表`&lt;ul&gt;`和`&lt;li&gt;`,有序列表`&lt;ol&gt;`和`&lt;li&gt;`,以及定义列表`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`的用法。 6. **表格**:解释如何创建和格式化`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;th&gt;`,`&lt;td&gt;`等标签,用于数据展示...

    html入门资料,新手必看

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`用于创建定义列表,常用于术语解释。 七、容器与布局 `&lt;div&gt;`是通用的块级元素,常作为内容分组和布局控制的容器。配合CSS,可以实现更复杂的页面布局。`&lt;span&gt;`则是内联元素,用于在行内...

    最基本的HTML大全适合初学者

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`用于定义列表。 4. **图像**:`&lt;img&gt;`标签用于插入图片,其`src`属性指定图像的URL,`alt`属性提供替代文本。 5. **表格**:`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`(数据单元格)和`&lt;th&gt;`(表头...

    Dreamweaver CC 从入门到高手视频教程下载第3章 HTML基础.zip

    - `&lt;dl&gt;`定义定义列表,`&lt;dt&gt;`为术语,`&lt;dd&gt;`为解释。 5. **区块元素与内联元素**: 区块元素如`&lt;div&gt;`、`&lt;p&gt;`会占据整行宽度,而内联元素如`&lt;span&gt;`、`&lt;a&gt;`只占据内容的宽度。通过CSS,可以调整元素的显示方式。...

    jQuery模拟html下拉多选框的原生实现方法示例

    为了实现下拉效果,我们需要编写CSS样式来控制这些元素的外观和布局: ```css .dropdown { position: absolute; top: 50%; transform: translateY(-50%); } .dropdown dd, .dropdown dt { margin: 0px; ...

    Html参考手册下载

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`则用于定义描述列表。 6. HTML表单:`&lt;form&gt;`元素用于创建表单,`&lt;input&gt;`用于各种输入类型(文本、密码、复选框等),`&lt;select&gt;`和`&lt;option&gt;`用于下拉列表,`&lt;textarea&gt;`用于多行文本输入,...

    新手学习html教材大全

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`用于定义列表。 5. **表格**:`&lt;table&gt;`创建表格,`&lt;tr&gt;`定义行,`&lt;th&gt;`定义表头单元格,`&lt;td&gt;`定义常规单元格。`&lt;caption&gt;`添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`用于表格列的样式。 6. **...

    html中文语法教程

    `&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`则用于定义描述列表。 8. 链接样式:通过CSS(Cascading Style Sheets)可以实现对HTML元素样式的控制。`&lt;style&gt;`标签可直接在文档中定义样式,或者使用`&lt;link&gt;`引入外部CSS文件。选择器如`...

Global site tag (gtag.js) - Google Analytics