BlogJava-无可奈何花落去 似曾相识燕归来-随笔分类-CSShttp://www.blogjava.net/wangfeiyan-xz/category/43492.htmlzh-cnTue, 23 Mar 2010 17:08:25 GMTTue, 23 Mar 2010 17:08:25 GMT60css sprite学习（转）http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/23/316292.htmlAngle WangAngle WangTue, 23 Mar 2010 05:24:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/23/316292.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/316292.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/23/316292.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/316292.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/316292.html一，关于CSS Sprite
CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需 顾忌这个问题。
按照yahoo的rules for high performance web sites的原则，应当较少Client与Server端间 的HTTP Request次数。通过CSS Sprites方法将多张图片组装成单独的一张图片，可以有效减少HTTP请求 的次数。
当整幅图片载入完成后，你就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

二，CSS Sprite的使用

有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

三，CSS Sprite的例子

[原文：http://blog.rexsong.com/?p=746#comments]

1. 图片限制(Image Slicing)

典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、Gmail都是这么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 单图转滚(Single-image Rollovers)

触发切换图片的需求，传统方案得重新请求新图片，因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图，就能完美解决，然后再使用背景图技术模拟动态效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延长背景(Extend Background Image)

如果图片的某边可以背景平铺无限延长，则不需要每个角、每条边单独搞出来，图片能少一个就少一个。其实，这个理论还可以扩展到四角容器里，好处是能大大简化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

综合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

四，CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题，fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

五，相关资源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法测试工具：CSS tests and experiments

http://www.brunildo.org/test/index.html



Angle Wang 2010-03-23 13:24 发表评论
]]>js点击切换图片http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316130.htmlAngle WangAngle WangMon, 22 Mar 2010 03:06:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316130.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/316130.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316130.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/316130.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/316130.html
<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script type="text/javascript" language="javascript" >
 <!--
  window.onload=function(){
 document.getElementById("box").style.backgroundImage="url(1.jpg)";
 var box=document.getElementById("box");
 box.onclick=function(){
 //alert(box.style.backgroundImage);
 //alert(typeof(box.style.backgroundImage));
 if(box.style.backgroundImage.indexOf("1.jpg")!=-1)
 {box.style.backgroundImage="url(2.jpg)";}else {box.style.backgroundImage="url(1.jpg)"}
 }
  }
 -->
 </script>
 <style type="text/css">
 <!--
 #box{width:800px;height:600px;}
 -->
 </style>
</head
&lt;body>
<div id="box">
&nbsp;
</div>
</body>
</html>


Angle Wang 2010-03-22 11:06 发表评论
]]>css布局：侧边固定长度，内容自动适应http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316121.htmlAngle WangAngle WangMon, 22 Mar 2010 02:44:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316121.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/316121.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/22/316121.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/316121.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/316121.html
<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css">
 <!--
 #wrap{background:#000;}
 #content{margin-left:250px;height:1000px;background:#963;}
 #sideber{width:240px;float:left;height:1000px;background:#369;}
 -->
 </style>
</head>
<body>
<div id="wrap">
<div id="sideber">&nbsp;</div> <!--要让浮动元素放前面-->
<div id="content">&nbsp;</div>
</div>
</body>
</html>


Angle Wang 2010-03-22 10:44 发表评论
]]>CSS3的border-radius(圆角)http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315288.htmlAngle WangAngle WangFri, 12 Mar 2010 08:16:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315288.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/315288.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315288.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/315288.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/315288.htmlborder-radius(圆角)的几点说明.

 

border-radius(圆角)的几点说明：

border-radius:长度
Firefox支持border-radius(圆角)：-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
Opera支持border-radius(圆角)：border-radius:2px;
IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/

eg:/* content */
.blockcommon{
 margin-left: 10px;
 margin-right: 10px;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 background: #fff;
 border: 1px solid #eed8c6;
}

