月度归档：「 八月 2009 」

三个CSS高级匹配属性选择器

发表于 由 14 条回复»

CSS的选择器可谓种类繁多，属性选择器就是其中一种，虽然老浏览器(如IE6)不支持，但当前主流的标准浏览器都很好的支持。所以有必要学习一下。

所谓属性选择器就是能选择具有指定属性元素的CSS选择器。比如：

input[type="text"] { border:1px;}

这条CSS规则就声明了类型为文本框的输入标签的边框为1像素。这是一般而言的属性选择器，当元素比较复杂时就得用到可以匹配属性的高级选择器了。比如：

div[class^="menu"] { color:red;}

div[class$="menu"] { color:red;}

div[class*="menu"] { color:red;}

大家可以看到不同的一点就是class后面跟的三人符号：”^”,”$”,”*”。分别表示：

1.匹配具有class属性，且值以menu开头的div元素。例如：class为menu1,menua,menu0都可以渲染指定CSS规则。

2.匹配具有class属性，且值以menu结尾的div元素。例如：class为1menu,amenu,0menu都可以渲染指定CSS规则。

3.匹配具有class属性，且值含有menu的div元素。例如：class为1menu,menu1,0menua都可以渲染指定CSS规则。

查看效果

注意：须在标准浏览器下浏览(IE7+ , FireFox2.0+ , chrome1.0+ , safari3.1+)

网页设计必备PNG素材

发表于 由 29 条回复»

对于一个网页设计工作者来说收集一些良好的设计素材会提高我们的工作效率，加上个人的设计创意就可以完成一部非常不错的网页作品甚至设计作品。这两天没什么写的了就把我自己收藏的一些漂亮的PNG素材发出来给大家分享。

web-desgin

点击下载

小提示：网页设计最重要的是要有创意，要有自己的风格。借用可以但不能copy哦^!^

JavaScript函数递归调用

发表于 由 8 条回复»

学习C语言或者考二级C的人都会知道函数的递归调用这个知识点是最难的了，理解它对我的编程的逻辑思维会有很大的帮助。那么在JavaScript中是怎样使用递归的呢，一个很经典的例了就是平方和的计算。

代码如下：

function sumn(n) {
	if (n==1)

		{ return n; }

	else
		{ return ( n*n + sumn(n-1) ); }
}

调用此函数就可以计算出n的阶乘。比如我们计算3的阶乘，函数sumn(3)的执行过程如下：

square-sum

IE6 bug 神密的”断头台”

发表于 由 5 条回复»

最近看 亚当教程 时发现了这个IE6 bug，刚好我的博客sidebar部分也遇到此问题所以就发出来和大家分享一下。由于此bug只属于IE6的独特之处原因也说不清。所以直接上代码：

XHTML代码：

<div>
  <div>浮动元素<br/>[标准浏览器中不会有问题]</div>
	<a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a>
	<a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a>
	<a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a>
	<a href="#">IE6中碰到第三个a标签会隐藏掉一部分浮动元素</a>
  <div></div>
</div>

CSS代码：

.box-outer{ padding:10px; border:1px solid #ccc; background:#eee;
	height:1%; overflow:hidden}
.box-inner{ float:left; padding:10px; border:1px solid #ccc;
	 background:#eee; width:80px; height:120px;}
a		{ text-decoration:none; display:block;}
a:hover		{/*background:#fff;*/
		 /*padding:1px;*/
	 	 border:1px solid red;
		/*三个属性任意一个都可以使IE6产生bug*/}

此时在标准浏览器中是完全正常的，介是在IE6中当鼠标移动到第三个链接时会使浮动元素中的部分消失。修复这个部题的办法也比较简单只要链接后加入一个清除浮动的div就行了。从这个例子中也可以看出来：heigh:1%; overflow:hidden清楚浮动的办法也有不可之处。加入一个额外的div来清楚浮动虽然背离标准但效果应该是最好的也最符合浮动的定义。

点这里看效果

IE中a标签伪类子元素的响应Bug

发表于 由 13 条回复»

在许多用纯CSS实现效果的时候会用到a标签链接时字元素的样式。比如 CSS制作二级菜单

原因是这样的：由于IE6以下的老浏览器不支持除a元素以外的元素伪类。比如列表的伪类li:hover，所以我们在制作相关效果的时候就必须得用a元素的伪类:hover了。

比如我想实现如下效果：当鼠标移动到a标签时它的子元素span背景为红色。代码如下：

xhtml代码：

<div>
    <a href="#">鼠标移入a标签时span元素背景色应为#ccc边框为#f00
    	<span>
span元素 span元素 span元素 span元素 span元素 span元素
		</span>
    </a>
</div>

css代码：

body { font:12px Verdana, Geneva, sans-serif}

.box {
		width:170px; height:150px; padding:5px;
		border:1px solid #ccc; background:#eee;
	  }
a{
	display:block; width:140px;
	padding:10px; border:1px solid #f00;
 }

a .inner {
			display:block; padding:10px;
			background:#fff; border:1px solid #ccc;
         }

a:hover .inner { background:#ccc; border-color:#f00}

效果预览

理论上这两段代码完全可以达到要求，但在IE中却不能如愿。这是因为在IE里面a:hover的时候元素没有hasLayout(拥有布局)。知道了这一点后就很好解决了。加入任何一条可以激活hasLayout的CSS规则：

a:hover { zoom:1;	/*在a标签的伪类中加入一条可以使元素拥布局的规则*/}

当然zoom属性是通不过CSS验证的，所以你也可以修改成其它的规则只要能激活元素的hasLayout。这儿我给出可以使元素hasLayout的几条CSS规则：

  • position: absolute
  • float: left 或者 right
  • display: inline-block
  • width: 任意值
  • height: 任意值
  • zoom: 任意值 (微软特有属性，不能通过验证)