日历

« 2009-01-10  
    123
45678910
11121314151617
18192021222324
25262728293031

RSS订阅

生活就是和一堆陌生人打篮球,有时单兵作战,有时你也需要伙伴,有时凭运气捡个漏,有时靠实力上个篮,打得好继续征战,打得臭就要下场观看,输个次把两次不用害怕,你还会有再上场的一天,赢球也不要骄傲,一不留神就有谢幕的危险,慢慢的我们学会享受过程,不再从输赢中寻找成就感,每场球都会有不一样的比分和表现,但结局无外乎筋疲力尽,一声臭汗~~

改造新版网站页面,两点调整

2007-01-19 00:38:30 / 个人分类:风言风语

今天又改造了一下新版网站的页面,主要做了两点调整:

1、首页去掉意义大不大的“相册月度点击排行”,替换成“博客之星”,这样一来,除了人气高的博客有机会在“空间人气排行”中得到展示,我们也可以在首页以质量为指标推荐一些优秀博客了;

2、用CSStext-overflow属性,按显示区域的大小截取新闻标题,取代用程序自动截取标题的方式,这样做有两个优点:
(1) 因为中英文字体宽度不一,用程序自动截取标题,会出现长度参差不齐的情况。用CSS则可以根据显示区域的大小来截取标题,使显示效果更加整齐。
(2) 输出完整的标题,有利于搜索引擎识别完整的标题内容。

对比一下修改前后的效果:

修改前

修改后

这里顺便介绍一下text-overflow的用法吧:


text-overflow

版本:IE6+专有属性
继承性:无

语法:text-overflow : clip | ellipsis
参数:
clip: 不显示省略标记(...),而是简单的裁切
ellipsis: 当对象内文本溢出时显示省略标记(...)

说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

示例: div { text-overflow : clip; }

既然是IE的专有属性,就意味着FF等其他浏览器是不支持的,所以这里用了overflow: hidden来辅助,完整代码举例如下:

div {
  width: ***px; /*定义显示区域宽度*/
  text-overflow: ellipsis;
  overflow: hidden; /*兼容FF,在FF下会隐藏超过长度的部分*/
  white-space:nowrap; /*要强制文本溢出发生并且应用ellipsis值,必须定义文本内容不换行*/
}


TAG: 学无止境 博客之星 截取标题

我来说两句

-5 -3 -1 - +1 +3 +5

Open Toolbar