那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

css3新增加的选择器Browse:4052

css3新增加的选择器

一、属性选择器: E[attr] 只要有属性名 E[attr=value] 属性名=属性值 E[attr~=blue] 包含这个blue整个单词就可以 E[attr^=c] 以这个字母c开头的 E[attr$=b] 以这个字母b结尾的 E[attr*=a] 只要包含a这个字母就行 E[attr|=z] 只要以字母z-开头的或者就是字母z的 二、结构性伪类选择器: E:nth-child(n) 第n个子节点 div:nth-child(odd) 奇数行 div:nth-child(even) 偶数行 div:nth-child(2n) 2的倍数 E:nth-last-child(n) 倒数第n个 三、其他: E:empty 空元素 E:first-child 第一个子节点、和 E:nth-child(1)等价 E:last-child 倒数第一个、和 E:nth-last-child(1)等价 ...

时间:2015-09-04
分类:CSS , 前端开发
标签:
评论:0

love 玫瑰花Browse:7419

玫瑰花

< !doctype html> <html> <head> <title>Love</title> <meta charset="utf-8" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> < ![endif]--> </head> <body> <canvas id="c"></canvas> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; </script> <script> // start of submission // with (m = Math) C = cos, S = sin, ...

时间:2015-08-19
标签: , , , ,
评论:0

CSS中的行为——expressionBrowse:4204

1

CSS中的行为——expression 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处。 IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素 固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结 果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 给元素固有属...

时间:2014-12-07
分类:CSS , 前端开发
评论:0

position:fixed兼容性 IE6震动 解决方案Browse:10206

position:fixed兼容性 IE6震动

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自 己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这 个属性的时候,是不可能直接无视的。   你是如何让position:fixed在IE6中工作的? 本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。 如何解决“振动”的问题? 显然IE有一个多步的渲染进程。当你滚...

时间:2014-06-08
分类:CSS , HTML , 前端开发
标签: ,
评论:0

7件你不知道但可以用CSS做的事Browse:4926

7件你不知道但可以用CSS做的事

不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶。今天,我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。   CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试。一个新API:@supports,不管怎样,已经出现在开发人员面前,它能让你用CSS来做特性测试。以下是一些@suppo...

时间:2014-05-12
分类:CSS , 前端开发
标签:
评论:0

纯CSS3实现的图片滑块程序 效果非常酷Browse:5154

纯CSS3实现的图片滑块程序 效果非常酷

之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得还是挺不错的,先来看看效果图: 看上去挺不错的吧,简洁、清新、大气。 当然我们也可以在这里查看DEMO演示。 接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav"> <ul> <li><input type="radio" name="btn" value="one" checked="checked" /> <label for="btn"></label> <figure> <img src="images/01_Fabio_Ba...

时间:2014-04-17
分类:CSS , 前端开发
标签:
评论:0

Web 开发中 9 个有用的提示和技巧Browse:8133

Web 开发中 9 个有用的提示和技巧

1. 使用 html5 的 placeholder 属性 以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能,一个输入框在没获取焦点时显示某个提示信息,当获得输入焦点就自动清除提示信息,目前支持该属性的浏览器有:Opera 11+, Firefox 9+, Safari 5+, IE 10+,不过下面提供的代码对于不支持 placeholder 的浏览器也适用:         // jQuery code var i = document.createElement("input"); // Only bind if placeholder isn't natively supported by the browser if (!("placeholder" in i)) { $("input[placeholder]").each(function () { var self = $(this); self....

时间:2014-04-15
分类:CSS , HTML , 前端开发
标签: , ,
评论:0
Search