CSS
用纯CSS实现的箭头的各种方法
用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。 以前写过一片文章，我博客的评论框就是用箭头来实现的。 纯CSS实现小箭头的方法 基本原理 原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解。 一个梯形 当 […]
CSS中background属性的合并的写法
上次写CSS样式时同时有background-size background-positon 两个属性， 但是我想合并成一个background来写，刚开始遇到了一些麻烦，怎么写都不生效。 后面谷歌，我们应该这样子写： 1 background：no-repeat scroll […]
用纯CSS打造旋转的圆形图片的方法
上次看到一个博客的LOGO图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的JS代码来渲染这个效果。 其实这种方式纯CSS3是完全可以实现，我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗H2的图片。 然后把图片写成圆形。 1 2 3 height: 3 […]
span之间的空隙的原因和解决办法
span之间的空隙，到底是什么？display:inline-block的元素虽然能够处于同一行，但是很变态的是它们之间出现了空格，如何处理？ （例如在浮动元素居中当中，我们必须使用display:inline-block） 1 2 3 4 5 6 7 8 9 10 11 12 […]
纯CSS3实现手风琴风格菜单的具体步骤
有朋友问我，我的demo里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点js，全部用css3来实现的。 如何使用纯CSS3创建手风琴风格菜单呢，菜单主要通过使用:target伪类来实现，教程中我们主要通过使用伪类:before和:target来定义样式，使用: […]
用CSS让字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？ 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块)： 1 2 3 4 5 6 7 8 .text-overflow{ display:blo […]
INPUT、SELECT等表单元素和图片的对齐问题
今天在写页面时，发现了一个问题，当INPUT、SELECT及用图片做的button放在一起（并排放一起）时一个高一个矮。 刚开始怎么调样式都出不来结构，后来发现原来一个vertical-align:middle就可搞定。 归纳如下： 1、INPUT和图片按钮对齐： 1 2 3 4 […]
纯CSS实现小箭头的方法
我们大多数的小箭头都是用小图片来做的，这里分享一款用纯CSS写的小箭头，大家可以看看，以后会放出更多的CSS小箭头来供大家参考。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 […]
苹果手机将网站添加到主屏幕上的方法apple-touch-icon
在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。 1 <link rel="apple-touch-icon" href="/custom_icon.png"/><link […]
IE中margin-left浮动对象双倍距离的解决办法
出现问题是：使用 float: left; 后，在IE显示margin-left:1px;就变成2px的距离。 IE Bug 的解决方法： 加一个 display: inline; 就OK了 1 2 3 4 5 6 7 #box1{ float: left; backg […]