Der's Blog 浮动元素的水平居中
展开/收缩对于页面上的块级元素，只须定宽及设置margin:0 auto;即可在水平上居中，但对于浮动的元素水平居中是无效的，一个典型的应用就是页面的分页效果了，看如下图：
这种分页效果，在以往可能会采取设置inline-block，然后父容器设置text-align:center方式来实现内容居中，像如下代码：
提示：你可以先修改部分代码再运行。
“html/css”分类下所有日志
css3线性渐变浅析
展开/收缩工作中遇到的设计常常都有渐变的存在，如果是切图片的话实在是件痛苦的事情，特别是需要高度延展的容器，此时css3渐变就能派上用场，也灵活很多，FF及webkit核心的浏览器(chrome，safari等)用了各自的私有属性实现渐变，ie则可以用传统的滤镜实现一些简单的渐变。
Mozilla渐变语法
/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) /* 实际用法*/ background-image: -moz-linear-gradient(center top,#36c 0, #f30 10%,#ff0 30%);
可以注意到渐变事实上是设置在background-image里的，这点似乎 不太合理，如果可以背景图片与渐变一起使用，那就很强大了，FF的渐变的参数是以逗号隔开，第一个参数决定渐变方向，也可以设置角度，如(-45deg)等，第二个开始就是颜色的设置，先是颜色然后空格再跟一个颜色的位置值，FF下可以是百分比也可以是实际的像素PX值，后面可以跟N个颜色参数，就可以实现多颜色渐变。
[继续阅读全文...]
纯CSS兼容IE6的模拟的fixed效果
展开/收缩网站中常用到的漂浮于页面上的浮动元素，对于标准浏览器来说，直接用fixed即可完美实现，但IE6不支持，于是我们可以用模拟的形式用absolute去模拟fixed效果，亮点在于用一个div去模拟body的滚动条等表现，同时该方法也可实现绝对底部效果，也就是如果页面内容太短，底部内容也可以位于页面底部。
看一段核心CSS代码：
html, body { height:100%; overflow:hidden; }
.page { height:100%; overflow:auto; }
.floatbar { position:absolute; bottom:0; left:2%; border:1px solid #ccc; background:#06c; color:#fff; height:30px; width:95%; }
纯css利用border制作三角形应用
展开/收缩如果容器的宽度为0，css的border边角的部分放大来看事实上是由四个三角形拼命而成的，所以我们就可以利用隐藏部分边框实现三角形之类的特殊图形。
三角形的样子：
提示：你可以先修改部分代码再运行。
自适应宽高圆角的几种布局方式
展开/收缩流体布局的几种方式及多列等高布局
展开/收缩完美解决IE下li元素产生间距的BUG
展开/收缩当li元素设置了高度，且li内元素浮动时会触发该bug。
<style>
li{ background-color: green; height: 20px; }
li a { float: left; }
li span { float: right; }
</style>
<ul>
<li><a href=”">aaa</a><span>bbb</span></li>
<li><a href=”">aaa</a><span>bbb</span></li>
</ul>
解决方法：li设置css vertical-align: middle; (或其他非baseline值都可)
<style>
li{ background-color: green; height: 20px; vertical-align: bottom; }
li a { float: left; }
li span { float: right; }
</style>
<ul>
<li><a href=”">aaa</a><span>bbb</span></li>
<li><a href=”">aaa</a><span>bbb</span></li>
</ul>
上边的方法一般都会解决问题，但是许多时候许多未知的原因，还会导致间距问题的出现。试试以下方法：
1.定义行高 line-height
2.设置隐藏 overflow:hidden
3.li增加浮动属性 float