博客 - 标签：问题

纯css实现圆角带箭头的提示框效果(非css3)

2010-04-30 下午 - html/css/xml/xsl - -

实现效果如下图：

纯css实现圆角

这个方法并非我创，我也是以前在网上看到，记下了原理。今天有时间了，整理思路，写出代码！原文我不记得地址了，只记得原作者是google的前端工程师，方法很赞，尽管多了四个空标签(如果不要三角箭头，就只多了外层嵌套的两个标签)。

一般我处理圆角效果，都是弄一张图片，里面放4个角(或更多颜色的角)，利用浮动、相对定位再配合负margin来实现，也要多写空标签，而且是两对嵌套的标签(共4个)。这个方法固然好，毕竟用图片嘛，更美观，锐化效果要好。现在这个方法不用图片，从优化的角度分析，纯css不是更好吗！不过弊端还是有，只适合半径1-2像素的圆角，大了锯齿就出来啦～

<div class="rc_box1">
    <div class="rc_box2">
        <div class="rc_box3">
            oh~!my god god god god!
        </div>
    </div>
    <div class="ov1"></div>
    <div class="ov2"></div>
</div>
.rc_box1,.rc_box2,.rc_box3 { display:inline-block; *display:inline; *zoom:1; position:relative; border-style:solid; border-color:#ddd;}
.rc_box2,.rc_box3 { border-width:0 1px; *left:-2px; background-color:#f3f3f3;}
.rc_box1 { border-width:1px; line-height:1.5;}
.rc_box2 { margin:0 -2px;}
.rc_box3 { margin:1px -2px; padding:0 6px;}
.ov1,.ov2 { position:absolute; left:44%; overflow:hidden; width:0; height:0; border-left:6px dotted transparent; border-right:6px dotted transparent;border-top:6px solid transparent;}
.ov1 { top:26px; border-top-color:#ddd;}
.ov2 { top:25px; border-top-color:#f3f3f3;}

如果需要实现多种颜色，那么可以将定义颜色的样式属性抽出来，单独弄一个类，比如灰色，新建个gary类，放在最外层标签上，控制好颜色。想实现几种就建几种。代码如下：

第一个div添加gray这个类：

<div class="rc_box1 gray">
    ...
</div>

以下css添加至样式表最后一行，再将前面控制颜色的属性删掉：

.gray,.gray .rc_box2,.gray .rc_box3 {border-color:#ddd;}
.gray .rc_box2,.gray .rc_box3 { background-color:#f3f3f3;}
.gray .ov1 { border-top-color:#ddd;}
.gray .ov2 { border-top-color:#f3f3f3;}

4 Comments »

有序+发布时间+字数限制的新闻列表

2010-04-30 下午 - html/css/xml/xsl - -

新闻列表示意图

接手新项目，要写一个如上图的东西，简单做个说明：外层盒子固定宽度，文章标题字数超出即隐藏，并实现省略号(支持的浏览器)，日期位置跟随标题宽度。

难度不大，关键要了解各浏览器的特性。这个东西难点就在于时间元素上，我利用float+负margin来解决，兼容性也好，遗憾的是hack没少用，实属无奈啊！-_-!

下面贴出代码：

<div id="demo">
  <ol class="clearfix">
    <li><a href="#@">方大同5月8日广州开唱 不秀粤语最想和蔡琴合作</a><span>2008-03-14</span></li>
    <li><a href="#@">麻城杜鹃开的艳　奶茶歌声唱的亮</a><span>2008-03-14</span></li>
    <li><a href="#@">5月2日变形金刚助阵五月天</a><span>2008-03-14</span></li>
    <li><a href="#@">方大同5月8日广州开唱</a><span>2008-03-14</span></li>
    <li><a href="#@">刘若英上海个唱即将开演 设计独特处处有看点</a><span>2008-03-14</span></li>
    <li><a href="#@">五月天玛莎低调避庆生</a><span>2008-03-14</span></li>
    <li><a href="#@">4月24日五月天厦门演唱会 凛凛寒风激情不</a><span>2008-03-14</span></li>
    <li><a href="#@">任贤齐群星NOW翻成都 小齐家族两次登台</a><span>2008-03-14</span></li>
    <li><a href="#@">周华健与群星NOW翻成都</a><span>2008-03-14</span></li>
    <li><a href="#@">刘若英《在一起》发片首周成绩亮眼</a><span>2008-03-14</span></li>
  </ol>
</div>
#demo { font:12px/1.5 Arial;}
#demo ol { padding-left:23px; width:14em; background:url(num.gif) no-repeat 2px 6px;}
#demo li { clear:both; line-height:23px;}
#demo li a { float:left; _height:23px; _background:transparent; overflow:hidden; white-space:nowrap; _white-space:normal; max-width:14em; -o-text-overflow:ellipsis; text-overflow:ellipsis;}
#demo li span { float:left; _display:inline; _position:relative; width:70px; padding-left:10px; margin-right:-80px; font-size:11px; color:#999;}

css第4行， _background:transparent 解决IE6下“莫名”行高问题。

css第5行， _position:relative 解决IE6下该元素随外层宽度溢出隐藏。

css reset这里未提供，需自行添加。

用到图片一张：num.gif 打开后右键另存为！

3 Comments »

买黄金or买房

2010-01-19 上午 - 纯属扯淡 - - -

民国初年，一两黄金可以买二亩良田，五两黄金买北京一个四合院。一百年后的今天，一公斤的黄金等于25万元人民币，只能买北京四合院落的一个厕所。如果你在一百年前没有买四合院，而保存五两黄金，那你今天是一个非常贫穷的人。这么一比大家就可以理解，为什么我们中华民族有这种置产的观念。这种观念不是空穴来风，而是从历史资料来看，历朝历代，对于一个战乱颁仍的国家，房地产相对而言是比较保值的。为什么当我们经济碰到危机的时候，房地产价格总是涨。
黄金并不保险。

原文来自：郎咸平官方博客

2 Comments »

一个很愚蠢的问题！

2008-01-21 下午 - html/css/xml/xsl - -

　　今天一早，像往常一样的去上班。进了公司的门，打开电脑，给自己倒了一杯热开水，便开始工作。

　　这时问题就发生了，我打开我昨天写好的一个页子，发现面貌全非，我都快不认识它了，呵呵。赶紧查找原因，一头钻进了一行一行的代码，眼花了，虽然写的代码可读性还不算很差，时不时还会有个注释，但是代码太多太长了…

　　我又再次检查了一遍连接样式表的语句，最后我甚至把样式表直接嵌入到页面的<head>中,但是还是不行。一次又一次的测试刷新。情绪开始有点急躁….

　　没办法只有全部还原，回到最初起点。

　　再次打开样式表，发现代码比平时的要略大。我明白了，完全明白了。编码问题。页面是UTF-8，而样式表却是GB2312，这样怎能不出西西。好在问题得到解决……

　　白白浪费了我一个钟头的时间啊，我亲爱的时间啊！

　　希望大家以后在碰到类似问题时也要注意先看样式表与页面的编码。问题虽小，但越小的问题就越容易疏忽。

No Comments »