![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 93
suyijianke
这个作者很懒,什么都没留下…
展开
-
再说CSS3渐变——线性渐变
http://www.w3cplus.com/css3/new-css3-linear-gradient.html 渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异。事实上这种方法是比较麻烦的,因为首先需要设...原创 2014-12-21 19:21:59 · 301 阅读 · 0 评论 -
理解CSS3 transform中的Matrix(矩阵)
http://blog.csdn.net/henren555/article/details/9699449 理解CSS3 transform中的Matrix(矩阵)by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427一、哥,我被你吓住了打...原创 2015-06-25 10:39:16 · 251 阅读 · 0 评论 -
利用jQuery和CSS实现环形进度条
http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html 最近项目里遇到一个有意思的效果,那就是圆形进度条,类似于这样的:demo1demo2<iframe id="cproIframe_u1490106_1" style="box-sizing: inherit...原创 2015-07-13 20:43:23 · 1169 阅读 · 0 评论 -
深入理解css3-gradient斜向线性渐变/
深入理解CSS3 gradient斜向线性渐变by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3639一、问题没有想得那么简单提问,使用CSS3 gradient渐变,在一个400*300的div层上实现一个(100px, 100px)到(200p...原创 2015-07-22 11:19:22 · 502 阅读 · 0 评论 -
Nodejs+Grunt配置SASS项目自动编译
http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html早前听说Nodejs和Grunt很强大,特别是用来构建自动化的前端开发,更是强大无比。但一直碍于自己掌握的技术有限,不敢深入,也未曾深入下去。最近在开始学习SASS,也慢慢的接触这方面的东西。为了能更好的让SASS项目实现自动化编译,打算...原创 2015-07-27 21:31:24 · 167 阅读 · 0 评论 -
CSS Button
CSS Button <html><head><style type="text/css">.btn { font-size:16px; font-family:Arial; font-weight:normal; -moz-border-radius:8px; -webkit-border-radius:8px; ...原创 2014-11-26 11:25:45 · 93 阅读 · 0 评论 -
CSS3盒模型display:box详解
http://www.warting.com/web/201402/68557.htmldisplay:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属...原创 2014-11-29 17:36:56 · 76 阅读 · 0 评论 -
CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html《CSS3 经典教程系列》的前一篇文章向大家详细介绍了 text-shadow 文本阴影特性的用法,今天这篇文章我们在一起来看看 CSS3 中实现渐变效果的 Gradient 属性的具体用法。在以前,渐变效果和阴影、圆角效果一样都是做成图片,直接编...原创 2014-12-02 11:06:09 · 376 阅读 · 0 评论 -
CSS3的文字阴影—text-shadow
http://www.w3cplus.com/blog/52.html前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。text-shadow还没有出现时,大家在网页设计中阴影...原创 2014-12-02 17:25:57 · 167 阅读 · 0 评论 -
HTML5----响应式(自适应)网页设计
http://blog.csdn.net/damys/article/details/24363769第一步:在网页代码的头部,加入一行viewport元标签 [html] view plaincopyprint? <meta name="viewport" content="width=device-width, initial-scale=1" ...原创 2015-05-31 20:39:24 · 141 阅读 · 0 评论 -
CSS media queries
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下。CSS2/media在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用media使某些style只在打印的时候生效...原创 2015-05-24 14:19:02 · 246 阅读 · 0 评论 -
Cache-control使用Cache-control:private学习笔记
<meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Cache-Control" content="no-cache" /><meta http-equiv="Expires" content="0" />原创 2015-05-02 12:08:09 · 389 阅读 · 0 评论 -
CSS布局
CSS布局http://www.w3cplus.com/blog/tags/131.html原创 2014-12-21 21:56:02 · 74 阅读 · 0 评论 -
19个带示例的jQuery滚动条插件
http://blog.sina.com.cn/s/blog_4abb9bba0101bgu7.html1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于iOS设备。在线演示2、Lion样式j...原创 2014-12-23 18:19:30 · 191 阅读 · 0 评论 -
CSS制作水平垂直居中对齐
http://www.w3cplus.com/css/vertically-center-content-with-css作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家,以供...原创 2015-01-13 10:26:08 · 74 阅读 · 0 评论 -
深入了解 Flexbox 伸缩盒模型
http://c7sky.com/dive-into-flexbox.html介绍Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的,不妨仔细了解下吧! 为什么需要伸缩...原创 2015-02-05 14:03:59 · 237 阅读 · 0 评论 -
我对CSS vertical-align的一些理解与认识(一)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=813一、关于今天,本文,及其他今天是个特殊的日子,因为今天是汶川地震两周年的日子,我很悲鸣;今天又是国际护士节,看到微博上护士照横流,我很欣慰。一段放松的YY后,进入正题。上个月21号,有位同行留言想让我讲...原创 2015-03-03 14:25:49 · 233 阅读 · 0 评论 -
CSS vertical-align的深入理解(二)之text-top篇
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=861一、上集内容简单提要上集内容“我对CSS vertical-align的一些理解与认识(一)”要追溯到差不多一个月以前了,主要是了解了下vertical-align的一些属性,并简单讲述了自己对vertica...原创 2015-03-03 14:27:21 · 1144 阅读 · 0 评论 -
手机版网页设计html5元素meta name=”viewport”设置需要注意的地方
http://www.uiej.com/960.html越来越多的网页开始针对手机浏览,自适应屏幕大小了,css的设置方法请参见前面的文章:用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解,在这篇文章里面我们详细解读一下,html5属性里面 meta name=viewport 的最佳设置方式。首先:看看实例一<head>...原创 2015-05-02 10:12:57 · 209 阅读 · 0 评论 -
用CSS3的@media属性根据屏幕大小做自适应各种分辨率网页显示版本-media_query详解...
http://www.uiej.com/905.html如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。比如说我们熟悉的wordpress后台,当屏幕分辨率小于900px的时候,左边的侧栏就会变成收拢状态(@medi...原创 2015-05-02 10:28:07 · 366 阅读 · 0 评论 -
CSS常用
//设置浮动,子元素会越出父元素之外 ,在最后一个子元素上加这段代码.clearfix:after { clear: both; content: "."; display: block; font-size: 0px; height: 0px; line-height: 0; visibility: hidden;}...原创 2014-12-17 17:13:18 · 77 阅读 · 0 评论