Angle Wang 2010-03-12 16:16 发表评论
]]>css下margin、padding、border、background和font缩写示例http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315272.htmlAngle WangAngle WangFri, 12 Mar 2010 06:17:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315272.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/315272.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/12/315272.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/315272.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/315272.htmlCSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。
margin
　　margin-top:1px;
　　margin-right:1px;
　　 margin-bottom:1px;
　　margin-left:1px;
　　代码简化为：margin:1px
　　margin-top:1px;
　　margin-right:2px;
　　margin-bottom:1px;
　　margin-left:2px;
　　代码简化为：margin:1px 2px
　　margin-top:1px;
　　margin-right:2px;
　　margin-bottom:3px;
　　margin-left:2px;
　　代码简化为：margin:1px 2px 3px
　　margin-top:1px;
　　 margin-right:2px;
　　margin-bottom:3px;
　　margin-left:4px;
　　代码简化为：margin:1px 2px 3px 4px
　　注意：当属性值是0的时候单位可以不写如：0px 直接就写成0
padding
　　padding的书写方法和margin相类似
　　padding-top:1px;
　　 padding-right:1px;
　　padding-bottom:1px;
　　padding-left:1px;
　　代码简化为：padding:1px
　　padding-top:1px;
　　padding-right:2px;
　　padding-bottom:1px;
　　padding-left:2px;
　　代码简化为：padding:1px 2px
　　padding-top:1px;
　　padding-right:2px;
　　 padding-bottom:3px;
　　padding-left:2px;
　　代码简化为：padding:1px 2px 3px
　　padding-top:1px;
　　padding-right:2px;
　　 padding-bottom:3px;
　　padding-left:4px;
　　代码简化为：padding:1px 2px 3px 4px
border
　　border-width:1px;
　　 border-style:solid;
　　border-color:#000000;
　　代码简化为：border:1px solid #000
background
　　background-color:#CCFFFF;
　　 background-image:url(图片路径);
　　background-repeat:repeat-x;
　　 background-position:5px 4px;
　　代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px
font
　　font-size:26px;
　　 font-weight:bold;
　　font-family: “宋体”;
　　代码简化为：font:26px bold “宋体”
color属性值
　　color:#000000;
　　color:#ff0000;
　　代码简化为：color:#000, color:#f00

Angle Wang 2010-03-12 14:17 发表评论
]]>浅淡!important对CSS的重要性(转)http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315182.htmlAngle WangAngle WangThu, 11 Mar 2010 07:14:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315182.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/315182.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315182.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/315182.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/315182.html 　　前几天写一些CSS代码的时候又难为我了，因为那个该死的IE6对CSS的支持是如此的差劲，以前我还没注意过，因为做的东西基本都是基于IE的，可是我这次为博客写的CSS要支持不止IE一个浏览器，可恨的是我装的Windows 7，这里面自带的是IE8浏览器，我自认为已经没有问题了，可是打开IE6，仍然出现错位，于是我决定看看IE6到底是什么情况。
　　我把所有的CSS块儿全部使用边框包起来，结果看到在IE中两个div之间的距离明显要宽于其他浏览器，比如你写一个div的margin属性为20px，那么在IE中就好像是40px一样，这也就是为什么本来精度计算的刚刚好，在IE下却偏偏错位的原因。
　　后来我看到了!important这个属性，这个属性其实也是css规范中的，结果IE6愣是不支持，也正因为它不支持，才让很多的CSSer们找到了解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：

 Example Source Code [www.52css.com]
.home{
    margin-left:20px;
    margin-left:40px;
}

　　那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：

 Example Source Code [www.52css.com]
.home{
    margin-left:20px!important;
    margin-left:40px;
}

　　那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。
　　


Angle Wang 2010-03-11 15:14 发表评论
]]>学习中的点滴http://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315132.htmlAngle WangAngle WangThu, 11 Mar 2010 02:46:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315132.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/315132.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/03/11/315132.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/315132.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/315132.html 1、需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
例子：

<html>
  <head>
  <style type="text/css">
   body
   {
     background-image:url('eg_bg_03.gif');
     background-repeat:no-repeat;
     background-position:center;
     background-attachment:fixed;
   }
  </style>
  </head>
  <body>

  </body>
