热门标签： c c# c++ asp asp.net linux php jsp java vb Python Ruby mysql sql access Sqlite sqlserver delphi javascript Oracle ajax wap mssql html css flash flex dreamweaver xml

最新文章 : css

CSS 透明度大汇总

　　近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。
　　这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。
　　关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。
1. 旧的Opacity设置
　　以下代码是Firefox和Safari旧版本所需的透明度设置:
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
　　-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。
第二行使用专用属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。
2. 在Firefox, Safari, Chrome和Opera下的CSS透明度
　　以下代码是除了IE外的所有 ......

【总结】浏览器CSS Hacks汇总

浏览器兼容可以说是前端开发所要面对的第一个挑战，目前我的电脑上已经安装了6种浏览器（基于IE内核的不算，如Maxthon等）。
　　CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则。实现浏览器兼容主要有两种方式条件样式表和CSS Hacks（Selector Hacks、Attribute Hacks）。对此根据一些资料汇总了一些CSS Hacks方法。
1.条件样式表
像这样的代码你应该见过:
<link rel="stylesheet" type="text/css" href="css/style.css" />

PS：yahoo的内部编码最佳做法并不建议使用有条件的样式表。它会增加额外的平均1或2个HTTP下载请求（参考这里）。
2. 选择器Hacks（Selector Hacks）
/* IE6 及以下 */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (IE 6,7以外) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 及以下, safari 2 */
html:first-child #cinco { color: red }

/* Saf ......

CSS Expression 的优化

      IE 浏览器中 CSS 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。
      如何对 CSS 进行优化呢？
      至少：如果我们将 CSS 在匹配的元素中仅执行一次，性能将会提升很大。
      old9 在《CSS Reloaded》一文中提供了一个解决方案：
     在 CSS 语句体里，将触发该的 CSS 属性重置。
例如：
div {
zoom: (function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}
补充几点：
CSS 执行在任意一个匹配的元素上。
在 CSS 内， “this”关键字指向当前匹配的 HTML 元素。
CSS 属性选用一些不常用的属性来触发，触发完重置回默认值。
      最近在 Ajaxian 的文章《Creating a querySelector for IE that runs at “native speed”》中看到作者 Dion Almaer 也提供了一个类似的解决方式：
div {
-singlex: (this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
} ......

CSS代码中的“clear:both;”失效了

我最近在模仿博客园，制作一个个人博客，突然发现Footer部分浮动到了Content部分，我在Footer部分已经加了一句“clear:both;”，为什么还会出现这个问题。Footer部分的CSS代码如下： /*页面底部*/
#Footer {width:100%;height:70px;margin:0 auto;clear:both;} /*如果加了clear:both; 此部分就不会浮动了*/
#Footer p{text-align:center;line-height:2.0em;width:auto;} 因为之前页面不会出现类似的情况，无论左边的导航栏和右边的内容区域如何变化，Footer部分都会老老实实的在自己的岗位上。后来，我终于找出了出现这个问题的原因：Content部分的Html内容是从数据库直接截取出来的，此部分存在一行多余的代码
“” 并且没有标记和标记和其对应，所以导致下面大部分代码失效。如下图所示：
解决方案就是将多余的代码“” 删除，测试成功。总结：1、如果想从数据库中截取一部分包含html标记的内容，必须提前对其进行格式化，否则一些不完整的html标记会导致一些不可预料的错误。 2、html格式化的方法待续。 ......

js 修改CSS文件中的样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
    <style id="">
.class1{
margin-left:135px;
margin-top:1px;
}
.b{
margin-left:135px;
margin-top:1px;
}
</style>
<script>
function hidden(){
if(typeof document.styleSheets != "undefined")
{
   var printStyleSheet = document.styleSheets[0];
   var printRules = null;

   if (typeof printStyleSheet.rules != "undefined")
   {
    printRules = printStyleSheet.rules;
   }else{
   printRules = printStyleSheet.cssRules;
   }
  for(var i=0; i <printRules.length; ......

简单详细的CSS做菜单教程支持IE6 IE7 IE8 Firefox

一直在想用css怎么做下拉菜单，之前看到的下拉菜单都是用js做的，可是又不懂js，今天终于用css研究出来了，大家指教指教。
下面的代码直接考了就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单支持IE6 IE7 IE8 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none ......