网站自定义的CSS样式不可访问
作者： veeky 时间： 2008年01月15日 星期二公司项目测试当中，将自定义的CSS样式文件COPY到网站App_Themes目录当中，但是访问的时候确不能访问到这个定义的样式，网站环境为，表单认证，允许匿名访问，， 解决方法： 在App_Themes目录 NTFS权限中，添加 IIS匿名访问用户，internet 来宾用户 的权限即可.
CSS垂直树形下拉菜单
作者： admin 时间： 2007年10月21日 星期日第一步:建立菜单
首先建立菜单架构非常重要,最好的方法是使用ul来建立各菜单内容的从主关系.很复杂么?其实只要一路写下去就OK了:
| 以下是引用片段： <ul> <li><a href=”#” mce_href=”#”>Home</a></li> <li><a href=”#” mce_href=”#”>About</a> <ul> <li><a href=”#” mce_href=”#”>History</a></li> <li><a href=”#” mce_href=”#”>Team</a></li> <li><a href=”#” mce_href=”#”>Offices</a></li> </ul> </li> <li><a href=”#” mce_href=”#”>Services</a> <ul> <li><a href=”#” mce_href=”#”>Web Design</a></li> <li><a href=”#” mce_href=”#”>Internet Marketing</a></li> <li><a href=”#” mce_href=”#”>Hosting</a></li> <li><a href=”#” mce_href=”#”>Domain Names</a></li> <li><a href=”#” mce_href=”#”>Broadband</a></li> </ul> </li> <li><a href=”#” mce_href=”#”>Contact Us</a> <ul> <li><a href=”#” mce_href=”#”>United Kingdom</a></li> <li><a href=”#” mce_href=”#”>France</a></li> <li><a href=”#” mce_href=”#”>USA</a></li> <li><a href=”#” mce_href=”#”>Australia</a></li> </ul> </li> </ul> |
第二步:视觉上的修饰
上面所写的代码直接在浏览器下可以说非常的难看…所以我们先给他们加上点样式,不至于因为外表的问题弄的你没有兴趣继续做下去,呵呵
首先我们把烦人的点点去掉,并定义这个菜单的宽度:
| 以下是引用片段： ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; } |
接下来,我们要定义里面内容部分,非常幸运,列表默认的排列就是垂直的,这与我们的要求相一致,定位方式我们应该设置为相对定位(relative)因为副菜单要在相对的位置上进行绝对定位:
| 以下是引用片段： ul li { position: relative; } |
现在我们定义的就是副菜单的内容部分,使用left和top属性我们就可以让它们显示在主菜单内容的右边.display属性值为none所以在默认情况下是隐藏的:
| 以下是引用片段： li ul { position: absolute; left: 149px; top: 0; display: none; } |
最后得修饰下里面的a元素:
| 以下是引用片段： ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } |
但因为IE的显示BUG,所以得加上下面这段话进行修复:
| 以下是引用片段： /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */ |
第三部:让它运作起来
我们需要在我们移动到主菜单上时显示副菜单内容:
| 以下是引用片段： li:hover ul { display: block; } |
好了,你可以测试下代码了,1%人可能会兴奋地叫起来,呵呵遗憾的是就目前这些代码还不能够在IE上运做作出我们想要的结果.要让IE运作出一样的效果,我们得使用一段JS代码,不会非常的烦琐:
| 以下是引用片段： startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById(”nav”); for (i=0; i<navRoot.childNodes.length; i ) { node = navRoot.childNodes[i]; if (node.nodeName==”LI”) { node.onmouseover=function() { this.className =” over”; } node.onmouseout=function() { this.className=this.className.replace» (” over”, “”); } } } } } window.onload=startList; |
好了,其他代码再做下补充,这个功能就能实现了:
| 以下是引用片段： li:hover ul, li.over ul { display: block; } <ul id=”nav”> |
自己动手做一个吧,可以更好看些
避免表格table被撑开变形的CSS
作者： admin 时间： 2007年09月21日 星期五如何避免表格因为图片尺寸或者过长的英文字符而变形撑开，在CSS加入以下代码就可以防止，同时英文单词也会按单词断行，不是按字母这个。我想说的是这个在CSS2.0是不支持的，但是能解决一些实际问题。页面设计不是为了标准检验而设计，还是以用户使用为主，在目前有些WEB标准无法解决的一些问题上，我会采用一些非标准的方法处理，只要主流BROWSER如IE,Firefox,Netscape,Opera等上能正确显示，我会把通过WEB表准的校验放在次要位置，并且MS已经建议在CSS3。0中加入这个属性了，也许CSS3。0会支持。WEB标准也是在发展的，也许明天的标准就加入了这个属性，或者出现新的属性来解决。
看看这个连接吧
http://www.w3.org/TR/2003/CR-css3-text-20030514/#wordbreak-props
常用的CSS代码片段：
<style>
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
</style>
完全用CSS实现的中英文双语导航菜单
作者： admin 时间： 2007年09月21日 星期五这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做。
实现原理：
XHTML
<ul id=”nav”>
<li><a class=”bi” href=”index.html” mce_href=”index.html”>Home<span>首 页</span></a></li>
</ul>
从上面代码可以看出，中文放在 span 标签里，关键是需要在初始时，使其的属性不可见。
CSS
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
链接的属性是相对定位，那在此标签里的元素可将其作为参照点。 在 span 元素里的中文因其设定了不可见，所以在初始状态时，只能显示英文。而当鼠标悬停在菜单上时，
span 元素里的设定变为可见，Z轴为99 ，覆盖在英文上面，从而实现了语言文字的转换。缺点：因为中英文字的长度关系，不能实现自适应宽度，只能固定宽度。
CSS层叠样式的主次顺序
作者： admin 时间： 2007年09月21日 星期五当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。
正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的内置样式表。
网页制作者应该小心地使用! important 规则，因为它们会超越用户任何的! important 规则。例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式需要的用户能阅读网页。
选择符规则: 计算特性
基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。
统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。
最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表:
#id1 {xxx} /* a=1 b=0 c=0 –> 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 –> 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 –> 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 –> 特性 = 001 */
特性的顺序
为了方便使用，当两个规则具同样权重时，取后面的那个。
最近评论