CSS3

解决UC浏览器默认把wap页面字体放大问题

UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加: <meta name=”wap-font-scale” content=”no”> 代码即可; 不得不说这个功能对开发者来说真的挺坑的!

利用css3实现checkbox表单元素美化

html css 实现原理: 前端同学都知道点击带有for属性的label标签会选中对应的input复选框,这样一来我们可以先隐藏掉checkbox元素,然后利用label来定义样式,可以使用css3的 + 兄弟节点选择器选择选中后的label兄弟节点然后对其赋予样式即可。

SASS入门教程

一、什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。 本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。 假定你已经安装好了Ruby,接着在命令行输入下面的命令: 然后,就可以使用了。 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。 下面的命令…阅读全文

Sass安装(windows版)

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。 Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示: 当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。同…阅读全文

Sass命令编译

命令编译 命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入: 单文件编译: sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作: 多文件编译: sass sass/:css/ 上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“c…阅读全文

CSS3 @media 查询

实例 如果文档宽度小于 300 像素则修改背景演示(background-color): 定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 CSS 语法 你也可以真的不同的媒体使用不同 stylesheets : 媒体类型 值 描述 all 用于所有设备 aural 已废弃。用于语音和声音合成器 …阅读全文

css3的clip使用

之前看http://daneden.github.io/animate.css/网站源码发现css3有一个clip属性具体用法下面我粘贴了一段他的css: 这里一共两个主要知识点 1、css3 clip的使用,可以实现渐变文字 2、css3滤镜特效filter:hue-rotate(),可以实现绚丽的渐变动画 我在使用中发现这个动画只是兼容webkit内核浏览器,于是复制了动画代码去掉-webkit-标识后火狐正常了,但是webkit内核不好使了,于是发现这个效果不能并存,至少目前没有找到解决办法。