后使用快捷导航没有帐号？
查看: 1700|回复: 6
请问有人知道在dl标签中，只能有一个dt和多个dd，还是多个dt和多个dd呢？
可以有多个，例如&dl&
&dt&中国城市&/dt&
&dd&北京&/dd&
&dd&上海&/dd&
&dd&广州&/dd&
&dt&美国城市&/dt&
&dd&华盛顿&/dd&
&dd&芝加哥&/dd&
&dd&纽约&/dd&
&/dl&复制代码
请问这样子不会影响语义性么？
一楼就很好的给你展示出来了哈。
头像被屏蔽
提示: 作者被禁止或删除 内容自动屏蔽
我认为，有一个dt和N个dd.就好了。如何想再做一个。那么就再建一个dl好了。
本帖最后由 jtx000 于
09:57 编辑
dt和dd一般经常是用来制作表单用的。在网页制作中一个dl中一般采用多个dt和dd。例：
&tr&&dt&姓名&/dt& &dt&姓别&/dt & &dt &职业&/dt & &dt&爱好&/dt& &/tr& //这里显示的字体要粗一些
&tr&&dd&张三&/dd& &dd&男&/dd& &dd&自由&/dd& &dd&科学&/dd& &/tr& //比上面的字细些
&tr&&dd&李四&/dd&&&&dd&女&/dd&&&&dd&文教&/dd&&&&dd&音乐&/dd& &/tr& //同上
如上面的表单制作，一般得采用css样式进行调整。
有时第一行的&dt&标签不用，全采用&dd&来代替，如果想突出字体，直接插入&strong&&/strong&或&span&&/span&.有时也用class或id来定位，便于在css中控制。
Powered by Discuz!
& Comsenz Inc.求用CSS定义dl dd dt详细用法.
方法多多,看你怎么用,css 就不写了,光看 dl 你应该知道如何做了：-----------------------------------------------------------------------站内通知关于离退休人员领取中秋月饼的通知 本公司离退休人员可凭退休证于日前到工会张主任处领取月饼一盒,请相互通知转告!公司上市在职职工购买原始股优惠方案出台公司在职人员(不含退休及非正式工)每人可以市场发行价格的20%认购公司股票,每人最多认购10万股；--------------------------------------------你可以把下面 3 个或更多 dl 加上 float 属性浮动成一排横向的,并给 dl 上加相对定位属性,再把每个 dl 里面的 dt、dd 用绝对定位做成显示为 dd 图片在上,dt 图片名字在下面的形式定位在 dl 里面合适的位置,然后用 js 做横向循环无缝滚动图片代码.图片1图片2图片3
为您推荐：
扫描下载二维码14156人阅读
& dl&& /dl&用来创建一个普通的列表,
& dt&& /dt&用来创建列表中的上层项目，
&dd&& /dd&用来创建列表中最下层项目，
& dt&& /dt&和& dd&& /dd&都必须放在& dl&& /dl&标志对之间。
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
body{ font-size:12 line-height:1.8; width:900 margin:}
*{ margin:0; padding:0;}
h1{ background: font-size:14 height:35 line-height:35 padding-left:20 color:}
#Methods1{ width:900 background:# padding-bottom:20}
#Methods1 dl{margin:20px 0 0 20 float:
background:}
#Methods1 dt{width:180 margin:10 height:120 background:#FFF;}
#Methods1 dd{width:180 margin:0 0 10px 10 height:30 line-height:30 background:#FFFFFF; text-align:}
&h1&用法一：&/h1&
&div id=&Methods1&&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&dd&标题交给我DD&/dd&
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
body{ font-size:12 line-height:1.8; width:900 margin:}
*{ margin:0; padding:0;}
h1{ background: font-size:14 height:35 line-height:35 padding-left:20 color:}
h2{ font-size:14 height:35 line-height:35}
#Methods2{ width:900 background:#}
#Methods2 dl{width:860 height:200 margin:20 background:}
#Methods2 dt{width:180 height:180 float: margin:10 background:#FFF;}
#Methods2 dd{width:610 height:160 float: margin:10px 10px 10px 0; padding:10px 20 line-height:20 background:#FFFFFF; text-align:}
.More{ position: right:120 margin-top:10}
&h1&用法二：&/h1&
&div id=&Methods2&&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&h2&标题&/h2&
&span&内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--&/span&&br /&
&a class=&More&&了解更多...&/a&
&dt&&a href=&#&&图片交给我DT&/a&&/dt&
&h2&标题&/h2&
&span&内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--内容--&/span&&br /&
&a class=&More&&了解更多...&/a&
&wbr style=&LINE-HEIGHT: 28px&&&/wbr&
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
body{ font-size:12 line-height:1.8; width:900 margin:}
*{ margin:0; padding:0;}
h1{ background: font-size:14 height:35 line-height:35 padding-left:20 color:}
#Methods3 { width:880 background:# padding:20px 20px 20px 0;}
#Methods3 dl { float: width:350 height:170 padding:20 margin-left:20 background:}
#Methods3 dt {
float: width: 60}
#Methods3 dd { float: width: 290}
&h1&用法三：&/h1&
&div id=&Methods3&&
&dt&商品名称：&/dt&
&dd&&strong&[好大的一只啊] &/strong&忧惠：&span class=&red&&&em&8.5折&/em&&/span&&/dd&
&dt&商品简介：&/dt&
&dd&商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[&span class=&red&;&详细介绍&/span&]&/dd&
&dt&店铺地址：&/dt&
&dd&商品名称&/dd&
&dt&联系电话：&/dt&
&dd&9 &/dd&
&dt&商品名称：&/dt&
&dd&&strong&[好大的一只啊] &/strong&忧惠：&span class=&red&&&em&8.5折&/em&&/span&&/dd&
&dt&商品简介：&/dt&
&dd&商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[&span class=&red&;&详细介绍&/span&]&/dd&
&dt&店铺地址：&/dt&
&dd&商品名称&/dd&
&dt&联系电话：&/dt&
&dd&9&/dd&
&/html& &wbr style=&LINE-HEIGHT: 28px&&&/wbr&
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
body{ font-size:12 line-height:1.8; width:900 margin:}
*{ margin:0; padding:0;}
h1{ background: font-size:14 height:35 line-height:35 padding-left:20 color:}
#Methods4 { width:860 background: padding:20 text-align:}
#Methods4 dl{ width:820 background: padding:20
.titles{ float: width:205 background:#999; height:30 line-height:30}
.titles1-1{ float: width:205 height:50 background:# border-bottom:dashed black 1}
.bg{ background:#}
strong{ font-weight:}
&h1&用法四：&/h1&
&div id=&Methods4&&
&dt class=&titles&&&strong&商品图片&/strong&&/dt&
&dd class=&titles&&&strong&商品名称&/strong&&/dd&
&dd class=&titles&&&strong&商品介绍&/strong&&/dd&
&dd class=&titles&&&strong&商品价格&/strong&&/dd&
&dt class=&titles1-1 bg&&图片交给我DT&/dt&
&dd class=&titles1-1 bg&&商品名称商品名称&/dd&
&dd class=&titles1-1 bg&&商品介绍商品介绍&/dd&
&dd class=&titles1-1 bg&&商品价格商品价格&/dd&
&dt class=&titles1-1&&图片交给我DT&/dt&
&dd class=&titles1-1&&商品名称商品名称&/dd&
&dd class=&titles1-1&&商品介绍商品介绍&/dd&
&dd class=&titles1-1&&商品价格商品价格&/dd&
&dt class=&titles1-1 bg&&图片交给我DT&/dt&
&dd class=&titles1-1 bg&&商品名称商品名称&/dd&
&dd class=&titles1-1 bg&&商品介绍商品介绍&/dd&
&dd class=&titles1-1 bg&&商品价格商品价格&/dd&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：96345次
积分：1236
积分：1236
排名：千里之外
原创：16篇
转载：38篇
评论：37条
(1)(1)(1)(2)(1)(1)(1)(2)(1)(2)(5)(2)(3)(3)(4)(8)(1)(5)(3)(4)(1)(2)(1)(1)(1)人人网 - 抱歉
哦，抱歉，好像看不到了
现在你可以:
看看其它好友写了什么
北京千橡网景科技发展有限公司：
文网文[号··京公网安备号·甲测资字
文化部监督电子邮箱：wlwh@··
文明办网文明上网举报电话： 举报邮箱：&&&&&&&&&&&&