 |
网页树树 | 网站首页 | 网页技术 | 教程相关 | 软件应用 | 常见问题 | 新手上路 | 网页论坛 | 研究报告 上网指南 | 网络病毒 | 邮件指南 | 解决方案 | 企业服务 | 服务中心 | 自由泳网 | 想象讲场 |
| 网页树树 > 自由勇专栏 |
自由勇-王志勇(1980-09-26)
Webshu编辑。
1994年开始练习五笔字形；2000年底开始学习和大量实践网页制作；目前从事程序设计。访问统计：
49837- 样式表经典技巧实例：模拟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的表格，代码如：<table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=0A246A><tr><td></table>，效果如下：2、在它里面套入一个宽550像素，高18像素，背景色为0A246A的表格，并且让它产生渐变，使用样式表的alpha滤镜，方法是filter:alpha(opacity=100,style=1,finishX=100%)，这个表格的代码是<table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table>，单独建立这个表格效果如：
3、然后把上述表格的代码套入到第一表格的<td>中，代码如<table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=0A246A><tr><td><table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=A6CAF0 style=filter:alpha(opacity=100,style=1,finishX=100%)><tr><td></table></table>，效果如下：
4、现在我们需要将这个表格进行水平翻转，使用filter:fliph的方法。把第一个，也就是外层的表格翻转，那么整个它套入的内容也跟着翻转，最终的代码如：<table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=0A246A style=filter:fliph><tr><td><table cellspacing=0 cellpadding=0 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=0 cellpadding=0 width=550 height=18 bgcolor=0A246A style=filter:fliph><tr><td><table cellspacing=0 cellpadding=0 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=0 cellpadding=0><tr><td width=2><td width=18 height=19 valign=top><img src=../p/n/16.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/15.gif><img src=../p/n/17.gif><td valign=top><p style=margin-top:1><img src=../p/n/18.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=0 cellpadding=0 style=border-style:solid;border-width:1px;border-color:D4D0C8;border-bottom-color:404040;border-right-color:404040><tr><td></table>
这是倒数第二层的。 代码如：<table cellspacing=0 cellpadding=0 style=border-style:solid;border-width:1px;border-color:FFFFFF;border-bottom-color:808080;border-right-color:808080><tr><td></table>
11、把这两个表格套在一起，效果如：
代码如：<table cellspacing=0 cellpadding=0 style=border-style:solid;border-width:1px;border-color:D4D0C8;border-bottom-color:404040;border-right-color:404040><tr><td><table cellspacing=0 cellpadding=0 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下是永远无法实现的，因为本文的操作太精确，都是以像素为单位。为什么会模拟得那么像呢，因为我使用了放大镜工具来查看、调整。本文全部代码如下：
<table cellspacing=0 cellpadding=0 style=border-style:solid;border-width:1px;border-color:D4D0C8;border-bottom-color:404040;border-right-color:404040><tr><td><table cellspacing=0 cellpadding=0 style=border-style:solid;border-width:1px;border-color:FFFFFF;border-bottom-color:808080;border-right-color:808080><tr><td><table bgcolor=D4D0C8 cellspacing=0 cellpadding=0><tr><td><table cellspacing=0 cellpadding=0 width=550 height=18 bgcolor=0A246A style=filter:fliph><tr><td><table cellspacing=0 cellpadding=0 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=0 cellpadding=0><tr><td width=2><td width=18 height=19 valign=top><img src=../p/n/16.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/15.gif><img src=../p/n/17.gif><td valign=top><p style=margin-top:1><img src=../p/n/18.gif></table><p style=margin-left:5;margin-top:0>文件(<u>F</u>)编辑(<u>E</u>)搜索(<u>S</u>)帮助(<u>H</u>)<p style=margin-left:2;margin-bottom:1;margin-top:0><textarea cols=75 rows=13 style=font-size:10pt;line-height:120%></textarea></table></table></table>
网页树树版权声明：
此文为Webshu.com独家撰稿，著作权属作者所有，禁止转载。
此文网址 http://www.webshu.com/column/102/16.html
