失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html图文混排结构dt dl dt dd实现的图文混排(左边图片右边文字)

html图文混排结构dt dl dt dd实现的图文混排(左边图片右边文字)

时间:2024-08-09 00:42:45

相关推荐

html图文混排结构dt dl dt dd实现的图文混排(左边图片右边文字)

/p>

Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

body{font-family:Arial; font-size:12px; color:#000000; margin:0

auto; padding:0; border:0;}

p{ margin:0; padding:0;}

.color{color:#FF3300;}

a.left{color:#414141;text-decoration:none;cursor:pointer;}

a.left:visited{color:#414141;text-decoration:none;cursor:pointer;}

a.left:hover{color:#FF3300;text-decoration:none;cursor:pointer;}

.tejia_cont{height:164px!important; height:169px;

background-color:#FFFFFF; margin-left:4px; margin-right:4px;

text-align:left;}

.tejia_cont ul, li,dl,dd,dt { margin:0; padding:0;

list-style:none;}

.tejia_cont ul dl{padding-left:30px}

.tejia_cont ul dd{ width:72px;float:left; text-align:left;}

.tejia_cont ul dt{float:left; padding-left:10px;

padding-bottom:8px; width:90px; overflow:auto;}

.tejia_cont_padding{padding-bottom:15px; }

.tejia_cont_price{float:left; padding-left:10px; width:110px;

line-height:22px;}

a.old_price{ text-decoration:line-through;

color:#999999;font-family:Arial, Helvetica, sans-serif;}

a.old_price:hover{ text-decoration:line-through;

color:#FF3300;font-family:Arial, Helvetica, sans-serif;}

a.new_price{ color:#FF3300; font-weight:bold;

text-decoration:none;font-family:Arial, Helvetica,

sans-serif;}

a.new_price:hover{

text-decoration:underline;font-weight:bold;font-family:Arial,

Helvetica, sans-serif;}

.price_padding{padding-left:10px;}

.price_old{color:#999999;}

.line_through { text-decoration:line-through; font-family:Arial,

Helvetica, sans-serif;color:#999999;}

.zhanghao{width:509px!important; width:515px;}

.zhanghao_title{ background-color:#fff7e5; border:1px solid

#f4d58c; font-weight:bold; height:25px;line-height:25px;

text-align:left; padding-left:10px;color:#666666;}

.zhanghao_content{text-align:left;border:1px solid #f4d58c;

border-top:none; height:160px!important; height:177px;padding:0;

margin:0; padding-top:10px; padding-bottom:5px;}

.zhanghao ul,li,dl,dt,dd{margin:0; padding:0; list-style:none;

text-align:left;}

.zhanghao ul li{ float:left;width:165px; padding-bottom:15px;

margin-left:5px!important;margin-left:3px;}

.zhanghao ul li dt img{float:left; width:72px;}

.zhanghao ul li dd{width:85px; float:left; padding-left:3px;}

.zhanghao h4{margin:0; padding:0;line-height:18px; font-size:12px;

font-weight:normal; text-align:left; padding-left:8px;

padding-right:8px;}

.zhanghao_one{width:169px; height:47px; float:left;

text-align:left;padding-top:5px; padding-bottom:5px;

margin-right:1px;}

.zhanghao_img{float:left;text-align:left; width:72px;

height:48px;margin-right:3px;}

.zhanghao_con{ line-height:17px;}

*html .zhanghao_con {text-align:left;

padding-right:2px;line-height:17px;}

*+html .zhanghao_con {text-align:left;

padding-right:2px;line-height:17px; }

style="float:left;

width:72px;margin-left:30px;">

class="price_old">原价

class="price_padding">会员价

>5

class="price_padding">

class="new_price">¥4.25

class="clearit">

>

class="zhanghao">

class="zhanghao_title">帐号交易

src="images/zhengtu.gif" width="72" height="48"

border="0">

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

src="images/zhengtu.gif" width="72" height="48" border="0"

>

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

src="images/zhengtu.gif" width="72" height="48" border="0"

>

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

src="images/zhengtu.gif" width="72" height="48" border="0"

>

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

src="images/zhengtu.gif" width="72" height="48"

border="0">

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

src="images/zhengtu.gif" width="72" height="48" border="0"

>

target="_blank"

class="left">久游帐号(内含5万休闲币

7.8折

售价136

充值方式为代充,您购买成功后,我们将在1—48小时内为您完成充值!充值方式为代充,您购买成功后,我们将在1—48小时内为您完成充值!

释义:

dl:

Definition List (定义列表)

dt:

Definition Term (定义项)

dd:

Definition Description (定义描述)

作用:

dl表示一个定义列表

dt表示一个定义的名称,可以理解为词典中的条目

dd 表示对一个定义的解释,可以理解为词典中对条目的解释。

注意:

这三个标签必须同时出现,而且dt,dd必须嵌套在dl内。dt和dd是同级关系,并不是嵌套关系。dd必须紧跟在dt之后,dd前可以有多个dt,但dd前面必须至少有一个dt。dt后面至少需要有一个dd。dt和dd是多对多的关系。

比较:

和dl类似的还有UL(Unordered List.),OL(Ordered List)。

语义方面:

从英文解释中最能说明这三者之间的差别了。dl是定义列表,UL是无序的列表,OL是有序的列表。

表现方面:

dl会使每个dd产生缩进

UL会在每个LI前出现一个点

OL会在LI前出现序号,如1,2,3,….

如果觉得《html图文混排结构dt dl dt dd实现的图文混排(左边图片右边文字)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。