私人俱乐部 - 28star.com

HTML中的wbr软换行标签

fangle — Tue, 24 Jun 2008 10:40:55 +0800

<wbr />软换行
1.正常情况下<wbr />不起效，何为不正常，见下。
2.当文字长度超过外框显示宽度的时候，即溢出时。
3.游览器启动自动断行机制，各个游览器断行机制不同。比如ff3会在/前断行，ie7在/后断行等等。
4.当自动断行机制也无法避免溢出时，<wbr />起效，效果如<br />。 5.如果还是溢出的话，就只有溢出了。

可以说这个标签是最后的杀手锏，属于要么不出手，出手必伤人。

注：有些游览器不能有效识别<wbr />标签，所以不推荐使用
不过如果这些不支持的游览器却支持CSS2的:after伪类则可以用一下方法实现
<style>wbr:after { content: "\00200B"; }</style>
<div style="width:100px;">
a<wbr />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr />aa
</div>

实例如下：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

认领专用贴

fangle — Wed, 11 Jun 2008 23:17:07 +0800

网络中有很多很讽刺的事情
不知道从何时开始，我们都变老年痴呆了，每次都必须重新审视自己，认清自己。

在此我将无止境的认领自己，认领这块领地。

注：我才知道“title”有“所有权”的意思

1.鲜果认领号：BANG9E51DAF4C5D29A73F5DD9864XIANGUO
2.鲜果认领号：BANG4FF50E65454BDE33FFE31DC8XIANGUO

CSS样式应用优先级关系

fangle — Fri, 06 Jun 2008 11:14:25 +0800

原创内容！转载请保留作者名字和出处。
fangle，http://www.28star.com/blog/2008/06/06/css-priority.html

CSS(Cascading Style Sheets)样式的最终选择涉及到继承层叠顺序等，就好比人类世界的mozilla和ie家族模式。
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
注：样式表比html后载入

