`

dl dt dd实现制作列表

CSSXHTMLHTML浏览器Blog 
阅读更多 
<!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=gb2312" />
<title>选项卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}

dl,dt,dd {
margin:0;
padding:0; /* 清除浏览器默认的margin和padding值 */
}
 .tabContentBox {
width:450px;
height:130px;
border:1px solid #069;
position:absolute;
top:22px;
left:0;
color:#999;
line-height:2em;
margin:5px;
}
/* 以下是对各项内容的CSS定义 */

 dt,dd{
border-bottom: 1px dotted #9cf;
float:left;
color:#039;
}
 dt {
width:50%;
font-size:1.1em;
margin-left:5px;
padding-left:12px;
background: url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px;
}
 dd{
width:20%;
}
-->
</style>
</head>
<body>

<div class="tabContentBox">
		<dl class="tabContent blog">
			<dt>手工杀毒的一些心得！</dt>
			<dd class="name">QUESTER</dd>
			<dd>2009-01-10</dd>
			<dt>Photoshop 的真人动漫效果</dt>
			<dd class="name">snl</dd>
			<dd>2009-01-10</dd>
			<dt>网站内容结构化探讨</dt>
			<dd class="name">豆猫</dd>
			<dd>2009-01-10</dd>
			<dt>Photoshop制作一张旧的黑桃A扑克牌</dt>
			<dd class="name">greengnn</dd>
			<dd>2009-01-10</dd>
			<dt>Photoshop CS3教程</dt>
			<dd class="name">amethyst01</dd>
			<dd>2009-01-10</dd>
		</dl>
	</div>
</body>
</html>

 

分享到：
| JS实现div圆弧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    dl dd dt实现的图文混排效果

    以上就是使用`&lt;dl&gt;`, `&lt;dd&gt;`, 和 `&lt;dt&gt;` 实现图文混排的基本步骤和样式调整。根据实际需求，你可以进一步调整样式，如间距、字体大小、颜色等，以适应不同的设计风格。记得在实际应用中，要确保代码的语义化，同时...

    html css js网页制作实例 dldtdd实现列表功能

    html css js网页制作实例 dldtdd实现列表功能

    dl、dt、dd列表标签实例

    /dt&gt;用来创建列表中的上层项目，&lt;dd&gt;&lt;/dd&gt;用来创建列表中最下层项目，&lt;dt&gt;&lt;/dt&gt;和&lt;dd&gt;&lt;/dd&gt;都必须放在&lt;dl&gt;&lt;/dl&gt;标志对之间。看一下下边的例子您就会明白了：创建一个普通列表 &lt;html&gt; &lt;head&gt; &lt;...

    dl,dt,dd在什么时候适合使用呢？

    dl：Definition list 定义列表 dt：Definition title 定义标题 dd：Definition Description 定义描述 dt里是放置信息标题的，dd则是这个信息的简单概要的描述， 也就是说一个dt对应有一个dd来描述它 dd里面的内容...

    DL-Dt-DD(做表格Css实现)

    本文将深入探讨如何使用DL-DT-DD组合来实现表格效果，并对比与使用UL的方式。 **DL-DT-DD元素解析** `&lt;dl&gt;`是定义列表（Description List）的标签，它用于定义一个名词或术语的集合，通常与描述或解释相关的术语对...

    HTML的dl、dt、dd标记制作表格对决Table制作表

    HTML中的`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;` 标签是用于创建自定义列表的元素，这种列表主要用于定义术语和描述，而不仅仅是显示数据。与传统的`&lt;table&gt;`标签相比，它们在某些场景下可以提供更语义化的解决方案，尤其是在...

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

    ### 使用DL、DT、DD实现左右布局的知识点详解 #### 一、背景介绍与问题提出 在网页设计中，常见的布局需求之一就是实现左文右图或者左标题右描述的效果。这种布局方式不仅美观，还能有效地提升用户体验。本文将通过...

    CSS教程:用dl dt dd来制作列表

    总的来说，这个教程展示了如何使用`&lt;dl&gt;`, `&lt;dt&gt;`, 和 `&lt;dd&gt;`元素创建自定义列表，并通过CSS实现特定的样式和布局，这对于那些需要更复杂列表结构的网页设计来说非常有用。同时，这也是一种避免过度依赖特定布局技术...

    HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc

    以下将详细介绍HTML列表中的一些主要元素：`&lt;dl&gt;`, `&lt;dt&gt;`, `&lt;dd&gt;`, `&lt;ul&gt;`, `&lt;li&gt;`, 和 `&lt;ol&gt;` 的区别及应用。 1. **无序列表（Unordered List）** 无序列表通常用于显示不需按特定顺序排列的项目。它使用`&lt;ul&gt;`...

    html 标签 dl dt dd使用说明

    dl：定义列表 dt：定义标题 dd：定义描述 dt里是放置信息标题的，dd则是这个信息的简单概要的描述， 也就是说一个dt对应有一个dd来描述它 dd里面的内容可以是任意的，图片、文本甚至是视频或音频 多个类似的dt和dd...

    网页制作小技巧 dl dt dd标签用法

    在实际网页制作中，`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`的组合可以用于创建术语表、技术文档、产品特性介绍等场景。它们使得信息层次清晰，阅读体验良好，特别适合展示专业领域内的知识结构。同时，由于这些标签遵循语义化原则，...

    用标准dl,dt,dd标签抛弃table列表

    使用dl、dt、dd的数据列表： ```html &lt;dl&gt; &lt;dt&gt;Name:&lt;/dt&gt; &lt;dd&gt;Squall Li&lt;/dd&gt; &lt;dt&gt;Age:&lt;/dt&gt; &lt;dd&gt;23&lt;/dd&gt; &lt;!-- 更多dt和dd --&gt; &lt;/dl&gt; ``` 对应的CSS： ```css dl { margin-bottom: 50px; } dl dt { ...

    dl,dt,dd在什么时候适合使用呢

    ### 使用dl、dt、dd元素的情境分析 在HTML中，`dl`、`dt`、`dd`是一组用于创建定义列表（Definition List）的标签。这些元素可以帮助开发者更清晰地组织信息，并且在语义上具有明确的意义。下面将详细介绍这三种...

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

    贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0 CSS: 复制代码代码如下: dl,dt,dd{ margin:0; background:#fff5fa; font-size:14px; } dl{ margin:0 ...

    03_列表-定义列表-dl-dt-dd.html

    03_列表-定义列表-dl-dt-dd

    div+dl+dt+dd图文混编

    对于初学HTML的同学有帮助，参考参考……

Magicbox
Global site tag (gtag.js) - Google Analytics