今天呢，带来一篇在工作过程中遇到的比较麻烦的一个设计稿，也是我们公司产品模板里的一个，我会在下文中写出我在编写代码的过程中的思路
与变化，还有一些技巧的使用。已经将案例传上来了，大家可以下载细看。
首先我想说一下我之前写的第一篇技巧文章（CSS日常公用样式与一些解决方案）里的清除浮动的样式，那个我还是没有考虑周全，如下：
.clear { dipslay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
改变过后的是clear { dipslay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }
变化不大是吧？但是我想说的是你在用到这个样式清除浮动的时候，那个浮动的子类盒模型，他们的高度肯定不是固定的，那么我在这 个.clear 样式里写的height: 0!important; 高度为0 声明为重要，也就没什么用了，因为浮动的子类盒模型的高是活的，所以不必为高度声明为重要，那如果浮动的子类盒模型的高度是死的，那就不需要清除浮动了， 所以我后来把.clear 中height: 0 后面的声明为重要给删掉了。
第二一个就是我在文中提及的第二个问题jquery 扩展的lightbox 效果，在body中写 overflow: auto; height: 100%; 就可以解决掉了在ie6中内容高度不够，无法撑开整个body而让遮罩只遮到一半内容，不用写的像原来那样麻烦，是我把问题想复杂了。
还有就是在第二篇文章（XHTML+CSS解决方案 第一弹 IE6那些不得不说的恶心事 之 PNG透明背景的几种解决方案）里，png图片透明的方法，说的第四种方法在实际应用中在ie6里还会有问题出现，如果将png图片做为链接的话，并且已 经上传至服务器，那么你在访问的时候会发现你找不到你的png图片，必须要把鼠标移到链接上面才会出现，并且如果不是链接的话，那抱歉，你要刷新一下页面 才会出现。
所以如果有哪位用了我说的那种办法，我在这里说声抱歉，当时没有测试完整，就放到了网上，给大家带来的不便，请见谅。
http://www.zd178.com/zd178_look/iepngfix/
这个网站是前两天看书上写到的用htc文件+js 解决ie6 png透明的方法，比较好用，但不要用太小的图片用来平铺，这样会使你的ie6浏览器进入假死状态或是反应很慢，还有就是如果用css文件加载htc文件的时候要注意htc文件的路径问题！
下面开始说正文，我先把设计的效果图放出来，并且将图分离做为伪3D视图，看一下每个效果的层位置，再说一下，每个样式的方法和属性我不能一一解释，只能说一些大概的解决方法，要不这篇幅就太大了。整个网站的制作页面，我已经传了上来，大家可以下载后细看。
下面是伪3D分离视图（做的不好请见谅）：
效果图中的背景图片我是在网上找到的一个jquery 扩展应用，把不需要的代码去掉后，就用做可适应浏览器的效果了。
那么知道效果图的层位置之后，我们要想，怎么将效果图中的三个层置于内容区的层位置以下，使用绝对定位后，并将层位置写成负值就可以了，但是这样写ie6会兼容吗，写过测试性的文档，如下：
* { margin: 0; padding: 0; }
html { overflow: hidden; width: 100%; height: 100%; }
body { overflow: auto; height: 100%; }
#main-bg { position: absolute; top: 0; left: 0; z-index: -3; width: 100%; height: 100%; }
#main-bg img { position: absolute; top: 0; left: 0; z-index: -3; }
虽然这样写了 火狐谷歌等现代浏览器可以实现
但是ie6不兼容怎么办？
那我们能不能换一个思路？（这个思路我也是想了有一会）
既然要内容要能滚动并与背景的三个区同在，而不干扰，还要兼容ie6，那他们就肯定是兄弟级关系，就是在同一盒模型里。
在写的时候要想，怎么能让内容区在内容填满后，还能自动向下滚动，那我们能不能按照body的特性，写一个假的body呢？按照body的特性那就必须高度是先占满浏览器，或是能随着内容的多与少自动出现滚动条与消失，那么就要有overflow: auto与height: 100% 这两个样式了。
那么，下面这个是第二个测试性文档：
* { margin: 0; padding: 0; }
html, body { overflow: hidden; width: 100%; height: 100%; }
#main-bg { position: absolute; top: 0; left: 0; z-index: -3; width: 100%; height: 100%; }
#main-bg img { position: absolute; top: 0; left: 0; z-index: -3; }
#simulation-body { overflow: auto; height: 100%; }
将代码写成这样后
发现在ie6下内容区在内容超出了浏览器尺寸后右侧也出现滚动条了
说明我们测试成功了
那么下面我们就按效果图里的样子把我们要实现的效果再写出来！
70%透明黑的效果我用ie的滤镜透明效果与现代浏览器支持的透明效果一起用，就可以了。
写完后，整体代码如下：
* { margin: 0; padding: 0; }
html, body { overflow: hidden; width: 100%; height: 100%; }
#main-bg, #main-bg img, #main-repeat-line, #main-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main-bg, #main-bg img { z-index: -3; }
#main-repeat-line { z-index: -2; background: url('../images/main_repeat_bg.gif') repeat; }
#main-mask { z-index: -1; background: #000; filter: alpha(opacity=60); opacity: 0.6; }
#simulation-body { position: relative; overflow: auto; height: 100%; }
而#simulation-body 中的 position: relative 的意图在于，当内容区内出现相对定位或是绝对定位的元素时，这些元素在ie6和7浏览器下就会变为假性固定定位，那么这不是我们想要的效果，所以就要加上position: relative,以解决这个问题。让内容区在向下或是向上滚动时，相对定位与绝对定位的元素也会跟着上下移动。
好了，我们已经把想要得到的效果做出来了。那么我们现在要将首页的样式写出来，因为首页的内容要求是垂直居中显示，那么我们写的# simulation-body 在这里就用不到了，我们要重新写一个样式来定义。
定义之前，我们要先得到这个区域的高度等数值。得到数值后，我们就要写垂直居中的样式了，既然要垂直居中，那么肯定要用到绝对定位，百分比位置，负值外填充。如下：
#default-box { position: absolute; top: 50%; left: 0; width: 100%; height: 230px; margin: -115px 0 0; border-bottom: 1px solid #4c3e04; background: url('../images/default_nav_bg.png') repeat-x left bottom; text-align: center; }
由于我想要让这个样式下的子类尽量以行内元素来定义，所以我写了text-align: center，宽度是100% 是因为导航区域的透明背景色是随浏览器的宽度走的，所以要写100%，在这里说一下，块元素的宽度是随它的父级元素的宽度走的，所以在一些已经标明具体宽度的父级元素内，子级元素的宽度就不要再次声明了，除非子级元素是浮动型的，ie里可以写具体宽度来清除浮动，当然也有别的办法。而绝对定位与固定定位的宽度是要声明一下，否则你在浏览器里是看不到它们的。
然后将logo的样式写出来。如下：
#default-box #logo { display: inline; }
为了让#logo 只在 #default-box 下为行内元素，所以我把它写成了#default-box 的子类，不与二级页的#logo起冲突。因为该设计稿是模板类网站，logo会经常替换，所以在logo的样式上并没有写多少限制类的样式。
下面开始导航区了，导航那里的内容是左右居中的，用绝对定位左右居中就可以。但是后面的透明背景色怎么办？我们可以用ie的滤镜透明效果与现代浏览器支持的透明效果一起用，然后绝对定位，这样就可以放在导航的后面了，并且可以节省一张图片，如下：
#default-box .blank { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 78px; background: #000; filter: alpha(opacity=60); opacity: 0.6; }
#default-box div { position: absolute; bottom: 0; left: 50%; width: 930px; margin: 0 0 0 -490px; line-height: 78px; text-transform: uppercase; }
#default-box div 这里为什么要用到div 而不用样式名，因为这个div层里已经不需要再写div了，所以我就没再命名。那么大体已经写了。下面开始写导航，因为要考虑到首页与二级页（在下面会放出）用的导航都一样，那我们就要再另起一行写样式了，不用做为谁的子类出现了。二级页面效果图如下：
导航样式如下：
ul#main-nav { position: relative; float: left; margin: 0 0 0 -10px; }
ul#main-nav li { display: inline; padding: 0 88px 0 0; }
ul#main-nav a { padding: 0 0 0 10px; font-weight: bold; font-size: 14px; }
ul#main-nav a:hover, ul#main-nav a.current { background: url('../images/main_nav_li.gif') no-repeat left center; color: #fc0; }
ul#main-nav 里的 margin: 0 0 0 -10px 是因为在当前页面或是鼠标触发后，在链接前面会出现一个小箭头，设计稿里箭头的宽度加上它与链接的间距是10像素，所以我向外负10像素，刚好可以在默认显示的时候是与logo对齐的。还有人会问，为什么 a 标签要写在 ul 后面，而不是li的后面，我在这里说一下，在css样式表，一些固定的层嵌套关系即使你不按照html文档里那样写结构也不会说有什么语法错误，然后他们都是在一同父级元素内，所以ul#main-nav li a 里面的 li 是可以不写的，这样我们也可以减少一定的代码量，除非是在有样式冲突或是继承关系有特别要求的时候，才有必要写的特别明确的嵌套关系。
语言切换那里我们可以在公用样式部分里写.fr { display: inline; float: right; } 然后再回来写上语言切换的样式名称，如下：
.language { }
.language a { }
这样是为了以后修改方便，所以留些空，如果不需要那完全可以删掉。
最后就是页脚的问题了，由于在页脚在首页的位置是固定的，而在二级和三级页内是可滚动的，所以我们要写两个样式，可是我想用同一个样式名写，怎么办？那我们可以用不同的选择器来解决一下，代码如下：
#footer { width: 930px; margin: 90px auto 20px; }
#footer { font-size: 10px; }
p#footer { position: absolute; bottom: 20px; left: 50%; margin: 0 0 0 -490px; }
我在这里先定义了二级页的页脚样式，然后再用p#footer来指定只有用p选择器才能让#footer是绝对定位的，并且要把冲突的样式在p#footer里去掉，这样我们就写好了。
首页和二级页的大局样式已经写的差不多了，我把html文档贴上来给大家看一下
到二级页后
我们需要写一个放内容的盒模型，由于他的样式与上面已经写好的#footer是一样的，所以我们就可以把他们放到一起，如下：
#footer, #content { width: 930px; margin: 90px auto 20px; }
大的布局在这里已经写完了
往下就是一些内容区的内容增加了
下面开始写二级页了，那我们把首页复制一份或是另存为，得到一个二级页，然后将里面的
这些内容全部去掉 换上之前已经写好的，并且在里面写好大的布局样式
<div id="simulation-body">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div
由于我们前面还没有写 #header 那我们要从前面的 #default中得到相同的样式，并且把冲突的样式去掉，还要让结构不变，代码如下：
#default-box div, #header div { position: absolute; bottom: 0; left: 50%; width: 930px; margin: 0 0 0 -490px; line-height: 78px; text-transform: uppercase; }
…
#header { position: relative; height: 53px; margin: 76px auto 0; padding: 28px 0 0; border-bottom: 1px solid #4c3e04; }
#header #logo { position: absolute; top: 0; left: 50%; margin: 0 0 0 -465px; }
#header div { position: static; margin: 0 auto; line-height: 54px; }
由于#header div和#default div中的一样样式是一样的，所以要让他们先读取一样的样式，然后再写出来与#default div 不一样的地方，这样就解决掉了问题
html文档如下：
与首页的区别就是换了一个id 而已，那这样给以后的修改带来的方便，大家可想而知。
第一个二级页是简历，那我们只要写一个样式，给文字一个行高就可以了。至于里面的文字段落在设计稿里是什么样。我们完全不必管，因为这样又浪费时间，最后还要让程序全部删掉。得到代码如下：
.about-wrap { line-height: 21px; }
html文档如下：
这样写的好处就是，减少嵌套关系，不必这么写：
<div id="content"><div id="about-wrap">...</div></div>
而我们之前已经写了#content是对整体内容区的定位。那具体里面的东西该怎么写，就由像是about-wrap这类的父级样式来定义，如下：
.about-wrap p { }
.about-wrap ul { }
大概就说这么多吧，写的比较啰嗦，表达能力不太好，大家凑合看。
以后如果遇到更复杂的视觉设计稿，自己的思路与一些实际的应用技巧还会分享给大家的！
