- 样式表经典技巧实例：模拟Windows记事本窗口 作者：自由勇
2003年09月24日 15:48 点击：超过8000次
通过本文，你将会对样式表有更进一步的了解，本文将涉及到的样式表语句以及值：
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的表格，代码如：
，效果如下：2、在它里面套入一个宽550像素，高18像素，背景色为0A246A的表格，并且让它产生渐变，使用样式表的alpha滤镜，方法是filter:alpha(opacity=100,style=1,finishX=100%)，这个表格的代码是
，单独建立这个表格效果如：3、然后把上述表格的代码套入到第一表格的
中，代码如
，效果如下：4、现在我们需要将这个表格进行水平翻转，使用filter:fliph的方法。把第一个，也就是外层的表格翻转，那么整个它套入的内容也跟着翻转，最终的代码如：
，实现的效果如：5、我们所需要的四张小图片，如：
，这几张图片就很难用代码写。6、再建立一个表格，把这四张图片全部都填进这个新表格。注意，新表格要用
这样的形式，向上提。这个表格应该根据需要拆分单元格，我拆成了五部分，如下：
无标题 - 记事本
分解效果：
无标题 - 记事本
无标题 - 记事本
无标题 - 记事本
上面的部分就做完了，它的代码是：
。要注意的是，单元格都要有valign=top，表示顶边对齐，这样便于水平位置细微的调整，非常有必要。
无标题 - 记事本
7、写入这句：
文件(F)编辑(E)搜索(S)帮助(H)，效果如：
无标题 - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
8、给它们套一层表格，把背景色染为D4D0C8色，效果如：
无标题 - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
9、在紧接着“帮助”后面，这个之前，加入文本框代码，效果如下：
无标题 - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
代码如：
10、最后我们套两层宽度为1像素的表格，让它的底线、右边线为灰色，就大功告成了，两个表格样子如下：
这是最外层的。 代码如：
这是倒数第二层的。 代码如：
11、把这两个表格套在一起，效果如：
代码如：
12、最后，把第9步的代码，插入到第11步的表格当中，最终的效果如：
无标题 - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
如果文本较多，它会自动产生滚动条，如下：
webshu.htm - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
至此，这个用HTML代码和CSS样式表模拟的记事本窗口制作完毕，是不是看起来很复杂。其实并不复杂，我具体地把每一步的步骤都写了下来。这个效果在FP和DW下是永远无法实现的，因为本文的操作太精确，都是以像素为单位。为什么会模拟得那么像呢，因为我使用了放大镜工具来查看、调整。本文全部代码如下：
无标题 - 记事本
文件(F)编辑(E)搜索(S)帮助(H)
网页树树版权声明：
此文为Webshu.com独家撰稿，著作权属作者所有，禁止转载。
此文网址 http://webshu.com/column/102/16.html关于我们 :: 使用帮助 :: 版权信息 :: 网站地图 :: 信息反馈
Copyright © 2003-2024 webshu.com 版权所有