重要声明（!important）
[1位重要标志位]
div{
display:none !important;
display:block;
}
虽然按照顺序应该是使用后声明的display:block;，但是因为!important的缘故，所以最后使用的却是display:none;。
好比现任家族族长。可以定下某一个孩子为继承人，其他人无法反驳，反驳就一段胖揍。
1. 读者[1]（用户[2]）
2. 创作人员[3]（内容提供者[4]）
正常声明
[4位特殊性标志。点分四段（0.0.0.0），形式类似与ip地址]
有一些老式游览器使用3位特殊标志，也就是4位标示中的前两位合并。
样式表选择器支持类似文档数结构的层级选择，故特殊标志位随定义的选择器层级加权。
（每次给某个标志位加1，不带进位的哦）
优先级从左至右，前一段对后一段具有无可辩驳的压倒性优势。
（后一段就算无穷大也无法战胜前一段的1。）
就像贵族一样，家里有4个孩子，每个人都在成长中学习知识（有点修学分的感觉），自己的知识永远是自己的财富。
众所周知哥哥总比弟弟有一定的优势，不论地位或权利。
尤其在于次子们再优秀也无法替换长子接管家族，想篡位的时候可以只能让哥哥们消失了，嘿嘿。
1. 创作人员正常声明
  1. 内联样式[1.0.0.0]
    在html文档的元素中直接插入样式的
    就是在第一位标志位加1
    <div style=”display:none;”></div>
    在ie6中此优先级与id选择器同级
    族长的第一个孩子，不论好坏，出生就被内定为家族继承人。
    注：有特殊情况，ie6之前只有三位特殊标志位，内联样式[1.0.0]被合并到id选择器中[1.0.0]，且因为css文档比html后载入，所以后声明的会覆盖前面声明的。
    话说ie家族早年平定邪教的时候中了一个邪恶的诅咒：六子之长子。
    说的是一个持续了6代的诅咒，其中每代的长子必活不过家中第二个孩子成年之日。
    不过我觉得这个诅咒下的比较仓促，所以诅咒只在长子和家中第二个孩子间发生，和其他孩子没关系，所以只要舍弃第二个孩子就可以了。
  2. id选择器[0.1.0.0]
    就是在第2位标志位加1
    应用于对应id的元素，css中用“#”后跟id来标记。
    #header{
    display:none;
    }
    <div id=”header“></div>
    二儿子虽不是第一继承人，当至少可以去当Identity主管（用这个世界的话说就是做做人事管理，hr），毕竟偌大一个家族的人都需要管理。
  3. 类（属性，伪类）选择器[0.0.1.0]
    就是在第3位标志位加1
    1. 类选择器
      应用于对应class的元素，css中用“.”后跟class名来标记。
      .header{
      display:none;
      }
      <div class=”header“></div>
      三儿子权利更小，分配去当家族采购主管了，肥水不流外人田吗。
    2. 属性选择器
      属性选择器应用于对应class的元素，css中用“[]”标记中html元素属性名来标记。
      div[title]{
      display:none;
      }
      <div title=”any”></div>
      地位越高，他的直系下属地位也比一般人高。
      俗话说：天高皇帝远，县官不如现管。怕就怕他的狗奴才仗势欺人狐假虎威。
    3. 伪类选择器
      LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。
      a:link - 默认链接样式
      a:visited - 已访问链接样式
      a:hover - 鼠标悬停样式
      a:active - 鼠标点击样式
      现在终于要说道真正的祸国殃民的牛鬼蛇神了，排名前4为的金牌打手了。要对付他们先从最弱的开始，柿子捡软的捏。
  4. 元素（伪元素）选择器[0.0.0.1]
    就是在第4位标志位加1
    1. 元素选择器
      应用于所有对应的html标签，css中直接使用html元素标记
      div{
      display:none;
      }
      <div></div><div></div>
    2. 伪元素选择器
      :first-letter - 首字母样式
      :first-line - 首行样式
    四儿子其实被排挤的不行了，每天就干一些表面的事情，小铺开张剪个彩啦，出席一些小应酬啦，浑浑噩噩的度过一生。
  5. 通配符选择器[0.0.0.0]
    就是在第4位标志位加0，不要小看这个0啊。
    应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。
    div *{
    display:none;
    }
    <div><div></div><span></span></div>
    这类人其实就是那些家族的旁支了，他们虽然对家族来说是渺小的，但是毕竟还有家族血缘，至少可以当当小掌柜。
    看看下面那些人就知道什么叫卑微了。
  6. 继承样式和结合符[无]
    这个连0都不是，简直就是什么都不是，不是东西啦。
    1. 继承样式
      p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式
      div{
      color:red;
      }
      <div><p></p></div>
    2. 结合符（combinator）
      1. 后代选择器（descendant selector/上下文选择器contextual selector）
        后代结合符（descendant combinator）：空格
        空格前后的元素是后代关系。
        这么理解它呢？
        树结构的分支选择器。
        ……任何子孙中包含……（可一直嵌套下去，如：div p span）
        div span{
        display:none;
        }
        <div><p><span></span></p></div><span></span><div><em></em></div>
        空格的左右两边不一定是子元素这样的绝对父子关系；而是父亲和子孙关系，即可以隔N代遗传。
        如果有相似两代的话当然有两个选择最接近的一代。如：
        两层span，只匹配最接近div的那个span。
        div span{
        display:none;
        }
        <div><p><span><h1><span></span></h1></span></p></div>
      2. 子（元素）选择器（child selector）
        子结合符：大于号（child combinator）
        大于前后的元素必须是父子关系。
        div > span {
        display:none;
        }
        <div><span></span></div><div><em><span></span></em></div>
      3. 相邻兄弟选择器（adjacentsibling selector）
        相邻兄弟结合符（adjacentsibling combinator）：加号
        大于前后的元素必须是同级兄弟关系。
        li + li{
        display:none;
        }
        <ol><li></li><li></li><li></li></ol>
    这些就是要多少就可以雇佣多少的帮工了，他们没有只管工作，没有什么权利。
2. 读者正常声明
用户代理（User agent）[5]声明
一般指游览器。如：
游览器对a元素有默认声明，为蓝色加下划线。

—————————
[1], [3] 名称来自《CSS权威指南》
[2], [4] 名称来自 W3C 中文版
[5] 访问web内容的软件，包括桌面图像浏览器，文字浏览器，语音浏览器，移动电话，多媒体播放器，插件程序，以及一些用来与浏览器联结的软件辅助技术，比如屏幕阅读器，屏幕放大器，语音识别软件等。
[6] W3C CSS标准英文官方网站
 [7] 原创作者：fangle，
[8] 原文链接：http://www.28star.com/blog/2008/06/06/css-priority.html

5月19日14时28分全国默哀3分钟

fangle — Mon, 19 May 2008 14:48:20 +0800

从地震还是，我无时无刻不在悲伤和被感动。
今天的全国3分钟哀悼，不管汽车火车轮船还是防空警报，都在同时鸣响。
虽然我预计了届时的场面，可是当身临其境是，我还是被深深感动。
这个声音犹如死者的悲鸣，生者的哭泣。

今天开始全国3天降半旗；
所有的报纸都是黑白的；
只有地震的信息，没有了广告（报纸变得更纯粹了，页数当然极度缩水了）；
所有的娱乐节目暂停，
新闻视频网站首页第一屏都是黑白的，黑容都是地震的信息。

人心在此刻凝聚，我们都是中国人。

不期而遇

fangle — Mon, 24 Mar 2008 15:10:09 +0800

今天坐地铁，竟然遇到了点石互动的kyw。我在地铁上看书，突然邻座的一人要我名片看，我以为被星探发现了，我要在演艺圈一展宏图了，哈哈。

