爆牙兄的CSS题目解答

最新推荐文章于 2024-07-18 13:52:01 发布

weixin_30500105

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量95

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/deafcat/archive/2009/07/13/1522540.html

版权

其实这道题我年初就做出来过。今天想看看自己这半年来CSS有多少进步，所以又找到这题，写了一下代码。

之前的代码跟现在的代码相比，解决思路是一样的，不同的是，

时间短了，这次我差不多用了2个小时（其中包括一些图片截取工作），而以前从出第一个结果到后面为了兼容IE6，搞了差不多4个小时。
代码规整多了，margin、padding不再那么不清晰
为了兼容IE6使用的HACK少了，只使用了2次 !important，可以说成功绕过了一些问题。最可喜的是，这种绕过是一种很自然的绕过，我甚至没有碰到什么兼容性问题，不需要花时间改变思路。

HTML代码部分如下：

Code
<!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>
    <title>泡泡对话</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        body { font-size: 12px; background: #f5f5f5; text-align: center; }
        #outContainer { background: #fff; border: 1px solid #dedede; width: 540px; height: 340px; margin: 20px auto; }
        #bubbleTalk { margin: 50px auto; overflow: hidden; background: #f5f5f5; height: 308px; width: 500px; overflow-y: scroll; margin: 20px auto; border: solid 1px #dedede; }
    </style>
    <link href="CSS/bubbletalk.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="outContainer">
        <div id="bubbleTalk">
            <div class="smshistory">
                <dl class="vhe hreview">
                    <dt class="reviewer vcard"><a class="fn nickname" href="">陈长君</a> <span class="dtreviewed"
                        title="20080616T1212">2008-06-16 12:12:00</span> </dt>
                    <dd class="description">
                        全兼容。IE定宽，非IE自适应。如果文本输入<br />
                        超过一行（字数超过，回车换行），dl的<br />
                        class:vhe或vme（v表示垂直适应，he和me<br />
                        是对方与自己），否则dl的class：he或me。</dd>
                </dl>
                <dl class="me hreview">
                    <dt class="reviewer vcard"><a class="fn nickname" href="">爆牙齿</a> <span class="dtreviewed"
                        title="20080616T1212">2008-06-16 12:12:00</span> </dt>
                    <dd class="description">
                        ok</dd>
                </dl>
                <dl class="me hreview">
                    <dt class="reviewer vcard"><a class="fn nickname" href="">爆牙齿</a> <span class="dtreviewed"
                        title="20080616T1212">2008-06-16 12:12:00</span> </dt>
                    <dd class="description">
                        全兼容。IE定宽，非IE自适应。如果文本输入</dd>
                </dl>
                <dl class="he hreview">
                    <dt class="reviewer vcard"><a class="fn nickname" href="">陈长君</a> <span class="dtreviewed"
                        title="20080616T1212">2008-06-16 12:12:00</span> </dt>
                    <dd class="description">
                        全兼容。IE定宽，非IE自适应。如果文本输入</dd>
                </dl>
                <dl class="vme hreview">
                    <dt class="reviewer vcard"><a class="fn nickname" href="">爆牙齿</a> <span class="dtreviewed"
                        title="20080616T1212">2008-06-16 12:12:00</span> </dt>
                    <dd class="description">
                        全兼容。IE定宽，非IE自适应。如果文本输入<br />
                        多行</dd>
                </dl>
            </div>
        </div>
    </div>
</body>
</html>

泡泡的css代码如下：

Code
.smshistory { width: 478px; text-align: left; float: left; overflow:hidden; }
.smshistory dl { width: 470px; clear: both; float: left; }
.hreview { margin: 5px; }
.reviewer { }
.vcard { }
.fn { }
.nickname { color: #069; text-decoration: none; }
.dtreviewed { color: #dedede; }
.description { }
.he dd, .me dd { height: 32px; line-height: 32px; }
.me { text-align: right; background: url(../images/me_right.png) right bottom no-repeat; }
.me .description { margin-right: 22px !important; margin-right: 11px; padding-left: 14px; background: url(../images/me_left.png) left no-repeat; float: right; }
.he { text-align: left; background: url(../images/he_left.png) left bottom no-repeat; }
.he .description { margin-left: 22px !important; margin-left: 11px; padding-right: 14px; background: url(../images/he_right.png) right no-repeat; float: left; }
.vhe { text-align: left; background: url(../images/vhe_bottom.png) 1px bottom no-repeat; }
.vhe dt { background: url(../images/vhe_top.png) 7px bottom no-repeat; height: 30px; }
.vhe .description { background: url(../images/vhe_middle.png) 7px no-repeat; padding-left:16px; background-repeat: repeat-y; margin-bottom: 12px;}
.vme { text-align: right; background: url(../images/vme_bottom.png) 100% bottom no-repeat; }
.vme dt { background: url(../images/vme_top.png) 97% bottom no-repeat; height: 30px; }
.vme .description { background: url(../images/vme_middle.png) 97% repeat-y; text-align: left; margin-bottom: 12px; padding-left: 208px; }

这段不能动的泡泡HTML代码中，适用了“微格式”，可惜到现在我也没有去深入研究它。

完整的demo下载

转载于:https://www.cnblogs.com/deafcat/archive/2009/07/13/1522540.html

weixin_30500105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
爆牙兄的CSS题目解答

其实这道题我年初就做出来过。今天想看看自己这半年来CSS有多少进步，所以又找到这题，写了一下代码。之前的代码跟现在的代码相比，解决思路是一样的，不同的是，时间短了，这次我差不多用了2个小时（其中包括一些图片截取工作），而以前从出第一个结果到后面为了兼容IE6，搞了差不多4个小时。代码规整多了，margin、padding不再那么不清晰为了兼容IE6使用的HACK少了，只使用了2...
复制链接

扫一扫