响应式布局简明示例，响应式布局最好同时也是自适应布局，然后再配合css3媒体查询，来达到完美的响应式布局。css3的媒体查询ie9一下是不支持的，这太遗憾了，不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件，引用方式如下： css3媒体查询语法：/*@media screen...
分类：
其他好文 时间：
2015-08-31 13:18:46
阅读次数：
197
在最近工作中，开发过程中需要设定一个图片变为灰色，刚开始我以为是更换图片，可是做了一段时间发现CSS就可以设定图片颜色变回灰色。具体的代码如下：
图片如下：
具体的实现由两种方法：一个是CSS3的滤镜功能。具体代码如下：
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%)...
分类：
Web程序 时间：
2015-08-29 21:44:37
阅读次数：
206
关于CSS3的一些基础知识:一.UI元素状态选择器:1.E:checked(被选中状态)当鼠标在浏览器中点中某项时,则触发某一个li的值2.E:enabled(可用状态)用于输入文本的控件3.E:selection(被选中时的状态)程序运行后,在浏览器中,用鼠标选中某一东西时所触发的状态(这个状态可...
分类：
Web程序 时间：
2015-08-29 21:39:21
阅读次数：
195
今天在做一个水平居中的div内部元素贴边水平均匀布局（有点绕，直接看图吧），
一开始使用的都是一些比较常用的css+html方法来实现布局，感觉这样很死板（在多增加一个div，并未div设置相应的一个负的margin-left，此值需要通过计算得到），
于是便想到了css3的flex流式布局，于是上网找了一些资料：
1、css3 flex
一旦一个容器赋予了disp...
分类：
Web程序 时间：
2015-08-28 17:47:43
阅读次数：
510
Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有.....
分类：
Web程序 时间：
2015-08-28 17:10:52
阅读次数：
168
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然...
分类：
Web程序 时间：
2015-08-27 02:01:25
阅读次数：
215
HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用windo...
分类：
Web程序 时间：
2015-08-26 23:54:03
阅读次数：
203
相比CSS2，CSS3新增加了许多属性。下面是 CSS3 新增的 CSS3 属性列表。animation (and eight associated longhand properties)、background-clip、background-origin、background-size、bord...
分类：
Web程序 时间：
2015-08-26 19:50:07
阅读次数：
175
今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超...
分类：
Web程序 时间：
2015-08-26 19:38:44
阅读次数：
198
效果图如下：（是用代码写的，而不是图片！）网上看到的代码。看了下，就是CSS的transform属性的应用。加上定位等。组合在一起形成图片。没什么难点，就是width,left等数据得根据HTML的标志图计算出来。也就是说，简单的几何图片都可以用代码写了。代码地址百度云盘：http://pan.ba...
分类：
Web程序 时间：
2015-08-25 16:26:40
阅读次数：
164
