在一个项目的开发过程中用到了css Sprite,有这样一个需求:目标样式大小是32px * 23px大小的图片作为图标。 如图所示: 但是,给我的背景图片是这样的一张图,256px * 46px: 在我们的实例中,我们…
标签:css3
CSS3选择器详解
转载自个人博客 1.常用选择器 1.1标签选择器 p{ }/*选择标签名为p的元素*/ 1.2类选择器 .box{ }/*选择class名为box的元素*/ 1.3ID选择器 #pid{ }/*选择id名为pid的元素*…
花式使用CSS3 transition
欢迎交换友链 Laker’s Blog–进击的程序媛Github:https://github.com/younglaker微博: 江小湖Laker 本文讲介绍:hover、:active、:fo…
一个前端程序猿的Sublime Text3的自我修养
文章转载自本人的博客《三省吾身丶丶》点击查看喜欢的话请疯狂的推荐吧! ^_^ 本文章会在本人有插件或者设置更新时,进行不定时更新 偷懒了,图片地址直接设置的博客地址的,可能会挂掉。 详细设置 && 20+…
CSS实战之Flex详解以及其在微信中的兼容实现
Box Box是传统的通用的容器属性,我们首先来介绍下Box的基本用法。因为在下文讲解Flex时候会提及,鉴于部分浏览器并不能支持Flex的全部特性,所以很多时候我们需要利用一些工具或者手写的方式将新版的Flex的语法转…
CSS3 Flexbox在移动端的应用
FlexBox(CSS Flexible Box Layout Module)是css3新添加一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的…
CSS3-Transform
译:CSS3-TRANSFORM 重点部分译注并未全部。有一些自己的理解,如有不当请指正。:-D 变换渲染模型 为transform属性指定一个除了none的值便会在元素上创建一个新的局部坐标系统并且应用于这个元素。通过…
详解css3之border-image
border-image简介 css3中新增了一个属性border-image,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。border-image 是…
20 个 CSS 高级技巧汇总
使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。 1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: …
CSS3打造3D导航
效果预览 分析:可以看出hover的时候是有前后两个面的翻转,并且有一个凸出效果。 HTML分析 代码如下: <ul class="block-menu"> <li> <a href="#"…
利用HTML和CSS实现常见的布局
单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是paren…
CSS3 过渡
概览 CSS 过渡( transition )用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition …