css 里面的 dt,dd 用完了这些标签还有样式没写咋办呢,可不可以在一个class里实现?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-03-24 16:02:34 1657 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>

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

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:12:57

    用css3的圆角实现非常简单

    把html代码改成
    
    <div id="info">
    这是圆角
    </div>
    把你的css代码全部删掉,然后替换成
    
    #info {
        border-radius: 5px;
        border:1px solid #ccc;
    }

    但是,ie9以下不支持这种效果

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57013浏览量 回答数 19

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49899浏览量 回答数 43

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47123浏览量 回答数 19

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146084浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47251浏览量 回答数 15

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305721浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80502浏览量 回答数 13

20

回答

【Java学习全家桶】1460道Java热门问题,阿里百位技术专家答疑解惑

管理贝贝 2018-05-31 13:57:45 46079浏览量 回答数 20

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47455浏览量 回答数 46

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48757浏览量 回答数 3
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载