您好,匿名用户
随意问技术百科期待您的加入

css 里面的 dt,dd 用完了这些标签还有样式没写咋办呢,可不可以在一个class里实现?

+1 投票

贴一段CSS代码:

<style type="text/css">
#info {height:450px;}
dl.bot_rgt {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; margin:5px 0 0 50px; padding:0; float:left; margin-right:10px; width:40%; display:inline;}
dl.bot_rgt dt {background:transparent url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;}
dl.bot_rgt dd {background:#eee url(img/c_bl.gif) bottom left no-repeat; padding:0; margin:0;}
dl.bot_lft {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; margin:5px 0; padding:0; float:left; margin-right:10px; width:40%;}
dl.bot_lft dt {background:transparent url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;}
dl.bot_lft dd {background:#eee url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;}
dl.top_rgt {background:#eee url(img/c_bl.gif) bottom left no-repeat; margin:5px 0 0 50px; padding:0; float:left; margin-right:10px; width:40%; display:inline;}
dl.top_rgt dt {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; padding:10px; text-align:center; color:#fff;}
dl.top_rgt dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;}
dl.top_lft {background:#eee url(img/c_bl.gif) bottom left no-repeat; margin:5px 0; padding:0; float:left; margin-right:10px; width:40%;}
dl.top_lft dt {background:#7f7f9c url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;}
dl.top_lft dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;}
dd p {margin:0; padding:10px; line-height:1.3em;}
</style>

里面的dl.bot_rgt是实现圆角的代码,可大家仔细看下,这里还差了一个脚,右下角的圆角没有实现的,而对应的“dl.top_lft dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;}”这个就实现了。

不知道dd,dt,这些东西该如何修改才能实现右下角这个圆角。是不是还要增加个其他的样式,比如dl之类的?

现在我不知道怎么在源代码里加入这个:

<div id="info">
<dl class="bot_rgt">
<dt>BOTTOM RIGHT SQUARE CORNER</dt>
<dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd>
</dl>

请知道的大哥大姐帮个忙了。。。

用户头像 提问 2012年 12月1日 @ Dante 上等兵 (290 威望)
分享到:

1个回答

0 投票
dl {
    border-radius: 5px;
    border:1px solid #ccc;
}
用户头像 回复 2012年 12月1日 @ Fizz 上等兵 (325 威望)
提一个问题:

相关问题

+1 投票
1 回复 44 阅读
0 投票
1 回复 59 阅读
0 投票
1 回复 34 阅读
0 投票
1 回复 24 阅读
用户头像 提问 2013年 11月14日 @ Kayle 上等兵 (277 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...