总结CSS3新特性(Transform篇)

发表于2015-07-21 14:41:54|--次阅读

概述:CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合Animation(这里以后会有个链接的) 能实现酷炫的动画;旋转(rotate):rotate支持一个参数,一个角度值 0-360deg#demo { .....

IE系列css opacity属性差异

发表于2015-07-21 14:40:56|--次阅读

透明度width:100%;height:100%; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';/*IE8*/ filter:alpha(opacity=50);/*IE4-7*/ position:fixed;...

font-size属性有没有继承性

发表于2015-07-21 14:39:19|--次阅读

font-size属性有没有继承性:这问题自然再简单不过了,不过可能初学者有时对这个问题可能存在疑问,会造成处处为标签内的元素设置字体。这里可以给出一个肯定的答案,font-size数据具有继承性,这样有利于对网页字体进行统一设置。代码实例如下:蚂蚁部落蚂蚁部落 太阳出来了 由以上代码的...

如何用CSS控制字的间距

发表于2015-07-21 14:37:02|--次阅读

如何用CSS控制字的间距:有时候默认的字间距并不能够满足实际需要,可能需要进行人为的控制,下面就简单介绍一下如何实现此效果。使用letter-spacing属性即可以设置字间距。代码实例如下:蚂蚁部落 欢迎来到蚂蚁部落 欢迎来到蚂蚁部落 欢迎来到蚂蚁部落 欢迎来到蚂蚁部落原文地址是:http...

text-align属性有没有继承性

发表于2015-07-20 14:19:56|--次阅读

text-align属性有没有继承性:text-align属性可以将对象内的文本水平居中对齐,应该说不是什么难点,可能有时候会有这样的疑问词属性有没有继承性,如果有的话可以给父元素定义一个居中方式,下面子元素集成就可以了,能够节省些许代码。代码实例如下:蚂蚁部落 蚂蚁部落欢迎您 以上...

使用CSS3各个属性实现小人的动画

发表于2015-07-20 14:19:49|--次阅读

使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码:注:chrome浏览器效果最佳,最终效果静态图:HTML代码如下: 练习一个小人的动画 ...

编写SASS的一些技巧

发表于2015-07-20 14:19:35|--次阅读

更好的为变量命名变量是Sass中最简单的特性之一,但有时候也会使用不当。创建站点范围内有语义化的变量,是不可或缺的工作。如果命名不好,他会变得难以理解和重复使用。这里有一些命名变量的小技巧,提供参考:命名变量时不要含糊不清坚持一种命名规则(Modular, BEM等等)确定变量的使用是有道理的这有一...

css3 背景渐变

发表于2015-07-20 09:38:23|--次阅读

在没有了解css也可以做背景渐变以前,我都是通过PS一张背景渐变的图片来应用到自己所做的网页中。然而,在前不久我了解到css3也可以做背景渐变后,想要做背景渐变的效果就很容易了许多,下面是一些css3做背景渐变的方法。一.线性渐变//自上而下的线性渐变div{width:400px;height:1...

CSS3 动画记

发表于2015-07-20 09:38:04|--次阅读

#css3 动画 在CSS3中可以通过animation创建复杂的动画序列,像[transition](http://www.cnblogs.com/fxycm/p/4635396.html)属性一样用来控制CSS的属性实现动画效果。 animation实现动画效果主要由两个部分组成。1. ...

css扩展技术:Less和Sass的区别

发表于2015-07-20 09:37:47|--次阅读

这个周学习了Less和Sass这两个css框架,我基本了解了它们各自的语法和特性,并通过两个html网页设计的练习,感受一下它们给我们开发者在进行css网页布局过程中带来的便利。下面是我对它们之间的区别的一些总结。Less和Sass的相同之处:1.变量:可以单独定义一系列通用的样式,在需要的时候进行...

css3 过渡记

发表于2015-07-20 09:37:04|--次阅读

#CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。 transition:[ || || || ] **transition-prope...

CSS3 变形记

发表于2015-07-20 09:36:51|--次阅读

#CSS3 变形 CSS3变形是一些效果的集合,比如平移,旋转,缩放和倾斜效果,每个效果都称为变形函数。##transform transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transform:none | [] *![](https...

在windows7 上安装 Sublime Text 3 及其插件

发表于2015-07-20 09:36:27|--次阅读

1、下载地址:http://www.sublimetext.com/3请根据你的平台,选择适当的安装版本安装完毕后,设定TAB键为4个空格( Preferences——>Setings-User):{ "tab_size": 4, "translate_tabs_to_spaces": ...

使用float和display:block将内联元素转换成块元素的不同点

发表于2015-07-17 16:20:34|--次阅读

使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联元素使用float属性让内联元素浮动起来,或者为内联元素添加display:block。虽然两者都可以让内联元素转换成块级元素,但是有区别的。代码实例如下:蚂蚁部落蚂蚁部落以...

CSS如何实现图片上下垂直居中

发表于2015-07-17 16:20:17|--次阅读

CSS如何实现图片上下垂直居中:在很多时候需要将图片上下垂直居中,不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重,下面就简单介绍一下其中的两种。方法一:使用margin方式,使图片在div中上下垂直居中。margin-top值的计算方式是:div的高度/2-图片高度/...

id的优先级高还是style的优先级高

发表于2015-07-17 16:20:08|--次阅读

id的优先级高还是style的优先级高:大家都知道id选择器具有较高的优先级,直接写在标签内的style也具有非常高的优先级,大家可能会比较一下两者到底谁的优先级高,下面通过实例来介绍一下谁的优先级更高。代码实例如下:蚂蚁部落蚂蚁部落原文地址是:http://www.51texiao.cn/div_...

如何利用CSS实现各种几何图形形状效果

发表于2015-07-17 16:19:03|--次阅读

如何利用CSS实现各种几何图形形状效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度。大家都知道CSS具有强大的功能,能够让页面变得美观靓丽,随着CSS的版本的提高,功能也越来越强大,下面简单介绍一下如何使用CSS实现各种几何图形效果。一.实现正方形:蚂蚁部落二.实现矩形:蚂蚁部落三.实现圆...

在windows7 上安装 Subline Text 3 及其插件

发表于2015-07-17 15:21:12|--次阅读

1、下载地址:http://www.sublimetext.com/3请根据你的平台,选择适当的安装版本安装完毕后,设定TAB键为4个空格( Preferences——>Setings-User):{ "tab_size": 4, "translate_tabs_to_spaces": ...

css 盒模型相关样式

发表于2015-07-17 15:21:01|--次阅读

话不多说,一切还是从最基础的说起。盒的类型1.盒的基本类型 在css中,用display定义盒的类型,一般分为block类型与inline类型。 例如div属于block类型,span属于inline类型 我是div 我是span 我也是span 通...

CSS3 - 文字和字体

发表于2015-07-17 15:20:43|--次阅读

1,text-overflow 与 word-wraptext-overflow用来设置是否使用省略标记(...)标示对象内文本的溢出但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)...

猜你喜欢

友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京 ICP 证 14034497 号