结果然来因为我把自己名片当书签，他看见名片上的logo眼熟。

和他聊了一下得知，他认识我们老板。

也对用户体验和交互设计有兴趣，这也是他注意到我在看《交互设计之路》和后来一系列事情的起因吧。

记得周六在我发现有个校内的朋友加我，仔细一看，原来还是一个中学一个大学的校友，这世界很大，网络却很小。第一次深刻体会到sns对我的好处。

嫦娥奔月之胡诌

fangle — Sat, 15 Mar 2008 01:20:21 +0800

fangle(622424) 0:31:00
这两天看报纸，决定要研究一下嫦娥
完美的骑士<> 0:31:21
……嫦娥？？
完美的骑士<> 0:31:29
嫦娥多少号卫星吗
fangle(622424) 0:31:50
现在是嫦娥，大羿，后羿，鳄鱼，蟾蜍，玉兔的关系很复杂
CC(394954161) 0:32:01
好困。。。
CC(394954161) 0:32:02
睡觉
fangle(622424) 0:32:21
现在的传说是嫦娥和玉兔在月亮上
完美的骑士<> 0:32:39
新派考古学家。。天涯上很多这样的东西
fangle(622424) 0:32:46
可是汉代的时候月亮上市蟾蜍
5key(124141353) 0:32:47
你果然很闲

