天天活着…

方法一：Demo:  iframe1

1.脚本

在调用iframe的页面添加脚本

<script type=”text/javascript”>

function reinitIframe(){

var iframe = document.getElementById(“frame_content”);

try{

iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex){}

}

window.setInterval(“reinitIframe()”, 200);

</script>

2.调用

<iframe id=”frame_content” src=”d.htm” scrolling=”no” frameborder=”0″ style=”width:100%; _height:100%;”></iframe>

方法二（推荐）：Demo：iframe2

1.脚本

在调用iframe的页面添加脚本

<script type=”text/javascript”>

function ReSizeiFrame(iframe)
{
if(iframe && !window.opera)
{
   iframe.style.display = “block”;
   if(iframe.contentDocument && iframe.contentWindow.document.documentElement.scrollHeight)
   {
    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;//设置iframe在火狐下高度
   }
   else if (iframe.Document && iframe.Document.body.scrollHeight)
   {
    iframe.height = iframe.Document.body.scrollHeight;//设置iframe在ie下的高度

   }
}
}

</script>

2.调用

<iframe id=”frame_content” src=”d.htm” scrolling=”no” frameborder=”0″ onload=”ReSizeiFrame(this);” style=”width:100%;”></iframe>

示例下载：iframe-js.rar

正确来说这并不算是什么新鲜技术,早在CSS2.0出现伪对象(Pseudo-Elements)时候就已经可以令一个标签应用三个背景图片，只不过是某些低版本浏览器对其支持不完善，而导致这技术在国内几乎无人使用。对于伪对象能轻易地完成三个背景图片的任务，而且玩法灵活多变。

实例

Opera、Safari能完美地支持以下实例，Firefox2.0/3.0 及IE8 就显得有比较逊色了

例子1:Pseudo-Elements1.html

一些更高级的应用，为伪元素添加定位及伪类，参考例2：

例子2:Pseudo-Elements2.html

原理

使用:after及:before伪元素配合content在对象前或后显示内容，利用display:block使伪元素内容转为块状，最后插入背景图片。

相关属性清单：

• :before – 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容
• :after – 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容
• content – 用来和:after及:before 伪元素一起使用，在对象前或后显示内容

优点

不必添加多余的标签，而能应用多个背景图片。使代码更简洁更具语言化，而实现更复杂的效果。

缺点

经过测试，只有Opera、Safari、完美支持，而Firefox2.0/3.0难以实现伪元素的stacking context(层级内容)控制，在IE8只支持背景颜色而不支持背景图片，IE7或以下则完全不支持伪元素。

经过测试IE5至IE7会读取不了CSS文件中4095条以后的样式,又一个IE莫名的错误，为什么读取不了4095条以后的CSS实在令人费解。

IE8已修正这错误，所以在下面例子中的标题，IE5至IE7将以80px字体大小及红色颜色显示。而IE8及其它浏览器将以18px字体大小及绿色颜色显示。（ IE4及以下我没去测试）

RAR: IE_lines_4095_CSS

另外值得一提的是“ 一个CSS文件的不能超过288kb？”这数字可能会有偏差，因为在我的本地环境经测试，结果是是300kb以上。

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

• IE6支持png8透明:

  IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小

  测试实例：test_IE6png8

1. AlphaImageLoader 筛选器

   • 使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
   • 官方原文：http://support.microsoft.com/kb/294714/zh-cn go
   • 测试实例：test_AlphaImageLoader

2. PNG Transparency in IE

   • 使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。
   • 官方原文：http://codingforums.com/archive/index.php?t-80555.html go
   • 测试实例：test_PNGTransparncyinIE  

3. IE PNG Fix v1.0 / 2.0 Alpha 2

   • 使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
   • 官方原文：http://www.twinhelix.com/css/iepngfix/ go
   • 测试实例:test_iepngfix

4. IE7/IE8 JavaScript library

   • 使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
   • 官方原文：http://code.google.com/p/ie7-js/ go
   • 测试实例：test_ie7-js

   全部实例打包下载：test_png.rar 

概要：
本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。

说明：
占位空间：元素在文档流中所占据的空间。
物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：
1.只使用css第一组属性布局定位元素的情况
2.只使用css第二组属性布局定位元素的情况
3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，
层级关系为：
<div
  <div box1
  <div box2
  <div box3
效果图：

图1

一、用相对定位布局块级元素
元素设置position值： position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
  <div box1
  <div box2 ——– position:relative ; top:-60px; left:80px;
  <div box3
效果图：

图2

2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
<div
  <div box1 ——– position:relative ; margin-bottom:-102px;
  <div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
  <div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图：

图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px – 30px)
层级关系为：
<div
  <div box1 ——- position:relative ; margin-bottom:-102px;
  <div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
  <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图：

图4

二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。
注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。
在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。
层级关系为：
<div ———————————position:relative 参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–absolute
      <div box3
