|
|
|
 发表:2002/9/13 16:41:57 人气:185       
|
楼主 |
精雕细琢你的主页
一、细线的表格
表格也可以算是网页所必定有的元素，但表格的边框线却令人很沮丧：如果你设border=0的话，表格的边框线就全部看不到；如果你设border=1或更大的话，边框线会呈无谓的凸起或者间隔很大的双线。
能不能制作边框线只有一像素那么细的表格呢？答案是肯定的。
以下的例子可以制作出细线的表格。横边框线是利用改变一行只有一个像素的透明GIF图像的表格的背景颜色显示出来的，竖边框线就只要一个〈br〉就可以了。为了使横边框线与正文有一定间隔，只要在相应的制作竖边框线效果的列中加适量的〈br〉拉大高度，而为了使竖边框线与正文有一定间距，就要利用空的列来做为间隔。需要注意的是为了使这些“边框线”与表格更加融合，必须确保单元格间距、单元格边距和边框线宽度均为0。至于透明的GIF图像，只有85字节，可以自己制作，也可以到我的网页拿，即使没有也不过是在屏幕上多了一个黑点，无伤大雅。
〈div align=″center″〉〈center〉
〈table border=″0″ width=″600″ cellspacing=″0″ cellpadding=″0″ bgcolor=″＃EEEECC″〉
〈tr〉
〈td bgcolor=″＃000080″ colspan=″9″〉〈p align=″center″
style=″font:30px 微软简粗宋,黑体,宋体;color:＃ff0″〉细线表格例子〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″＃000080″ width=″1″〉〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td colspan=″5″〉
利用表格的某些被IE和NN都接受的特性，可以制作出一些效果不错的表格，例如这个细线表格。〈p〉令每个网页都保证能用IE和NN、以及被国内和海外的人所能正常浏览，是一个网页设计者的职责！
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″＃000080″ width=″1″〉〈br〉
〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″＃000080″ colspan=″9″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″＃000080″ width=″1″〉〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈br〉
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td width=″365″〉(细线表格的左边)〈p〉
网页设计是一项艺术，需要网页设计者尽自己的努力去做，才会让网页有更好的表现。
〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″＃000080″ width=″1″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td width=″220″〉(细线表格的右边)〈p〉欢迎大家光临大唐天地：〈br〉
http://TV168.yeah.net〈/td〉
〈td width=″3″〉〈br〉
〈/td〉
〈td bgcolor=″＃000080″ width=″1″〉〈br〉
〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″＃000080″ colspan=″9″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈/table〉
〈/center〉〈/div〉
这个例子在IE和NN上都有比较满意的效果，但有一定局限，就是你不能将表格的宽度设定为百分比数值，否则在NN浏览时，边框线会变得很粗。
读者改良一下这个表格，例如将竖边框线增加为两条，就可以制作出更容易定制的文本框。
二、水平线
讨厌HTML的水平线〈hr〉了吗？改变一下上面的例子：
〈table width=″100％″ border=″0″ cellspacing=″0″ cellpadding=″0″〉
〈tr〉
〈td bgcolor=″＃c0c0c0″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈tr〉
〈td bgcolor=″＃808080″〉〈img src=″blank.gif″ width=″1″ height=″1″〉〈/td〉
〈/tr〉
〈/table〉
一条浮雕效果的水平线就出来了。
三、突出的文字
刚刚学习编写网页而又使用Frontpage 98的朋友很喜欢使用FP98的字幕功能，但这个功能其实是一个ActiveX效果，所以NN并不能识别。
不过使用了字幕的网友不用灰心，尽管放心地使用，因为恰恰NN有一个效果是IE所不支持的，就是闪烁(Blink)。所以对于需要突出的文字可以使用以下的代码：〈p〉〈span style=″font:11pt Tahoma,Arial″〉〈blink〉〈marquee border=″0″〉欢迎光临大唐天地〈/marquee〉〈/blink〉〈/span〉〈/p〉
对于IE，它是滚动的字幕(长度可以使用width=″″来定义)；而对于NN，它是闪烁的文字，不会有任何错误发生。需要注意：NN不会解释〈font style=″″〉这样的样式表，一定要使用〈span〉。
四、中文字符集
以往有不少人（包括本人）都强调要在〈head〉中加入字符集的定义，但自从有海外的网友投诉不能浏览文字后，我就开始检讨这个策略。
的确，加入了″charset=″对于具有该字符集的访问者来说，是很方便的；但如果访问者只是利用外挂的中文平台来浏览的话，那么他所看到的文字都是一个一个的方框。
那么，如何才可以使自己的网页能让所有的人所正确浏览呢？我的意见是不定义字符集，由用户自己取舍。
五、美观的按钮
一般的留言簿都需要按钮提交，为了使按钮文字美观些，可以使用以下CSS语句：
input,textarea {font:9pt Tahoma,宋体}
这些CSS还可以应用到select等表单元素上。
|
|
| |
-----------------------------------------------------------
怒发冲冠凭栏处
潇潇雨歇
抬望眼
仰天长啸
壮怀激烈
三十功名尘与土
八千里路云和月
莫等闲白了少年头
空悲切
靖康耻
犹未雪
臣子恨
何时灭
驾长车踏破
贺兰山缺
壮志饥餐胡虏肉
笑谈渴饮匈奴血
待从头收拾旧山河
朝天阙
|
|
|