</html>

2、

clear:both

 CSS中 clear:both;可以终结在出现他之前的浮动
  

语法： clear : none | left |right | both


参数：

none : 允许两边都可以有浮动对象

both : 不允许有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象


说明： 该属性的值指出了不允许有浮动对象的边。请参阅float属性。 对应的脚本特性为clear


示例：

div { clear : left }

img { float: right }

<div style="clear:both;"></div>

主要是用在div套div的结构中。如果内div是浮动的，一般都需要clear浮动，不然的话内div会超出外div的框架

所用什么时候用clear:both;就很重要,一般我们在需要清除浮动的时候用到clear:both;不要轻意用到clear:both;因为它也有副伯用.

我们写一个clear:both;的例子:

<div style="float:left;width:100px;"> clear:both第1行第1列，</div>
<div style="float:left;width:700px;"> clear:both第1行第2列，</div>
<div style="clear:both;"> clear:both第2行。</div>


<div style="float:left;width:100px;"> 第1列，</div>
<div style="float:left;width:700px;"> 第2列，</div>
<div>第三列</div>
------------------------------------------------------------------------------------------------
<div style="float:left;width:100px;"> 第1列，</div>
<div style="float:left;width:700px;"> 第2列，</div>
<div style="clear:both;"></div>
<div>第三列</div>


3css疑难问题收集
表格与内联对象不换行：
table{
width:30em; 
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ 
} 
td{ 
width:100%; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 
} 

.text-overflow { 
display:block;/*内联对象需加*/ 
width:31em; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 
}



Angle Wang 2010-03-11 10:46 发表评论
]]>相邻选择器http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/26/313982.htmlAngle WangAngle WangFri, 26 Feb 2010 05:10:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/26/313982.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313982.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/26/313982.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313982.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313982.html注意：

IE 6本身并不支持相邻选择器；请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。

 
图  3-24

在图3-24中，可以看到加号被用来表示两个元素之间的相邻关系。你在这点上也许会有疑问：这么做看起来很舒服，但实际用途是什么？难道不能单独引用div#body来达到同样的效果吗？为什么需要一个相邻选择器？很高兴你这样问。在特定的情况下这个选择器会发挥作用，比如当几份HTML文档引用同一份样式表时。在一部分文档中，带有id名称heading的<div>元素和带有id名称body的<div>元素是相邻的，即它们在源文件中相继出现。在其他文档中这两个元素或许不是相邻的。如果你对这两种理论上不同的文档有不同的模板需求的话，自然会想通过某种方法来引用那些相邻的元素，这就是相邻选择器实际应用的一个例子。正如我在上一节"直接子选择器"中提到的那样，有时你不想创建新的id和类名。在某些情况下，当你使用相邻选择器时，能够避免创建新的类和id名称。

在接下来的概念验证型例子中，你将亲自试验相邻选择器。

试一试 相邻选择器

例3-5  按以下步骤，了解相邻选择器是如何工作的。

1. 在文本编辑器中输入以下标记：

<!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' xml:lang='en'>

            <head>

            <title>Next Sibling Selectors</title>

            <link rel='stylesheet' type='text/css' href='Example_3-5.css' />

            </head>

            <body>

            <h1>Next Sibling Selectors</h1>

            <p>

            The next sibling selector (or adjacent sibling combinator as

            it's officially called) allows you to select an element based on

            its sibling. This paragraph has a lightyellow background and

            darkkhaki text.

            </p>

            <p>

            This paragraph has a yellowgreen background and green text.

            </p>

            <p>

            This paragraph has no colored background, border, or text.

            </p>

            </body>

            </html>

2. 保存上述标记为Example_3-5.html。

3. 在文本编辑器中输入以下CSS：

body {

            font: 12px sans-serif;

            }

            p {

            padding: 5px;

            }

            h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

            h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }
4.保存样式表为Example_3-5.css。将它在支持相邻选择器的浏览器中载入，你将看到如图3-25所示的结果。
 
（点击查看大图）图  3-25