效果图：

图5

以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————- position:relative 参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图6

图7中，为改变参照物（橘色框）后的效果
层级关系为：
<div ——————————— position:relative;最近的祖先定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图7

图8中，参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图8

2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果图：

图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
      <div box3
效果图：

图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
      <div box3
效果图：

图11

b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
      <div box3
效果图：

图12

总结：

• 相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
• 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。
• 绝对定位的元素以最近的定位祖先元素为参照物。

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

一，设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

1. 能分清设计稿中的公共与私有的部分
2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二，切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

1. 切成所需要的图片（如何将需要的部分切出来）
2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
3. 在2的基础上，规划切出来的图片（包括文件分布）
4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

1. 还原设计稿视觉效果，并通过标准验证（HTML）
2. 在1的基础上，实现多浏览器的兼容（HTML）
3. 在2的基础上，标签语义化（HTML）
4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
7. 在6的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

最近常常看到有人在网上谈起web设计规范这个话题，而这半年中ISD也在如火如荼地制定着各种规范，所以我们觉得有必要和大家分享一下我们这半年来我们遇到的问题和经验.

就ISD来说，制定规范的初衷在以下三个方面
1.品牌风格在探索中被明确，品牌备忘和梳理势在必行。
2.产品线日益丰富，后续设计一致性和可循性的要求被提高。
3.公司机构壮大，新人不断流入，沟通和执行效率急待提升。

在这之前，我们已经拥有许多零散的规范，但多为某一样特定产品的制作标准，例如给CP外包制作时的品质规范等,而对ISD四大业务的梳理(QQ会员＼QQ空间＼QQ 秀和QQ音乐)，实际上是从08年中旬才开始的。
半年多的时间，我们陆续完成了:

QQ空间完整的portal线上规范、空间模板规范，以及细节到空间loading、挂件制作的规范；

QQ音乐针对portal和miniportal的线上规范；

QQ秀改版后的新portal线上规范；

以及QQ会员改版后整理出的一套PPT格式的设计规范；

这些规范为我们带来了便利，指明了方向，提高了效率，甚至一定程度上为设计团队赢得了认可…白纸黑字果然是解决意见分歧的最好方式…好吧，付出总会有回报的，规范的好处想必大家也都了解，这里就不繁述了。
重点在于，我们的规范还可以更规范一些：

1．别把规范做成了VIS手册。
目前我们的规范中还有太多华丽的词藻，类似花大篇幅介绍网站的配色方案这样的方式，把规范做成了花架子，几乎没有人会去用到它。我们的设计师大都受过平面设计公司的影响，一说到做规范，总是会下意识地做成企业VIS手册，想必这VIS手册里面的门道大家也都了解一二，那都是忽悠客户用的…当然，我们不是排斥装饰，但如果把过多无用的规范整理成华丽的效果图，或是无中生有的编织许多美丽的花圈，显然是不符合ISD的现状的，规范应该更加务实。

2．别让规范拖累了你。
我们在制定每一个规范的初期，都很担心规范的制定会限制了设计师的创作，所以我们没有把规范做到细无巨细，类似文字的左右边距这样的规范，其实是有非常大的不确定性的。所以我们还是倡导在规范中加入一条设计意识的规范，比方说，在设计中的找对齐，以及在设计后的去繁求简。只有大家的设计意识被规范了后，设计品质才会真正实现质的突破。当然，一些灵活的规范，例如：可定制式的模块规范也可以很好的解决这些问题。

3．规范也要有“试用期”。
在规范执行的时候，我们总是会遇到一些别扭的条目，让我们进退两难，有些设计师就干脆直接把规范给“扩展”了。确实，我们一般都是在关键设计完成后，来制定规范，很多条目并没有经历过各种情况的考验。所以，如果实践是检验真理的唯一标准，那么就也给规范一个试用期吧。

4．不要忽视了规范的用户体验。
规范做好了，是给大家用的，除了不要用过多无用的装饰来干扰规范的可读性，对于敏捷的互联网设计团队来说，“目录准确”“标识图容易懂”“文件好找到”等，也是我们所不容忽视的，为什么许多规范在上线后，我们的设计师都记不住地址，是不是很多时候，我们的规范倒不如一个PSD源文件来得便捷些。

5．规范的规范。
说完了前面的这些感想，我们理所应当地想到，对于ISD这样一个产品丰富的部门，我们的规范是不是也应该有一个统一的标准，而不是像现在这样，规范分类不同、规范描述不同、图文标注不同、文件格式不同…
看样子，想要更专业，还需要付出更多的努力…
 
这些就是ISD在摸着石头过河中的一些简单的心得，对于规范，我们浅尝但绝不停止，之所以把这些思考写出来，是想大家共同来关注这个互联网设计规范这个话题，希望大家多多指正，多多交流。

欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它，开始您的博客！