关于CSS优先级的问题,是一些同学的难题,其实这也是入门级的知识。

在http://www.cssforest.org/faq/topic/view/19.html这里仔细看了博主写的内容。确实分析的很好,但是个人觉得写得有点乱,而且简单的问题说的复杂了。大家可以看http://www.sonyes.cn/article/css/123.htm这里有更简单的方法,也更明了一些。

一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1(一个html选择器)
div p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div p.tree的特性是1+1+10=12,(两个html选择器,一个class选择器)
#baobab的特性是100(1个ID选择器)
body #content .alternative p的特性是112(两个html选择器,一个ID选择器,一个类选择器)
按照上面的规则,div p.tree的特性比div p高,body #content .alternative p又比它们两个都高。

全文阅读 »

菩提树下–WebRebuild第三届年会

2009/09/03 10:51  |  分类:Xhtml

一年一度的WebRebuild年会,今年选定了在深圳华侨城的午后浓香举行。从年会的第一年《革命》到第二年《蜕化》到第三年的《菩提树下》。如会上所说,取名为菩提树下是因为释迦牟尼在菩提树下悟道同时也是在菩提树下开始宣扬佛法的。故此,像我们创立WebRebuild的宗旨,领悟技术,分享技术。今年的WebRebuild年会人数为65人(实到)增长率达到325%,大大地超过预期。从分享内容上除了迅雷原有暂定的《仓促中的页面构建》《居中背景图片显示问题》,PPT也有分享,共有兴趣的童鞋下载。

下载地址:http://www.webrebuild.org/

img图片下多余空白Bug

2009/09/02 00:10  |  分类:Css

在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。

设置父对象的文字大小为0px
即,在#sub中添加一行:“font-size:0;”可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

改变父对象的属性
如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码:“width:88px;height:31px;overflow:hidden;”。
全文阅读 »

[推荐]FLASH盖住层的解决办法

2009/08/26 11:22  |  分类:Javascript

经常在群里或者论坛上看到有童鞋问一个问题,那就是FLASH盖住了DIV层。那么怎样才能让DIV层位于flash对象之上或者说层如何叠加在flash上面呢?

这里提供了经常被用到的关于flash盖住层的解决办法.

通常的办法是将flash设置为透明,给flash增加两个参数
<object>中加入 <param name=”wmode” value=”transparent” />
<embed>中加入 wmode=”transparent”
我这样做了,然而结果是在firefox中正常了,而 IE7,Opera,和Safari中均无效,层依然被flash盖住,尝试给层加上最优顺序z-index依然无法解决flash盖住层的问题尝试将flash放入层中,依然无法解决,在层与flash的优先顺序中,flash似乎总是优先于层的冥思苦想了1分钟,发现问题在这里,在dreamweaver 8中自动给swf加入了一个控件AC_FL_RunContent(),这是一个js函数,就是避免在IE中需要激活swf控件的函数,看到里面有设置宽度,高度和flash来源之类的东西,我想是不是需要在这里也添加呢?按照AC_FL_RunContent()参数的格式测试了一下,结果通过

全文阅读 »

一个页面加载进度条的效果

2009/08/24 11:55  |  分类:Css

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
 <HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
  <script type=”text/javascript”>
 document.write(‘<div id=”loadbox”><span>加载中,请耐心等待</span><img src=”http://www.funly.cn/img/load.gif” width=”160″ height=”20″ /></div>’);
 window.onload = function ()   {  
  document.getElementById(‘loadbox’).style.display=”none”;
  document.getElementById(‘imglist’).style.display=”block”;
 }
</script>

全文阅读 »

CSS为图片添加5种样式的方法

2009/08/19 10:21  |  分类:Css

文章转自暴风彬彬 BLOG:http://blog.bingo929.com/spice-up-your-images-with-css-5-way.html
加在这里的是自己的话:其实这些东西没什么特别,无非也是用了定位,和填充,相当于的实现了想要的效果,有些实用,有些也就是玩玩而已。
1, 阴影效果.
通过使用带有一些padding之的背景图来添加阴影效果。
演示:

http://www.sohtanaka.com/web-design/examples/drop-shadow/dropshadow.htm

HTML:
”"

CSS:
img.shadow {
background: url(shadow-1000×1000.gif) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

全文阅读 »

[css]推荐position定位

2009/08/13 20:20  |  分类:Css

使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。

  其实,要想控制好层的绝对定位,只要理解CSS中关于定位(position)的定义,一切就会变得轻松简单。
  CSS中关于定位(position)是这样定义的:

  定位(position)允许用户精确定义元素框出现的相对位置,可以相对于它通常出现的位置,相对于其上级元素,相对于另一个元素,或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述,而其位置由此元素的包含块来决定的。

  包含块(containing block)是格式编排发生的关联场景,例如,一个加粗的元素的包含块可以是该元素所出现的段落
在理解定位之前,首先,要先理解HTML文件的结构,例如有一个html文件内容如下:

CSS大部分能力是基于元素的“父子”关系,在图2的家族树中,每个元素都是另一个元素的“父”或者“子”或者2者都是。例如:body既是html的子元素,又是h1的父元素,而html就是h1的祖先,h1则是html的子孙。

全文阅读 »

关于IE8的css hack

2009/08/05 09:55  |  分类:Css

IE8出世已经很长时间了,一直都没工夫去用。最近升级了一下浏览器,说实话,我不是很喜欢,可能是也是习惯的原因吧。
对于前端开发的关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack:

.mytest{
color:#000000; /* FF,OP支持 */
color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和“_”的css hack;所以我们可以这样写hack */
[color:#000000;color:#00FF00; /* SF,CH支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}

其中:OP表示Opera,SA表示Safari,Ch表示Chrome;

[css]hover伪类在ie6下的处理

2009/07/29 13:24  |  分类:Css
sss

sss

其实,问题很简单,就是hover伪类在IE6中得不到很好的支持,
因为IE6只支持css1,而在css1中hover伪类只能针对a标签来起作用,
看了一下淘宝的代码,他们的解决方法是:
首先,按照ie7/FF都支持的css2的写法来写。
其次针对IE6不支持css2再做特殊处理。也就是通过javascript来弥补ie6下的不足。
全文阅读 »

CSS使图片、文字垂直居中对齐

2009/07/27 09:43  |  分类:Css

我们一般会使用标记的align属性使其周围的文字按某种方式对齐,
但是align是外观属性,在Web标准盛行的今天,这个属性已经是不推荐使用了。

程序代码

全文阅读 »

Pages: Prev 1 2 3 4 5 6 7 8 ...31 32 33 Next