工作原理

相邻选择器基于相邻关系应用样式。下面是对Example_3-5.css中有关样式的分析。

Example_3-5.css中的第一个样式应用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素，则应用本规则中的声明。

h1 + p {

            background: lightyellow;

            color: darkkhaki;

            border: 1px solid darkkhaki;

            }

只有当<p>元素是直接与<h1>元素相邻的元素时，这条规则才起作用。

第二条规则里使用了一个更为复杂的相邻选择器。它表示如果一个<p>元素直接相邻于另一个<p>元素，并且后者也直接相邻于一个<h1>元素时，应用本规则中的声明。

h1 + p + p {

            background: yellowgreen;

            color: green;

            border: 1px solid green;

            }

就像直接子选择器可以基于父子关系应用样式一样，相邻选择器可以基于相邻关系应用样式。

在很多时候，如果能基于元素的属性或属性值应用样式会很有用。



Angle Wang 2010-02-26 13:10 发表评论
]]>li和ul标签用法举例http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313868.htmlAngle WangAngle WangThu, 25 Feb 2010 03:14:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313868.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313868.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313868.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313868.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313868.htmlLI代码的格式化:
A).运用CSS格式化列表符： ul li{
list-style-type:none;
}
B).如果你想将列表符换成图像，则： ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
C).为了左对齐，可以用如下代码： ul{
list-style-type:none;
margin:0px;
}
D).如果想给列表加背景色，可以用如下代码： ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码： ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }说明：display:block;这一行必须要加的，这样才能块状显示！

F).LI中的元素水平排列,关键FLOAT:LEFT： ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul><li>的区别
<LI> 的参数设定（常用）：
例如： <li type="square" value="4">

type="square"
只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"：
符号 是当 type="disc" 时的列项符号。
符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。
value="4"
只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。
<UL>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、等符号，故又称符号清单。
<UL> 的参数设定（常用）：
例如： <UL type="square">

type="square"
设定符号款式，其值有三种，如下，内定为 type="disc"：
符号 是当 type="disc" 时的列项符号。
符号 是当 type="circle" 时的列项符号。
符号 是当 type="square" 时的列项符号。

<ul>是项目列表，<li>是列表项，项目列表就是用符号来列的，所以你列出来默认的就是黑点啦，还有一个是<ol>这个是编号列表，用数字来列的，也是用<li>做列表项
<li>是 list item 即列表项，但列表有很两种，所以外面得有 <ul> 或者 <ol> 用来区别无序列表（小点点）和有序列表（1,2,3...）。



Angle Wang 2010-02-25 11:14 发表评论
]]>CSS实现隔行换色2种方法http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313860.htmlAngle WangAngle WangThu, 25 Feb 2010 02:35:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313860.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313860.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313860.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313860.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313860.html网页设计制作,CSS实现隔行换色的2种方法:

第1种方法:
<style type="text/css">
UL.myul1 LI{background-color: expression(this.sourceIndex%2==0?'#9FB7F6':'#B6C8F8');
}
</style>
<ul class="myul1">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li2">333</li>
<li id="li2">444</li>
<li id="li2">555</li>
<li id="li2">666</li>
</ul>


第2种方法:

<style type="text/css">
<!--
.li01 { background:#FFF; }
.li02 { background:#000; }
li a{width:100%;display:block;}
li a:hover{background:red;}
-->
</style>

<div id="list01"><ul>
<li class="title"><a href="#">title</a></li>
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
</ul></div>

<script Language="Javascript1.2">

objName=document.getElementById("list01").getElementsByTagName("li")

for (i=0;i<objName.length;i++) {
(i%2==0)?(objName(i).className = "li01"):(objName(i).className = "li02");
}
</script> 



Angle Wang 2010-02-25 10:35 发表评论
]]>DIV CSS网页布局：三行三列自适应高度的DIV布局 http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313855.htmlAngle WangAngle WangThu, 25 Feb 2010 02:08:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313855.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313855.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313855.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313855.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313855.html JS代码:版权归原作者,仅供学习研究.
 Example Source Codeom]
