修改本站position:absolute下的宽度BUG

在去年制作本站的主题时就考虑了页面加载的顺序,把本站的头部代码放在底部,让主内容放最上面。表面上当然为了搜索引擎,让它收录我的每一篇文章时的简介都是唯一的。这样,并可美名为用户体验的考虑,把最主要的内容最优先加载。 (more…)

发表于:2010-06-13 13:29:54 分类:代码 4条评论 Tags:, , , ,

用css控制中文字与英文字的间距

现在才发现CSS对字符间距的控制中,汉字与英文是不同的。汉字间字间距设置:letter-spacing,英文间字间距设置:word-spacing。

发表于:2009-11-19 10:06:43 分类:代码 发表评论 Tags:,

25个优秀激发灵感的暗色调 CSS Web 设计

Creative Dark CSS Web Designs

CouchCreative

(more…)

发表于:2009-11-02 21:40:29 分类:欣赏 发表评论 Tags:, , , , , ,

niftycube造成position:relative失败?

这几天在做一个后台系统,采用niftycube来处理圆角问题,可以后来发现niftycube对position产生了影响,所设的值失效.
暂时没有找到解决办法.
哪位高人指点下?

发表于:2009-06-02 15:01:15 分类:代码 发表评论 Tags:, , ,

回归原始,尽量使用XHTML标签默认属性

使用DIV与CSS结合的方式来布局页面已经有几年时间了。虽然我没有去购书学习过,也没有认真去看过完整的教程,很多使用方法都是在工作过程中自已尝试得来的经验。当然,这就不可避免的出现了主观上错误产生的问题。
这几天在阅读自已BLOG内容时,总觉到段落间排版有很多问题,也都认为是自已在后台发布时没有排版好,从没有注意到是因为自已在写样式表时的问题所产生的。 (more…)

发表于:2009-02-19 12:51:17 分类:代码 发表评论 Tags:, , , ,

CSS中的max-width和min-width

很早之前虽然有用过max-width及min0width(当然,对应着有max-height和min-height)不过在IE6以下的版本是不支持,它只能用于ie7以上,及firefox等。
在IE6时,我也是采用expression的方式很方便解决一些问题。但从没有把这些应用方式总结出来。 (more…)

发表于:2008-12-18 00:17:21 分类:代码 发表评论 Tags:,

利用css样式中的expression来攻击

说明了,就是利用css expression来攻击,或者说,用css expression来写脚本。
今天尝试了一下css expression的强大。没话说。当然尝试用css expression来破坏页面也太强了,感觉有些防不胜防的感觉。具体方式,就不多说了。免得起乱子。 (more…)

发表于:2008-07-25 10:07:44 分类:代码 发表评论 Tags:, ,

css完美设计:灵活设置字体

用DIV+CSS来写网站结构也有一段时间,在此过程中发现有时候需要把字体设置成比12px,而比14px小的字体(13px在IE中无法区分出大小来和12px一样)。今天发现用 font-size:small; 可以很好控制好字体的大小。

首先设置一个基础值在<body>标签中
body{font-size:small;} 以这个字体大小为基础,在其他标签中设置百分比
h1{font-size:120%;}
h2{ font-size:110%;}
note{font-size:80%;}随着基础值的改变,其他字体也都会跟着改变,要修改的时候只需要修改body里的基础值。
用small作为基础值可以使用户根据喜好随意调整大小,用户的调整不影响整体字体的比例失调。
同时,当你按下Ctrl+滚动鼠标中键时,还可以缩放页面的字体大小。

在现在针对于网站友好性设计时,把字体的大小控制权交到用户的手上,这样有利于不同年龄段的人来阅读。比如老年人,可能跟本无法看清12PX的字体,但是可以通过滚动鼠标中键来放大字体。

这篇文章在我2007年01月中已提出,但去年12月份把BLOG从PJBLOG转到LXBLOG时,好像丢失掉了。现在重发一次。

发表于:2008-03-03 06:03:50 分类:代码 发表评论 Tags:,

[转载]根据时段自动切换你的站点CSS风格

网站能切换风格这事已是老掉牙的事了,这几天在网上发现一个同样是切风格,但做了小小调整,会根据当时的时间自动调整站点风格。这创意不错。
技术就是如此,只要你够创意,一切都是很棒的。
主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣可以自己试试。ASP版代码如下://simonsu 补充,在实际应用中,因为时区的问题获得的时间会不正确,需要加下面的语句才能正确取得所在时区的时间
date_default_timezone_set(PRC); //修改时区设置,这样date函数也能正常使用

发表于:2007-10-05 11:10:49 分类:工作 发表评论 Tags:

CSS hack浏览器兼容一览表

CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。

发表于:2007-09-29 05:09:32 分类:代码 1条评论 Tags:, , ,

CSS Hack汇总快查

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.

我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11).

在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.

IE系列:

selector { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
selector { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
selector { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE系列 (除IE7外) 识别.
* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
html/**/ >body selector { property:value; } 在选择器上运用继承法 html/**/ >body selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
selector { property/**/:value; } 在属性名和冒号”:”之间加入注释,屏蔽IE6用.
selector/**/ { property/**/:value; } 在选择器和花括号”{“之间以及在属性名和冒号”:”之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
select/**/ { property:value; } 在选择器和花括号”{“之间加入注释,屏蔽IE5用.
*+html selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

Firefox:

*:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

Safari:

selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

Opera:

@media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

以上的Hack并不完整,大家一起补充.
对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack.
CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X:

selctor { width:IE5.X宽度; voice-family :”\”}\””; voice-family:inherit; width:正确宽度; }

清除浮动Hack,相信这个定义用的人很多:selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
另外还有很多很多CSS Hack的运用,一一列举的话可能能写成一本书了…想到再添加吧.

转载自:http://www.blueidea.com/tech/web/2008/5287.asp

发表于:2007-08-03 04:08:31 分类:代码 发表评论 Tags:,

[转载]表单的CSS设计(css form design)

原文:点这里
使用 Label

Label能够建立form元素与文字说明的桥梁这样点击First name文字后,就能自动激活input
Label可以用在以下一些内容

    checkboxes
    radio buttons
    textareas
    text fields
    select boxes

submit 按钮 和submit 图象 不需要使用Label,因为它们有自己的value和alt

发表于:2007-06-21 07:06:48 分类:代码 2条评论 Tags:,

通过CSS控制图片自动缩小

在文章的内容区中,通常会有图片。如果图片的尺寸过大,常会把页面结构撑得变形。
以前,我采用JS来控制,效果还是不错。
这段时间,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理速度也更高。
方法如下:同样可以用对高度进行控制。

这种方法可以满足: 一个页面中,不同图片,超过所需大小时,自动缩成不同尺寸的需求。

应用面也很广,比如:一般的CMS等文章管理中,通常都有小图、大图。而我们在页面上,通常需要读取同一个图片,而分不同尺寸显示。再结合 overflow:hidden; 相信图片也就不会变形了。

发表于:2007-05-17 06:05:13 分类:工作 发表评论 Tags:

CSS中expression使用简介

定义
  IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 (more…)

发表于:2007-01-30 11:01:14 分类:工作 发表评论 Tags:,

重新制作了本BLOG的CSS

今天重新制作了本BLOG的CSS,大体上没有多少改变,主要调整了色调,以及边框线…..

发表于:2005-10-12 05:10:57 分类:工作 2条评论 Tags:,

正在加载信息...

Archives