CSS:

兼容主流浏览器的全站变灰CSS代码:

html { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix'  values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); zoom: 1;
}

另外还有 js 变灰代码可用:
grayscale(document.body);
grayscale.js 请自行搜索。

继续阅读 »

在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看。

之前试过好多方法,都不行。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML标准。

CCS实现input和img水平对齐的方法

同时给input和img添加vertical-align:middle就行了,转自(caixw.com),感谢!代码如下:

input, img { vertical-align:middle; }

问题解决。

这个“浏览器默认HTML的CSS样式属性”,在你需要还原默认值的时候,比较有用。一般开始的时候基本都应用类似的通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。

继续阅读 »

2010-06-17

网站制作点滴

2+

记录一些网站前端设计、CSS、JS和SEO等网站制作方面的经验技巧和小知识,点点滴滴,逐步积累。

ul 的 list-style 与 li 的 display:block 和 overflow:hidden 等有冲突,IE8以上会无 list-style 效果,可以设定 li a 的 display 和 overflow 属性来解决。

父级标签定义 jQuery 的 click 事件,子级的 a href 将失效,可以用 onclick 代替:

<a href="projects.php" onclick="javascript:location.href='projects.php'">xxx</a>