HTML/CSS
十一 8th, 2008
网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。 早上发现一个有意思得站点 http://www.leemunroe.com/ 同样是切换风格。不过他做了点小小的调整。站点会根据当时的时间自动调整站点风格。作者为站点制作了早上、下午、夜晚三套皮肤,主要是分别制作了背景。12点以前系统会使用早上的皮肤,过了12点,站点会自动替换成下午的风格,5点后则替换成夜晚的风格。 主要的功能实现是靠在头部的这段判断代码,很容易理解。有兴趣可以自己试试。 CSS版代码如下: 程序代码
HTML/CSS
八 25th, 2008
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问。为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。 以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft(没有它就不必有这么啰嗦的代码了^_^)。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过,希望通过此篇文章抛砖引玉,望更多高手指点。关键在于:max-width:780px;以及下面那行。
HTML/CSS
八 12th, 2008
样式的优先级 在这之前先讲解特殊符号的含义——‘+’ ’_’ ’ !important’,这类特殊符号是针对不同浏览器识别的。打个比方,就象家长去幼儿园认领孩子,看到头上贴着’+’这个符号的,哦,这是ie家的孩子,firefox和opear家长是不认得的,当然符号不止3个,但有这3个就能满足大部分的需要了。
HTML/CSS
五 6th, 2008
制作表单的时候,实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了。 2、在xhtml中加入小脚本,鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离,以后的修改也会很方便。但同样会让页面代码增加。 我们有没有更好的办法来实现输入框input样式悬停交互的效果呢? 我们今天就讨论这样的方法,直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离,而且使xhtml代码减小,促进了代码重用、更加的优化。 这一方法的原理,主要是应用CSS的expression,关于expression的更多介绍,请看这篇文章。 input {star : expression( onmouseover=function(){this.style.borderColor=”#060″}, onmouseout=function(){this.style.borderColor=”#c00″})} 姓名: 年龄: 性别: 手机: 地址: 姓名: 年龄: 性别: 手机: 地址:
HTML/CSS
三 27th, 2008
来自:http://www.loveyuki.com/Article/CSS_Image_Autosize_IE_Firefox.aspx 一直以来有个很头疼的问题困扰着我,那就是图片缩放的问题,写到 JS 里面吧,不太容易修改。写到 CSS 里面吧,IE 6 又不支持 max-width,今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏。当然,如果你有更好的解决方案,希望能与我交流。代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;padding: 3px; zoom:expression( function(elm) { if (elm.width>560) { var oldVW = elm.width; elm.width=560; elm.height = elm.height*(560 /oldVW); } elm.style.zoom = ’1′; }(this));}