会员: 密码:  免费注册 | 忘记密码 | 会员登录 网页功能: 加入收藏 设为首页 网站搜索  
技术文档 > Web开发 > 其他文档
HTML 旁门左道:爱上你的这六天
发表日期:2004-12-25 22:38:31作者: 出处:  

  爱上你的第一天:

  假如现在要制作一个儿童网站,需要为文章加注拼音。那么我们可以利用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,希望效果你还满意。

  效果见下:

  素材图为:

  第四天

  现在有两个人提出需求:

  “我是一技术类网站,希望用户在此交流一些代码,希望这些代码可以直接显示在网页上”
  “我是一个论坛,我希望可以屏蔽掉用户发贴中的恶意代码。使他不执行。”

  当然一种方法是,我们将用户输入的内容进行替换,将<>括号替换成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就是这个缩写的说明。效果如下:

  是的,只要鼠标放到文字上就会出现对应的说明,而且文字标有虚线下划线提示用户这是一个头文字缩写。

  但是但是但是,这种下划线在IE中是不会出现的,那么要让IE出现虚线下划线我们就要借助CSS了。

<style>
acronym{
     border-bottom:1px dotted black;
}
</style>

  爱上你的第六天:

  表格线的制作技法,我们现在要制作一个数据表格,希望每一个单元格均用黑线包围,那么如何制作呢?如下图所示:

  首先我们使用经典的“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均显示正常,而且是样式与表格进行了脱藕:)

返回顶部】 【打印本页】 【关闭窗口

关于我们 / 给我留言 / 版权举报 / 意见建议 / 网站编程QQ群   
Copyright ©2003- 2024 Lihuasoft.net webmaster(at)lihuasoft.net 加载时间 0.00372