这本书的初审基本结束了，少许地方修改后即进入出版流程的下一个环节。今天，出版社负责市场专题推广的人联系到我，给我看了他策划的推广专题–《CSS三剑客》，很喜欢他给这本书起的这个名字–技巧之剑，我个人觉得非常贴切，书中大量的技巧应该对网页设计人员有很大的帮助。

下面是这个专题对 《CSS实战精萃》的介绍：

《CSS实战精萃》–技巧之剑。2007年10月出版。《道德经》载曰：道生一,一生二,二生三,三生万物。CSS这门”大道”在《CSS实战精萃》中被作者分解成大量而不失严谨的知识点和技术点，变化无穷。每个章节内容翔实，每个技术点后就有好几个一线的案例研究，三位Web设计师丰富的经验也常常跃然于纸上。该书旨在Web开发四个方面帮助读者:可维护性,兼容性,可重用性和实用性。该书适用于那些对（X）HTML和CSS有基本理解并希望能更上一层楼的人群。因为您绝对不会满足于”只是会写几行CSS代码”。

任何人想要从一些顶尖的Web设计师那里学习技术，进一步丰富自己的CSS知识和经验, 这就是本非常棒的书，一本必须购买的书。—– Frank Stepanski（亚马逊）

这是专题初稿，在正式推出的时候应该会有所修改。
原文地址：http://blog.china-pub.com/more.asp?name=linjianfeng&id=43839

相关文章

• 传说中的WEB2.0常用颜色 (0)
• 在项目中实战xhtml+css (0)
• XHTML+CSS兼容性解决方案小集 (0)
• 网页风格切换 (0)
• 网站配色方案二 (0)

Neutrals

Shiny silver [#EEEEEE]

Reddit white [#FFFFFF]

Magnolia Mag.nolia [#F9F7ED]

Interactive action yellow [#FFFF88]

Qoop Mint [#CDEB8B]

Gmail blue [#C3D9FF]

Shadows Grey [#36393D]
Bold

Mozilla Red [#FF1A00]

Rollyo Red [#CC0000]

RSS Orange [#FF7400]

Techcrunch green [#008C00]

Newsvine Green [#006E2E]

Flock Blue [#4096EE]

Flickr Pink [#FF0084]
Muted

Ruby on Rails Red [#B02B2C]

Etsy Vermillion [#D15600]

43 Things Gold [#C79810]

Writely Olive [#73880A]

Basecamp Green [#6BBA70]

Mozilla Blue [#3F4C6B]

Digg Blue [#356AA0]

Last.fm Crimson [#D01F3C]

相关文章

• 在项目中实战xhtml+css (0)
• XHTML+CSS兼容性解决方案小集 (0)
• 网页风格切换 (0)
• 网站配色方案二 (0)
• 网站配色方案一 (0)

Read the rest of this entry »

相关文章

• 传说中的WEB2.0常用颜色 (0)
• 在项目中实战xhtml+css (0)
• XHTML+CSS兼容性解决方案小集 (0)
• 网页风格切换 (0)
• 网站配色方案一 (0)

相关文章

• 传说中的WEB2.0常用颜色 (0)
• 在项目中实战xhtml+css (0)
• XHTML+CSS兼容性解决方案小集 (0)
• 网页风格切换 (0)
• 网站配色方案二 (0)

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

　　常见兼容问题：

　　1.DOCTYPE 影响 CSS 处理

　　2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

　　3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

　　4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

　　5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

　　6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

　　7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

　　8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
　　重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

　　10.IE5 和IE6的BOX解释不一致
　　IE5下div{width:300px;margin:0 10px 0 10px;}
　　div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
　　就能解决大部分问题

　　注意事项：

　　1、float的div一定要闭合。

　　例如：(其中floatA、floatB的属性已经设置为float:left;)

　　这里的NOTfloatC并不希望继续平移，而是希望往下排。
　　这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
　　在

　　之间加上

　　这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
　　并且将clear这种样式定义为为如下即可：.clear{
clear:both;}
　　此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
　　当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
　　例如某一个wrapper如下定义：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

　　2、margin加倍的问题。

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
　　解决方案是在这个div里面加上display:inline;
例如：

　　相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

　　3、关于容器的包涵关系

　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

　　4、关于高度的问题

　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

　　5、最狠的手段 - !important;

　　如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
　　值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

相关文章

• 传说中的WEB2.0常用颜色 (0)
• 在项目中实战xhtml+css (0)
• XHTML+CSS兼容性解决方案小集 (0)
• 网页风格切换 (0)
• 网站配色方案二 (0)

最近为了一个项目一直在北京出差，比较有成就感的是终于说服我们的首席项目网页设计师开始采用xhtml+css进行页面设计，经过这个项目的验证，他对xhtml+css的好处得到了深刻的体会，在接下来的一个大项目里，我鼓励他继续采用xhtml+css进行页面设计。能符合规范和标准，总是一件好事。

相关文章

• XHTML+CSS兼容性解决方案小集 (0)
• 传说中的WEB2.0常用颜色 (0)
• 在XHTML 1.0 Strict下调用js新开窗口的方法 (0)
• xhtml的结构标签 (2)
• Which XHTML Is Right for You? (0)

使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找。

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改：

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义：

ul{margin:0;padding:0;}

就能解决大部分问题。

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为：

就可以了。

5.如果你在BOX容器里使float和text-align的方向设为一致：

{float:left;text-align:left;margin:0 0 0 200px;}

我们可做如下修改：

{float:left;text-align:left;margin:0 0 0 200px;display:inline;}
—–

相关文章

• 在项目中实战xhtml+css (0)
• 传说中的WEB2.0常用颜色 (0)
• 在XHTML 1.0 Strict下调用js新开窗口的方法 (0)
• xhtml的结构标签 (2)
• Which XHTML Is Right for You? (0)

准备两个CSS分别控制不同的风格。
[code]
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>css</title>
<LINK title=”C1″ rel=”stylesheet” href=”C1.css” mce_href=”C1.css” type=”text/css” />
<link title=”C2″ rel=”alternate stylesheet” href=”C2.css” mce_href=”C2.css” type=”text/css” />
</head>

<body>
<span  class=”foo”>文字</span>
<script type=”text/javascript” language=”javascript”>
<!–
function SetActiveStyleSheet(title)
{
    for (var i=0; i<document.getElementsByTagName(”link”).length; i++)
    {
        //循环所有名称为link的标签
        var e = document.getElementsByTagName(”link”)[i];
        if (e.getAttribute(”rel”).indexOf(”style”) != -1)
        {
            //这个link标签的rel属性含style，证明其作用是链接CSS文件的
            if (e.getAttribute(”title”) == title)
            {
                //当前link对应的CSS就是要使用的CSS，将disabled属性设置为false表示启用
                e.disabled = false;
            }
            else
            {
                e.disabled = true;
            }
        }
    }
}
–>
</script>
<input type=”button” value=”C1″ onclick=”SetActiveStyleSheet(this.value);”>
<input type=”button” value=”C2″ onclick=”SetActiveStyleSheet(this.value);”>
</body>

</html>

相关文章

• 传说中的WEB2.0常用颜色 (0)
• 介绍一个javascript开发利器——Aptana (0)
• 如何去掉网页上flash周围的虚线框? (1)
• 如何判断访问者安装了alexa? (1)
• 在XHTML 1.0 Strict下调用js新开窗口的方法 (0)