标签归档:前端

中英文文字混排bug,不完美解决方案

今天早上发现原本测试正常的search首页中有一段链接文字产生了下沉。如图
/wp-content/uploads/200711/10_000401_ec.jpg
发现该链接中含有英文,估计是字体问题。问了一下同事,说给个line-height看看。改后,发现无效果。
google之,也没有发现很好的解决方案。
最后我的处理方案:将此段文字的font-family全部设置为"宋体"。这样解决了文字下沉的问题,但是对于英文文字的显示并不友好。即便关键词出现英文的几率并不高,但作为一个完美主义者,对这样的结果我并不满意。
如果谁有比较好的方案,欢迎探讨。

//2009-01-14 补充:该问题系ccs中某处定义了font-family所致。默认情况的font-family为中文为宋体,英文是Arial。对该容器强制定义font-family即可解决。

CSS粘性底部

原文:A CSS sticky footer
作者:Ryan Fait

我E文不好,不过代码看的懂
该文实现粘性居底的核心方法,就是负margin
先用一个容器wrapper包住除footer以外的内容
将wrapper的高度设置为100%,再用负的margin空出footer高度
如此实际wrapper的高度应等于100%-footer.height
效果达成

作者在HTML中加了一个和footer一样高度的push容器
没理解什么意思,可能是用来hack的。谁知道的话,我们探讨一下

把代码贴上

HTML:



Your website content here.




CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 4em; /* .push must be the same height as .footer */
}

揣测google韩国首页动画效果

google韩国的首页前段时间很火
一来是因为google终于进入了韩国市场,二来是因为首页下部几个动画菜单
最关键的是据说只用了这一张图片就实现了动画的效果
/wp-content/uploads/200706/14_224440_google.png

于是乎牵扯出关于图片使用效率的话题 http://blog.rexsong.com/?p=746

本人不才,用css加上拙劣的js也写了类似效果
思路是这样的
使用background的postion属性来控制背景的滑动
用js的setTimeout()来创建动画效果
具体效果如下
demo

我的图片
小球跳动

彩虹文字生成器

/wp-content/uploads/200705/14_200657_1.jpg

效果演示

无聊的时候写了个小玩意
代码比较乱,也懒的整理了

思路:
-利用clip属性对div进行裁剪,从而模拟效果

使用方法:
-在文本框内输入文字
-点击“生成”按钮
-将文本区域内生成的代码拷贝到网页编辑器内即可使用

注意点:
-clip作用的对象必须是绝对定位
-该对象必须有父容器

标题文字过长的截取

工作中经常碰到一些由于排版问题而无法显示完整的标题
如:

  • 这是一条新闻啊啊啊啊…
  • 这是一条新闻啊啊啊啊…
  • 这是一条新闻啊啊

最近正好遇到相关问题,总结出以下解决方法

CSS:以前就用过,效果一般,仅ie6支持

我有多长我有多长我有多长我有多长我有多长我有多长
我有多长我有多长我有多长我有多长我有多长我有多长
我有多长我有多长我有多长我有多长我有多长我有多长



javascript::今天上班时候搞的,原来js有substring啊





VBS:这个我也不了解,感觉和js类似





asp:这个有问题,中英文混排就糟了,目前还没想到解决办法


<% text=rs("title") '将数据库字段值赋到某变量上 i=20 '定义固定大小 if len(text)>i then '如果文本长度大于给定的值
text=left(text,i) '则提取前段的i位的字符串
response.write (text&"…")
else
response.write (text)
end if
%>