细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: <li>记住密码<img src="static/im…

各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>. 蕃薯耀 2015年9月12日 10:11:36 星期六 http://fanshuyao.iteye.com/ Firefox 浏览器 @-moz-docume…

英文原文:Learning to Love the Boring Bits of CSS  未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍.  如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器.单位.函数(方法).我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的.  怎么说呢,让我们看看这些效果最好的朴实的CSS细节--这些细节远远没有…

收集一些css的生成工具,开发中可以直接拿过来用.特别是那些css3中的一些新的特性. 1  css渐变背景在线生成工具      http://www.colorzilla.com/gradient-editor/ 2  css3圆角在线生成工具      http://border-radius.com/ 3  网格布局在线生成工具     http://grid.mindplay.dk/ 4   css3在线生成工具(支持圆角.阴影.渐变.透明)      http://www.zi-ha…

人性化的细节处理 例如: textarea 默认只能垂直拖动,防止宽度改变破坏布局. textarea { resize: vertical; } 汉字字号小于 12px 不易阅读,为 <small> 元素设置默认值为 12px. small { font-size: 85.7%; /* 12/14=0.8571428571 */ } label 元素默认光标设为「手型」,暗示此处可点击. label { cursor: pointer; } 考虑移动设备 通常 iPhone 横屏时默认会放大…

先上 demo和 源码 其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜: .content { background-color: rgba(0,0,0,0.3); -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur…

写起这篇文章,是因为阅读张鑫旭到的一篇文章<CSS的学习瓶颈>,里面提到了要重视CSS的细节和实现机制.确实:有必要掌握一些关于CSS方面的细节,而不是遇到任何页面,都添加css.reset.下面取材截图于张鑫旭的博客: 下面回归正题: 一.关于这4个问题的答案: 1.dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体? dl标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在Chrome,Firefox,Safari,Oper…

1. 使用 :not() 为导航添加/取消边框 传统的方法为导航栏添加边框: /* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } 用css的:not()实现: .nav li:not(:last-child) { border-right: 1px solid #666; } 减少了很多代码实现了相同的功能…

/*-------------------------------------- 圆角*/ -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px; -webkit-border-radius: 8px;  -moz-border-radius: 8px;  border-radius: 8px; -webkit-border-radius:50%;  -moz-border-radius:50%;  b…

所谓的Hack就是只有特定浏览器才能识别这段hack代码.Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意. 下面是各个浏览器的CSS Hack 列表. Firefox 浏览器 @-moz-document url-prefix() { .selector { property: value; } } 支持所有Gecko内核的浏览器 (包括Firefox) *>.selector { property: value; } Webkit 内核浏览器 @media screen an…