fangle(622424) 0:33:07
因为那是蟾蜍和玉兔发音一样
fangle(622424) 0:33:31
可是在更早的典故里，月亮上是鳄鱼
fangle(622424) 0:33:46
在古语里鳄鱼和蟾蜍是同音
完美的骑士<> 0:34:34
其实月球只是外星人的基地
完美的骑士<> 0:34:39
上面的都是外星人
完美的骑士<> 0:34:46
兔子是外星人的宠物
fangle(622424) 0:34:46
且有古代石壁，嫦娥奔月，不过话的是上半身是嫦娥，下半身化为了鳄鱼，月亮上有个蟾蜍张开双手
fangle(622424) 0:35:16
此蟾蜍应该是大羿
fangle(622424) 0:36:05
史料记载后羿其实是大羿的分身
fangle(622424) 0:36:18
可以解释为什么大羿会性情大变
fangle(622424) 0:36:52
以为善良的大羿射杀了东方神的9个太阳孩子
fangle(622424) 0:37:22
所以问西黄母娘娘要了仙丹逃去月球避风头
fangle(622424) 0:37:48
还需要掩饰身份，所以便蟾蜍了
fangle(622424) 0:37:57
留下分身殿后
fangle(622424) 0:38:47
分身气啊，他想好事你占了，还去月球旅行，还和嫦娥小妞一起
fangle(622424) 0:39:11
自己却在地球受苦被新东方洗脑
完美的骑士<> 0:39:30
然后呢
fangle(622424) 0:39:32
索性也做坏人
fangle(622424) 0:39:58
然后就南征北战，杀了皇帝
fangle(622424) 0:40:09
抢了所以的妃子做自己老婆
fangle(622424) 0:40:28
不过晚年很凄惨一无所有
fangle(622424) 0:41:05
这都怪大羿，把缺点都逼出来了，自己带着优点跑了
完美的骑士<> 0:41:26
……
fangle(622424) 0:41:55
这就是原版故事
fangle(622424) 0:44:18
现在的故事都说大羿变性为后羿，干缺德事了。嫦娥每日孤单寂寞，所以偷了大羿的仙药，升天，结果迷路到了月亮上，被太阳辐射后，基因突变成兔子，然后又有一个倒霉人叫吴刚
fangle(622424) 0:44:34
因为学道时候也干了缺德事
fangle(622424) 0:44:52
结果被老师一个背包扔到月球上
完美的骑士<> 0:45:19
fangle写点玄幻到天涯连载一下
fangle(622424) 0:45:23
说他如果弄死月球上的那颗桂花树就可以回伊拉克服役
完美的骑士<> 0:45:26
搞不好出书了
完美的骑士<> 0:45:36
比我们搞技术强多了
邓劲(94262) 0:45:50
还不睡…
fangle(622424) 0:45:55
那吴刚那能答应啊
fangle(622424) 0:46:16
他就诅咒砍不是桂花树
CC(394954161) 0:46:22
发现FANGLE的思维非常跳跃
fangle(622424) 0:46:34
这不这桂花树也是发神经
fangle(622424) 0:47:12
每次砍下，第二天蹭又长出来了
fangle(622424) 0:47:21
还越长越高
fangle(622424) 0:47:29
有点爷们胡子的意思
刘云天<> 0:47:42
他可止
fangle(622424) 0:47:45
吴刚笑了
刘云天<> 0:47:51
他一到０点后都很兴奋
fangle(622424) 0:47:54
可不是，他怎么能不笑呢
fangle(622424) 0:48:17
每天他砍下树，摘下树叶去找他的小龙女
fangle(622424) 0:48:23
错了，是嫦娥妹妹
fangle(622424) 0:48:49
嫦娥自从来到月球就没照过镜子
fangle(622424) 0:49:03
怕一照对不起自己
fangle(622424) 0:49:37
听老军医说，一针就灵的秘方是桂花树叶子
fangle(622424) 0:50:02
真发愁怎么搞定这玩意，自己细胳膊细腿的
完美的骑士<> 0:50:19
dream a sweet dream…
fangle(622424) 0:50:22
你还别说，吴刚这小子贼精
fangle(622424) 0:50:43
在老远就打量着蟾蜍了
fangle(622424) 0:51:04
估摸着，这蟾蜍眼神熟
fangle(622424) 0:51:21
照出嫦娥妹妹的影子
刘云天<> 0:51:35
靠．
刘云天<> 0:51:42
你是在打字，还是在paste
fangle(622424) 0:51:59
想当年自己在伊拉克学道的时候每天回家看到嫦娥的照片，就感觉自己还活着
fangle(622424) 0:52:01
靠
fangle(622424) 0:52:10
我在一边想一边写
fangle(622424) 0:52:14
随笔
fangle(622424) 0:52:17
不要打断我
fangle(622424) 0:53:00
故事夸张，不过主线全是史实可以考证的
fangle(622424) 0:53:39
听说当年嫦娥一次出门就没回来
fangle(622424) 0:53:49
还有人传她升天了
fangle(622424) 0:54:14
今天意见果然百闻不如一见
fangle(622424) 0:54:26
哪有这么美丽的蟾蜍啊
fangle(622424) 0:54:34
绝对是嫦娥妹妹变得
fangle(622424) 0:55:04
吴刚二话不说，上去就是一吻，来个睡美人2
fangle(622424) 0:55:22
结果可想而知
fangle(622424) 0:55:40
又不是青蛙，蟾蜍身上有毒
fangle(622424) 0:56:02
正一月头上都顶着2个台湾香肠
fangle(622424) 0:56:41
听了嫦娥的哭诉，2人同命相连，惺惺相惜，月黑风高，何不
fangle(622424) 0:56:50
去给你砍树呢
fangle(622424) 0:57:16
也不知道，哪个缺德老军医说的秘方
fangle(622424) 0:58:17
砍到现在
fangle(622424) 0:59:08
等下，我要考证一下历史细节
5key(124141353) 0:59:15
好流氓啊
fangle(622424) 0:59:59
1969年7月20日-美国人阿姆斯特朗代表地球共荣圈去探望他们
fangle(622424) 1:00:24
看到他们两个和机器人一样，一个就在那砍啊砍的
fangle(622424) 1:00:38
一个就在那里捣啊捣的
fangle(622424) 1:00:44
都不说话
fangle(622424) 1:01:23
没办法采访，就先回来，心想他们去的比我早，应该听不懂英文
fangle(622424) 1:01:32
得回来找个中国人去
邓劲(94262) 1:01:58
你写的聊天机器……
fangle(622424) 1:02:23
回来后大家商量，中国觉得先发射个嫦娥一号拍点照片，这样准备一点谈资
fangle(622424) 1:02:28
以后好说话
fangle(622424) 1:03:21
可是嫦娥和吴刚也恶搞，这拍过去的照相机就是拍不到他们
fangle(622424) 1:03:50
拍到的只有他们常年捣药留下的无数坑
fangle(622424) 1:04:20
这些坑要说明一下，嫦娥也不是笨蛋，她捣了那么久都不见效
fangle(622424) 1:04:27
想是不是风水不好
fangle(622424) 1:04:33
就来回挪窝
fangle(622424) 1:05:38
月球就那么点地方，三捣两捣的就捣腾的一塌糊涂了
fangle(622424) 1:06:20
现在他们捣腾的地下去了，你说怎么拍的到
fangle(622424) 1:06:59
话说中国人可不能小看
fangle(622424) 1:07:03
不死心啊
fangle(622424) 1:07:21
你不然看，俺们偏要看
fangle(622424) 1:07:32
你不让看，俺们偏要看
fangle(622424) 1:08:14
第二步准备仍个终结者3机器人去
fangle(622424) 1:08:51
硬的不行
fangle(622424) 1:09:07
第三步就上人，这起这玩意太死板
fangle(622424) 1:09:14
人给他来软的
fangle(622424) 1:09:39
我们的口号是两手都要抓，两手都要硬
fangle(622424) 1:10:19
修正：第三步就上人，机器这玩意太死板
fangle(622424) 1:11:13
故事今就先撂下不表了，欲知后事如何，请听下回分解。啪