/*  
------------------------------------------------ 
PVII Equal CSS Columns scripts 
Copyright (c) 2005 Project Seven Development 
www.projectseven.com 
Version: 1.5.0 
------------------------------------------------ 
*/ 
function P7_colH(){ //v1.5 by PVII-www.projectseven.com 
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){ 
for(i=0;i oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){ 
for(i=0;ih){ 
dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;} 
document.p7eqth=document.body.offsetHeight; 
document.p7eqtw=document.body.offsetWidth;} 
} 
function P7_eqT(){ //v1.5 by PVII-www.projectseven.com 
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw! =document.body.offsetWidth){ 
P7_colH();} 
} 
function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com 
if(document.getElementById){document.p7eqc=new Array;for(i=0;i document.p7eqc[i]=document.getElementById(arguments[i]);} setInterval("P7_eqT()",10);} 
} 
function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com 
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height) ; 
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px'; 
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';} 
if(nh


Angle Wang 2010-02-25 10:08 发表评论
]]>DIV CSS网页布局常用的方法与技巧http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313853.htmlAngle WangAngle WangThu, 25 Feb 2010 02:04:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313853.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313853.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313853.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313853.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313853.htmlCSS布局常用的方法
float:none|left|right 
取值：
none:　默认值。对象不飘浮
left:　文本流向对象的右边
right:　文本流向对象的左边 

它是怎样工作的，看个一行两列的例子 
xhtml代码:

 Example Source Code
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> /*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/ 
</div>

CSS代码:
 Example Source Code
#wrap{width:100;height:auto;} 
#column1{float:left;width:40;} 
#column2{float:right;width:60;} 
.clear{clear:both;}


position:static|absolute|fixed|relative
取值：
static:　默认值。无特殊定位，对象遵循HTML定位规则
absolute:　将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 

它来实现一行两列的例子 
xhtml代码:
 Example Source Code
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
</div>

CSS代码:
 Example Source Code
#wrap{position:relative;/*相对定位*/width:770px;} 
#column1{position:absolute;top:0;left:0;width:300px;} 
#column2{position:absolute;top:0;right:0;width:470px;} 

他们的区别在哪？
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS常用布局实例
单行一列
 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content{margin-left:auto;margin-right:auto;width:400px;} 

两行一列 
 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;} 

三行一列
 Example Source Code
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} 
#content-mid{margin-left:auto;margin-right:auto;width:400px;} 
#content-end{margin-left:auto;margin-right:auto;width:400px;}

单行两列
 Example Source Code
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

两行两列
 Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

三行两列
 Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter{width:700px;margin-right:auto;margin-left:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 


单行三列
绝对定位 
 Example Source Code
#left{position:absolute;top:0px;left:0px;width:120px;} 
#middle{margin:0px190px0px190px;} 
#right{position:absolute;top:0px;right:0px;width:120px;} 


float定位一
xhtml代码:
 Example Source Code
<div id="wrap"> 
<div id="column"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
</div> 
<divid="column3">这里是第三列</div> 
<divclass="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/ 
</div> 

CSS代码:
 Example Source Code
#wrap{width:100;height:auto;} 
#column{float:left;width:60;} 
#column1{float:left;width:30;} 
#column2{float:right;width:30;} 
#column3{float:right;width:40;} 
.clear{clear:both;} 


float定位二
xhtml代码：
 Example Source Code
<div id="center"class="column"> 
<h1>Thisisthemaincontent.</h1> 
</div> 
<div id="left"class="column"> 
<h2>Thisistheleftsidebar.</h2> 
</div> 
<div id="right"class="column"> 
<h2>Thisistherightsidebar.</h2> 
</div>

CSS代码：
 Example Source Code
body{ 
margin:0; 
padding-left:200px;/*LCfullwidth*/ 
padding-right:190px;/*RCfullwidth CCpadding*/ 
min-width:200px;/*LCfullwidth CCpadding*/ 
} 
.column{ 
position:relative; 
float:left; 
} 
#center{ 
width:100; 
} 
#left{ 
width:200px;/*LCwidth*/ 
right:200px;/*LCfullwidth*/ 
margin-left:-100; 
} 
#right{ 
width:190px;/*RCwidth*/ 
margin-right:-100; 
}


