登高望远 » css

让superfish在IE6不被遮住

dengor — Tue, 08 Feb 2011 14:08:06 +0000

superfish是一个很好用的多级菜单js程序, 运用这个可以很容易做成级联菜单. 但是很在IE6下有个bug就是可能会被下面的层遮住弹出的菜单. IE6中会显示在最下面. 可以对菜单的li 加上 position 和 z-index来解决:

#menu li {position:relative; z-index:99;}

对于IE6的层显示问题解决方法有三，

1、position:relative改为position:absolute；

2、去除浮动；

3、浮动元素添加position属性（如relative，absolute等）

CSS样式id和class属性优先级问题

dengor — Wed, 20 Jan 2010 06:23:00 +0000

在DIV+CSS设计网页时, 总会碰到一些CSS属性优先级问题. 如果不清楚优先级的等级, 直接想当然的认为应该是这样, 就很容易出错. 这里分析一个本人碰到的问题, 学习一下属性优先级问题.

下面是代码测试代码:

1


2


3

上面代码本意是通过想通过div2class来去掉li前面定义的点, 按照越靠近优先级越高原则, 应该是应用 .div2class 中的定义, 但实际情况方点并没有去掉. 并没有应用 .div2class 还是按照 #div1 中的设置显示. 这证明 id 的优先级要高于 class.

总结一点经验就是: 通过继承来的属性 id 的优先级高于 class

CSS的优先级顺序: tag中的style > id > class > tag > 继承的属性按同样的顺序

原创文章转载请注明出处: 登高望远 [ http://www.dengor.com/archives/618.html ]

用CSS隐藏文字方法的比较

dengor — Fri, 13 Nov 2009 17:04:19 +0000

通过CSS来隐藏文字是网站设计做常用的方法, 有多种方法可以达到隐藏文字的目的. 这些方法各有优点和缺点, 下面就来看看这些用CSS隐藏文字的

一. CSS语句:display:none

这种方法就是使定义的区块内容都不可见, 来达到隐藏文字的目的，这种方法虽然简便且有效，但它有个致使的缺点就是对搜索引擎不友好，容易被认为是在作弊, 还有好多程序都会认为区块内容没有而略过而读不到内容, 这很不利于SEO的. 关于SEO具体可以看: SEO学习必须通过这个途径

二. CSS语句:text-indent:-9999px

此方法是通过text-indent是进行首行无限的负缩进，来达到隐藏文本的目的, 这种方法常见于图片LOGO的处理, 既能显示图片,又能有文字描述, 对SEO很有好处. 但对多行文本就有其不足之处，因为它的物理存在性, 会显示出滚动条.需加上white- space:nowrap;来弥补不足，还需设置line-height:0;或使用超小字体(在IE还是有问题)，最终代码如下:

.texthidden{
text-indent:-9999px;
white-space:nowrap;
line-height:0;
}

三. CSS语句:overflow:hidden

这也是一种比较好的方法,通过流出显示区, 而使文字隐藏, 代码如下:

.texthidden{
display:block;
overflow:hidden;
width:0;
height:0;
}

四. CSS语句:positon:absolute

用绝对定位把区块定位于非可视区，这种方法如果在定位过于复杂的页面容易产生意想不到的错误.

.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

用CSS隐藏文字方法的比较来看, 推荐二和三的方法, 如果是单行, 要点位显示的, 如LOGO的说明文字, 用text-indent:-9999px 比较好, 而对于内容比较多的使用overflow:hidden比较好.

对于其它的文字的修饰, 可以看下: 文字中间加横线和对文字打叉

本页链接: http://www.dengor.com/archives/350.html (转载请注明出处)

用CSS强制改变链接的颜色

dengor — Mon, 02 Nov 2009 06:47:11 +0000

在我们写有的程序模板的时, 有时想突出重点, 想临时改变链接的颜色. 会发出不太好操作, 因为如果用CSS直接定义的color 是不能改变链接的颜色的. 要去定义上级元素的 a 属性, 这样如果只有少量的几个链接要改变颜色, 这样去做就太麻烦了.

有没有简单一点的方法. 我的做法是先设好几个颜色的class, 直接在里加入一个class就行了.

如 : 登高望远

效果: 登高望远

下面是CSS代码:

a.white:link {color:#FFFFFF;} /*白色的链接 */
a.whitevisited {color:#FFFFF;} /*已访问的白色的链接*/
a.red:link {color:#FF0000;} /*红色的链接 */
a.red:visited {color:#FF0000;} /*红色已访问的链接*/

a.green:link {color:#339900;} /*绿色的链接 */
a.green:visited {color: #339900;} /*绿色已访问的链接*/

a.blue:link {color:#000099;;} /*蓝色的链接 */
a.blue:visited {color:#000099;;} /*蓝色已访问的链接*/

Jquery实现同级元素区别对待

dengor — Fri, 31 Jul 2009 13:11:55 +0000

对一个没有确定数目的element, 如果有的元素跟其它的不一样,处理起来很麻烦. 比如一个网站的导航菜单,我们希望在第每个菜单项的中间加个 | 来分隔, 这样的情形如果每项都用相同的style, 最后的一个也会出现一个分隔, 显然这不是我们所想要的. 所以你必须到程序中设置输出最后一项时,使用不同的Class. 这样程序和页面两个方面都要更改.

其实如果我们用Jquery的强大元素选择能力,完全可以不用去修改程序,只要在页面和加上几行JS代码就可以实现.

前提是页面载入了jquery, 加入以下代码:

$(document).ready(function() {
	$("#menu li:last").addClass("noseptation");
});

其中的$("#menu li:last")就是选择了id为menu的区块最后一个

,后面就是加上一个class,这个class设置没有分隔符就行了. 我们可以看出,

这种方法很简单, 还可以选择first,second,third…last,都可以加上不同的class. 确实很方便.