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 […]
纯CSS3实现手风琴风格菜单的具体步骤
有朋友问我,我的demo里面的手风琴效果怎么做出来,看起来很漂亮,其实这个手风琴效果没用一点js,全部用css3来实现的。 如何使用纯CSS3创建手风琴风格菜单呢,菜单主要通过使用:target伪类来实现,教程中我们主要通过使用伪类:before和:target来定义样式,使用: […]
用CSS让字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法 一般的文字截断(适用于内联与块): 1 2 3 4 5 6 7 8 .text-overflow{ display:blo […]
WordPress 加载 Javascript 和 CSS 的方法
有两种常用的 add_action 钩子可以加载 脚本和CSS到WordPress: init: 确保始终为您的网站头部加载脚本和CSS(如果使用home.php,index.php或一个模板文件),以及其他“前端”文章、页面和模板样式。 wp_enqueue_scripts:“ […]
纯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 […]
CSS样式表中的样式覆盖优先顺序
有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下 1 2 3 4 5 6 7 8 9 10 11 #navigator { height: 100%; width: 200; position: absolute; left: 0; […]
CSS让文字半透明显示在图片上的两种效果
CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色。 代码预览 <head> <meta http-equiv="Content-Type" content="t […]