Angle Wang 2010-02-25 10:04 发表评论
]]>CSS Hack汇总快查http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313851.htmlAngle WangAngle WangThu, 25 Feb 2010 02:00:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313851.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313851.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/25/313851.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313851.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313851.html

 

原文：http://andymao.com/andy/post/76.html

屏蔽IE浏览器（也就是IE下不显示）

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别

*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别

* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {……}
这句与上一句的作用相同。
仅IE6不识别

select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。

截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
只有Opera识别

@media all and (min-width: 0px){ select {……}  }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见


@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器，一般用不着

[Copy to clipboard] [ - ]CODE:
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别



Angle Wang 2010-02-25 10:00 发表评论
]]>制作网页的一般大小http://www.blogjava.net/wangfeiyan-xz/archive/2010/02/21/313490.htmlAngle WangAngle WangSun, 21 Feb 2010 01:17:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/21/313490.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/313490.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/02/21/313490.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/313490.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/313490.html高度：没有一个固定值，因为每个人的浏览器的工具栏不同。
宽度：
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770



Angle Wang 2010-02-21 09:17 发表评论
]]>CSS网页布局中易犯的10个小错误http://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311313.htmlAngle WangAngle WangSat, 30 Jan 2010 03:31:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311313.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/311313.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311313.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/311313.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/311313.html即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查html元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。

注: 本文来源于网络，出处不明。



Angle Wang 2010-01-30 11:31 发表评论
]]>默认WEB字体样式（转）http://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311312.htmlAngle WangAngle WangSat, 30 Jan 2010 03:25:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311312.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/311312.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/30/311312.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/311312.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/311312.html

通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
font: 12px/1.5 arial;
}

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

  1. Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
  2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
  3. 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
  4. 因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

  1. 12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
  2. 不用考虑基于字体大小（em）的设计。
  3. 在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

  1. 这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
  2. 在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
  3. 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
  4. 深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

  1. 大部分平台都有arial，减少浏览器的查找时间。
  2. 代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
  3. 所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
  4. 中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
  5. 使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

  1. 通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
  2. 虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

最后推荐一下玉伯的《再谈 Web 默认字体》



Angle Wang 2010-01-30 11:25 发表评论
]]>DIV+CSS结合js控制页面滚动的效果(转)http://www.blogjava.net/wangfeiyan-xz/archive/2010/01/22/310546.htmlAngle WangAngle WangFri, 22 Jan 2010 09:25:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/22/310546.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/310546.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/22/310546.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/310546.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/310546.html     

<head>
<style type="text/css">
  #container{
  text-align: left;
  background-color: #faf7ec;
  width: 500px;
  margin: 20px auto 0 auto;
  padding: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
 }
