样式表经典技巧实例：模拟Windows记事本窗口,HTML基础

通过本文，你将会对样式表有更进一步的了解，本文将涉及到的样式表语句以及值：
1.margin-top；
2.margin-left；
3.border-color；
4.border-bottom-color；
5.border-right-color；
6.filter:fliph；
7.filter:alpha(opacity=100,style=1,finishX=100%)
8.border-style:solid。
首先，为了纪念这篇文章，我特意做了一个另类的留言板程序。请点击这里：http://www2.webshu.com/another/diary.asp。
关于样式表的概念，请看我写的这篇《样式表简明教程》。

好，我们现在开始。一共要套5层表格，总的思路是由里向外说：
1、建立一个表格宽550像素，高18像素，背景色为0A246A的表格，代码如：<table cellspacing cellpadding width=550 height=18 bgcolor=0A246A><tr><td></table>，效果如下：

2、在它里面套入一个宽550像素，高18像素，背景色为0A246A的表格，并且让它产生渐变，使用样式表的alpha滤镜，方法是filter:alpha(opacity=100,style=1,finishX=100%)，这个表格的代码是<table cellspacing cellpadding width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table>，单独建立这个表格效果如：

3、然后把上述表格的代码套入到第一表格的<td>中，代码如<table cellspacing cellpadding width=550 height=18 bgcolor=0A246A><tr><td><table cellspacing cellpadding width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table></table>，效果如下：

4、现在我们需要将这个表格进行水平翻转，使用filter:fliph的方法。把第一个，也就是外层的表格翻转，那么整个它套入的内容也跟着翻转，最终的代码如：<table cellspacing cellpadding width=550 height=18 bgcolor=0A246A style=filter:fliph><tr><td><table cellspacing cellpadding width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table></table>，实现的效果如：

5、我们所需要的四张小图片，如：，这几张图片就很难用代码写。

6、再建立一个表格，把这四张图片全部都填进这个新表格。注意，新表格要用<p style=margin-top:-17>这样的形式，向上提。这个表格应该根据需要拆分单元格，我拆成了五部分，如下：

无标题 - 记事本

分解效果：

无标题 - 记事本

上面的部分就做完了，它的代码是：<table cellspacing cellpadding width=550 height=18 bgcolor=0A246A style=filter:fliph><tr><td><table cellspacing cellpadding width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table></table><p style=margin-top:-17><table cellspacing cellpadding><tr><td width=2><td width=18 height=19 valign=top><img src=../p/n/nt.gif><td style=color:FFFFFF valign=top width=478><p style=margin-top:-1><b>无标题 - 记事本</b><td valign=top width=34><p style=margin-top:1><img src=../p/n/n1.gif><img src=../p/n/n2.gif><td valign=top><p style=margin-top:1><img src=../p/n/n3.gif></table>。要注意的是，单元格都要有valign=top，表示顶边对齐，这样便于水平位置细微的调整，非常有必要。

7、写入这句：<p style=margin-left:5;margin-top:0>文件(<u>F</u>)编辑(<u>E</u>)搜索(<u>S</u>)帮助(<u>H</u>)，效果如：

无标题 - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

8、给它们套一层表格，把背景色染为D4D0C8色，效果如：

无标题 - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

9、在紧接着“帮助”后面，这个</table>之前，加入文本框代码，效果如下：

无标题 - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

代码如：<p style=margin-left:2;margin-bottom:1;margin-top:0><textarea cols=75 rows=20 name=></textarea>

10、最后我们套两层宽度为1像素的表格，让它的底线、右边线为灰色，就大功告成了，两个表格样子如下：

这是最外层的。

代码如：<table cellspacing cellpadding style=border-style:solid;border-width:1px;border-color:D4D0C8;border-bottom-color:404040;border-right-color:404040><tr><td></table>

这是倒数第二层的。

代码如：<table cellspacing cellpadding style=border-style:solid;border-width:1px;border-color:FFFFFF;border-bottom-color:808080;border-right-color:808080><tr><td></table>

11、把这两个表格套在一起，效果如：

代码如：<table cellspacing cellpadding style=border-style:solid;border-width:1px;border-color:D4D0C8;border-bottom-color:404040;border-right-color:404040><tr><td><table cellspacing cellpadding style=border-style:solid;border-width:1px;border-color:FFFFFF;border-bottom-color:808080;border-right-color:808080><tr><td></table></table>

12、最后，把第9步的代码，插入到第11步的表格当中，最终的效果如：

无标题 - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

如果文本较多，它会自动产生滚动条，如下：

webshu.htm - 记事本

文件(F)编辑(E)搜索(S)帮助(H)

至此，这个用HTML代码和CSS样式表模拟的记事本窗口制作完毕，是不是看起来很复杂。其实并不复杂，我具体地把每一步的步骤都写了下来。这个效果在FP和DW下是永远无法实现的，因为本文的操作太精确，都是以像素为单位。为什么会模拟得那么像呢，因为我使用了放大镜工具来查看、调整。本文全部代码如下：