SW Portal--[转]HTML 旁门左道:爱上你的这六天

The Neurotic Fishbowl

nybon 发表于 2004/12/31 0:13:43

　爱上你的第一天：　　假如现在要制作一个儿童网站，需要为文章加注拼音。那么我们可以利用Ruby标签来做这件事。 <p>1.Ruby:</p><Ruby>清风是世界上最纯洁的人<RT>Qing Feng Shi Shi Jie Shang Zui Chun Jie De Ren</Ruby> 　　<RT>后面的就是拼音内容，无需封闭标签　　缺点：可惜Mozilla不支持此标签　　爱上你的第二天：　　一篇文章的目录，我们要按照序号进行编排，手动编排序号既容易出错也不易修改，如何解决呢？今天就要用到<OL>标签：） <OL><LI>这是列表的第一个项目<LI>这是列表的第二个项目</OL><OL START=3><LI>这是以编号3起始的项目</OL><OL TYPE=A><LI>这是项目A<LI>这是项目B</OL> 　　此标签同时支持IE和Mozilla，OK。在我爱上你的第三天：　　昨天的例子是用来自动生成序号的，那么也许你会说：“好难看，能不能用图片当前面的标志，还不用我一个一个的加？”答案是肯定的。　　只需要配合CSS，那么非常的简单 <style>ul.blogroll{ list-style:url(dot.jpg) disc;}</style><ul class="blogroll"><li><a href="1.htm">平面设计</a></li><li><a href="2.htm">网页设计</a></li><li><a href="3.htm">动画设计</a></li></ul> 　　此代码同时支持Mozilla和IE，希望效果你还满意。　　效果见下： 500)this.width=500'> 　　素材图为：500)this.width=500'> 　　第四天　　现在有两个人提出需求：　　“我是一技术类网站，希望用户在此交流一些代码，希望这些代码可以直接显示在网页上”　　“我是一个论坛，我希望可以屏蔽掉用户发贴中的恶意代码。使他不执行。”　　当然一种方法是，我们将用户输入的内容进行替换，将<>括号替换成html的写法（例如：& l t ;）。但是，我们今天用<XMP></XMP>标签来做这件事情。 <xmp><OL><LI>这是列表的第一个项目。<LI>这是列表的第二个项目。</OL><OL START=3><LI>这是以编号 3 起始的项目。</OL><OL TYPE=A><LI>这是项目 A。<LI>这是项目 B。</OL></xmp> 　　在<XMP>内的标签会直接渲染出来。第五天：　　XML,MSN,XHTML,CSS,W3C,BMW,IBM,ICQ,HTML......... 　　这些都是什么？都是缩写。如何向不懂的用户解释这个缩写的含义呢？当然可以在后面跟上说明，例如：W3C(World Wide Web Consortium)，但那么做就不是旁门左道了：）　　OK，今天我们来用<acronym>标签，这个标签的作用就是用来标识这种缩写。例如： <acronym title="Cascading Style Sheets">CSS</acronym> 　　title就是这个缩写的说明。效果如下：500)this.width=500'>　　是的，只要鼠标放到文字上就会出现对应的说明，而且文字标有虚线下划线提示用户这是一个头文字缩写。　　但是但是但是，这种下划线在IE中是不会出现的，那么要让IE出现虚线下划线我们就要借助CSS了。 <style>acronym{ border-bottom:1px dotted black;}</style> 　　爱上你的第六天：　　表格线的制作技法，我们现在要制作一个数据表格，希望每一个单元格均用黑线包围，那么如何制作呢？如下图所示： 500)this.width=500'> 　　首先我们使用经典的“21法则”：也就是cellpadding为2，cellspacing为1，表格背景有颜色，td再设背景色，利用表格间的缝隙来加上交叉线 <table width="500" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000"> <tr bgcolor="#FFFFFF"> <td> </td> <td> </td> <td> </td> </tr></table> 　　由于不想文章太长，请手动多加一些<tr>使效果更明显，当然最后我会给出一个Example下载。　　这是N年一直在使用的方法，简单易用，但是，现在都在强调样式分离，OK，为了追赶潮流，让我们用CSS来做这件事。 CSS方法1：模仿“21法则” 　　表格仍然是那个表格，为了方便我们给表格起名为 <table id="table1"> <tr> <td> </td> <td> </td> <td> </td> </tr></table> 　　OK，这是一个干净的表格，我们用CSS来定义他 #table1{ background-color:#000000;//表格整体背景黑色，也就是缝隙间的颜色 width:500px; padding:0px; border-spacing:1px;//表格缝隙1个px}#table1 td{ background-color:#FFFFFF;} 　　但是，你会发现在IE下显示表格线会显得很粗。。。由于IE对CSS2标准支持不够，所以显示不是像预想的一样（广告时间：在这里推荐一下Mozilla浏览器：））　　那么如何使用CSS，才能在所有浏览器均显示正常呢？并且不利用这种缝隙法的歪门邪道，而就是利用border来做呢：），OK答案就在下面。　　重新建立一个表格id="table2" #table2{ border:1px solid #000000;//为表格外面画线 width:500px; padding:0px; border-collapse:collapse;//由于td四周画线，所以某些线会绘制两次，会变粗，使用这个属性可以自动合并同类项 border-spacing:0px;//表格间无需空隙}#table2 td{ border:1px solid #000000;//为td四周画线} 　　OK，以上CSS和“21法则”的效果是完全相同的，IE和Mozill均显示正常，而且是样式与表格进行了脱藕：）　　完整代码下载：附件

阅读全文(1650) | 回复(0) | 编辑 | 精华

发表评论：