#block0, #block1, #block2, #block3, #block4, #block5
{
  border-top: solid 1px #785a3c;
  margin: 0;
  padding: 10px;
}
.active {  background-color: #fff;}
.visited {  background-color: #ede7da;}
#block0, #block0.active, #block0.visited
{
  text-align: center;
  background-color: #a0dcf8;
  border-top: none;
  border-bottom: solid 4px #785a3c;
}
</style>

<script>
var ScrollWin = {
  w3c : document.getElementById,
  iex : document.all,
  scrollLoop : false,
  scrollInterval : null, // setInterval id
  currentBlock : null,   // object reference
  getWindowHeight : function(){
    if(this.iex) return (document.documentElement.clientHeight) ?
document.documentElement.clientHeight : document.body.clientHeight;
    else return window.innerHeight;
  },
  getScrollLeft : function(){
    if(this.iex) return (document.documentElement.scrollLeft) ?
document.documentElement.scrollLeft : document.body.scrollLeft;
    else return window.pageXOffset;
  },
  getScrollTop : function(){
    if(this.iex) return (document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop;
    else return window.pageYOffset;
  },
  getElementYpos : function(el){
    var y = 0;
    while(el.offsetParent){
      y += el.offsetTop
      el = el.offsetParent;
    }
    return y;
  },
  scroll : function(num){
    if(!this.w3c){
      location.href = "#"+this.anchorName+num;
      return;
    }
    if(this.scrollLoop){
      clearInterval(this.scrollInterval);
      this.scrollLoop = false;
      this.scrollInterval = null;
    }
    if(this.currentBlock != null) this.currentBlock.className = this.offClassName;
    this.currentBlock = document.getElementById(this.blockName+num);
    this.currentBlock.className = this.onClassName;
    var doc = document.getElementById(this.containerName);
    var documentHeight = this.getElementYpos(doc) + doc.offsetHeight;
    var windowHeight = this.getWindowHeight();
    var ypos = this.getElementYpos(this.currentBlock);
    if(ypos > documentHeight - windowHeight) ypos = documentHeight - windowHeight;
    this.scrollTo(0,ypos);
  },
  scrollTo : function(x,y){
    if(this.scrollLoop){
      var left = this.getScrollLeft();
      var top = this.getScrollTop();
      if(Math.abs(left-x) <= 1 && Math.abs(top-y) <= 1){
        window.scrollTo(x,y);
        clearInterval(this.scrollInterval);
        this.scrollLoop = false;
        this.scrollInterval = null;
      }else{
        window.scrollTo(left+(x-left)/10, top+(y-top)/10);  
      }
    }else{
      this.scrollInterval = setInterval("ScrollWin.scrollTo("+x+","+y+")",20);   
      this.scrollLoop = true;
    }
  }
};
ScrollWin.containerName = "container";
ScrollWin.anchorName    = "anchor";  
ScrollWin.blockName     = "block";    
ScrollWin.onClassName   = "active";   
ScrollWin.offClassName  = "visited";  
</script>
</head>


<body>
<div align="center">
<div id="container">
  <a name="anchor0"></a>
  <div id="block0">
    <a href="javascript:ScrollWin.scroll('1')">链接 1</a> |
    <a href="javascript:ScrollWin.scroll('2')">链接 2</a> |
    <a href="javascript:ScrollWin.scroll('3')">链接 3</a> |
    <a href="javascript:ScrollWin.scroll('4')">链接 4</a> |
    <a href="javascript:ScrollWin.scroll('5')">链接 5</a>
  </div>
  <a name="anchor1"></a>
  <div id="block1">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 1</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor2"></a>
  <div id="block2">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 2</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor3"></a>
  <div id="block3">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 3</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor4"></a>
  <div id="block4">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 4</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
  <a name="anchor5"></a>
  <div id="block5">
    <h3><a href="#" onclick="javascript:ScrollWin.scroll('0'); return false;">顶部</a>
  链接 5</h3>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
  </div>
</div>
</div>
</body>



Angle Wang 2010-01-22 17:25 发表评论
]]>div+css命名规则参考 http://www.blogjava.net/wangfeiyan-xz/archive/2010/01/21/310342.htmlAngle WangAngle WangThu, 21 Jan 2010 04:47:00 GMThttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/21/310342.htmlhttp://www.blogjava.net/wangfeiyan-xz/comments/310342.htmlhttp://www.blogjava.net/wangfeiyan-xz/archive/2010/01/21/310342.html#Feedback0http://www.blogjava.net/wangfeiyan-xz/comments/commentRss/310342.htmlhttp://www.blogjava.net/wangfeiyan-xz/services/trackbacks/310342.html页头：header                    登录条：loginBar
标志：logo                        侧栏：sideBar
广告：banner                    导航：nav
子导航：subNav                菜单：menu
子菜单：subMenu               搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer
版权：copyRight

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainNav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainNav（globalNav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsideBar
右导航：　　rightsideBar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1Content
菜单容量：　menuContainer
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadCrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css



Angle Wang 2010-01-21 12:47 发表评论
]]>