CSS教程 彻底掌握Z-index属性
大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。 Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败感。但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多layout方面的挑战提供强有力的帮助。

  分类: CSS

绝对定位元素被遮挡的解决方法
本文实例讲述了绝对定位元素被遮挡的解决方法。分享给大家供大家参考。具体方法如下: ie7下 绝对定位元素即使z-index值很高,如果其设置相对定位的父元素没有设置z-index值的话,其可能(这种可能性当然是布局存在遮盖的时候)会被后面设置了相对定位的元素遮挡(即使后面的相对定位的元素没有设置z-index值);

  分类: CSS

全面了解行内元素与块级元素的区别
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。 块级元素:(以下列举比较常用的块级元素,详情可在w3cschool查询) XML/HTML Code

  分类: CSS

CSS3之多背景background使用示例
CSS3中新加了多背景这个属性,和CSS2的使用方法一样,只不过图片可以从1个图片变成多个图片了。在CSS3中多背景的使用是非常常见的,所以,这个多背景的属性应用很普遍的,所以掌握CSS3之多背景background是当务之急呀。 一、background的语法 1、background的分写

  分类: CSS

纯CSS3实现滚动的齿轮动画效果
纯CSS写的齿轮效果。支持chrome,firefox,比较粗糙。各位见谅,希望你能看到的是思想,而不是技术的东西。效果预览: 原理的话也比较简单,主要是css3画圆,然后弄出几个轮子的齿(这里构建锯齿的方法是我个人比较满意的地方,就是用一个贯穿整个圆形的长条,然后transform:rotate一定的度数,然后按照规律写下去,一个轮子就出来了。如果结合js做的话,能做到更多更精细的效果),然后画出两个轮子。用keyframes(关键帧)

  分类: CSS

解决EXT.NET在IE9下中文太小Default.css
复制代码代码如下: .ext-el-mask-msg div { font-size: 12px;

  分类: CSS

CSS的后代选择器基础使用示例
基础来看一个后代选择器的最简单写法,strong标签属于p标签的后代,i标签属于strong标签后代:HTML代码: XML/HTML Code

  分类: CSS

css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
主要是利用了css3的 rolate(旋转) 和 skew (倾斜)样式 先上代码: html 很简单 复制代码代码如下:

  分类: CSS

纯css3实现的动画按钮的实例教程
  今天给大家分享一款纯css3实现的动画按钮。第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图:   实现的代码。   html代码: XML/

  分类: CSS

CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法。分享给大家供大家参考。具体方法如下: 给class属性名为className的元素添加闪烁动画效果复制代码代码如下:

  分类: CSS

浅析CSS 属性之中经常出现的百分比
CSS 的属性值中经常会出现百分比,搞清它们的基数是一件很重要的事情。我特意查看了一下 W3C 的 CSS2.1 标准,在此整理下: 百分比单位 乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width 乘以包含块的高度 top, bottom, height, max-height, mi

  分类: CSS

基于css3 animate制作绚丽的动画效果
Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单。首先给大家展示效果图: 效果演示 源码下载 如何使用首

  分类: CSS

css实现数字分页效果
CSS如何实现数字分页效果: 相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。 代码实例如下: 复制代码代码如下:

  分类: CSS

详解CSS3的opacity属性设置透明效果的用法
CSS3 opacity 属性的功能是用来控制网页元素的透明效果(调整不透明度),早期网页设计常常会用到许多的透明效果,通常都是透过 png 图层来制作透明的感觉,现在网页设计师可以使用 CSS3 opacity 属性来轻松的达到网页元素不透明度的调整,CSS3 opacity 属性的语法非常简单,只需要透过数字的调整,就能呈现出不同的不透明度,进而设计出相当具有现代感的网页风格,可应用在网页图片、DIV 区块、span 区域、Table 表格 ... 等元素

  分类: CSS

div+css实现类似winxp桌面图标布局(至上而下从左往右)
前不就公司项目要求做一个比较蛋疼的布局,类似于window xp桌面图片布局方式,而且要求尽量不要用嵌入js脚本,用纯div+css布局,在不断探索和摸索下也只现实了IE8+,firfox, chrome浏览器,别的不多说,直接上代码。 复制代码

  分类: CSS

css实现点击滚动翻页的效果(无js)
复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  分类: CSS

cursor:hand与cursor:pointer的区别介绍
cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行。 cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。 cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。 结论:还是用 cursor:pointer 来的方便

  分类: CSS

实例讲解使用CSS实现多边框和透明边框的方法
CSS多边框 Backgrounds & Borders Level 3 还是一份草案的时候,CSS WG 就在是否支持多重边框的问题进行了大量的探讨,就像是讨论多重背景图片一样。不幸的是,当时认为多重边框的用处并不大,即使需要也可以使用border-image属性来模拟。不过,WG显然忘记了在 CSS 代码中灵活地调整边框,才是我们需要的,现在开发者只能使用一些Hack手段来模拟多重边框,比如使用多重元素的嵌套来模拟多重边框。现在

  分类: CSS

CSS3绘制有活力的链接下划线
链接下划线是非常常见的一种样式,最近做了一个非常简单的视觉效果,非常不错,完整代码查看。 XML/HTML Code复制内容到剪贴板

  分类: CSS

css3实现超立体3D图片侧翻倾斜效果
上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错。先来看看效果图。 如何,看上去挺不错吧,倾斜、阴影,让一张很普通的图片变得如此霸气。 另外你也可以在这里查看DEMO演示,鼠标滑过图片时会出现这样的效果。 那么接下来我们分析一下源码吧,显示html代码,非常简单:

  分类: CSS

快速导航

Copyright © 2016 phpStudy |