网页中制作线条的技巧

    线条是网页中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 <HR> 的标签,也就是水平直线。但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条。在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得。
  为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是否能够正确的显示。其中就有一个水平线的颜色属性问题。我们都知道
<HR> 标签具有一个 Color 属性,例如我们要制作一条红色的线条就可以用这样的代码:
<hr color="#FF0000"
noshade>
  当你在IE中浏览这一段代码时你能得到一个你希望的红色线条,可是如果你的浏览器是 Netscape 的话,那么你看到的只是一个灰色的线条,因为 Netscape 根本就不支持 HR 的 Color 属性。我们该怎么办呢?

  1、使用表格
  现在流行的网页制作中我们大多数是用表格来规划一个网页的基本布局,因此使用表格的单元格来制作线条不会给你增加太多的麻烦。
  1. 首先我们需要将表格的单元格边距属性(cellpadding)设置为 0 。如:<table cellpadding="0">,注意:只有将这个边距属性设置为 0 你才能制作一个小于 4 个象素的线条。因为 HTML 中 Cellpadding的默认值是 2 个象素,上下两个边距相加就是 4 个象素。如果不设置 Cellpadding 属性哪怕是你将这个单元格的高度(Height)设置为0 ,这个单元格的实际高度仍然是 4 个象素。
  2. 将单元格的高度(Height)设置为你希望得到的线条的高度。
  3. 设置单元格的背景颜色,如:#FF0000。到这一步还没有完,如果你这时在 Netscape中来浏览这个表格的话,你仍看不到任何颜色。下面就进行关键性的一步。
  4. 利用图像制作软件制作一个 1 * 1 的 GIF格式的图像(一个点)。这里又有一个技巧,你可以将这个图像设置为透明的,这样你就可以利用这个“点”来制作任何颜色的线条,而不需要为每一种颜色的线条都制作一个这样的“点”。 这时你再用 Netscape 浏览这个表格你就可以看到一个红色的线条了。也就是说在 Netscape 中当一个单元格中什么也没有的时候,无法显示这个单元格的背景色,而只要这个单元格中有一点东西,就可以显示单元格的被景色。笔者也不知道什么原因但事实如此。使用这一种方法你也可以制作纵向的线条。你只是需要将上述步骤的第2步的宽度改为你想要的线条的宽度,然后再设置高度或者调整这个单元格的行跨度以达到你想要的长度。这需要你在网页制作过程中根据自己的实际要求来做出相应的处理。顺便说一句,以前《电脑报》登过一篇文章说可以使用HR的 Size 属性来制作纵向线条,但我在实际中发现这种方法只能制作 100 个象素长的纵向线条。

时间: 2024-07-29 01:04:37

网页中制作线条的技巧的相关文章

网页设计技巧:网页中动感线条使用

文章描述:想让网站动感十足?试试网页设计中的韵律线条. 在网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级.当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同. 打破传统布局,创造动态的自由视感,让构成更加复杂--无论是利用简约的几何图形,或是精致的倾斜图像.让你的设计更具吸引力,不妨试试斜线. Paseo Itaigara 形状感很强,整体设计的很成功,显得并不杂乱.菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,

CSS实例教程: 网页中制作浮层叠加效果

文章简介:CSS Overlay技巧. 创建遮照图有几种技术:从使用绝对定位的元素到outline和伪元素.在本文中,我们将探索每个技术的实现样式以及他们之间的利与弊. 设计模式通常是一组最佳实践和技术,主要目的是用来解决一些最常见的设计"问题",通常是在上下文中提出的设计原则.这些原则之是一"停留在页面"的原则.这一原则是建立在页面刷新都打破用户的心中想要的流程基础上,造成所谓的"变盲",我们需要用户无论保时何地可以避免打破这种视觉流程. 我们

如何在网页中制作虚线表格

网页 icech: 在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题. 方法一:作一个1X2的图. 半黑半白,再利用表格作成线.这种方法虽然麻烦,但在任何浏览器中均可浏览,兼容性最好. 方法二:在CSS里面设定. 如果你用DreamWeaver话,只要在CSS面板里new一个style,选择"redefine HTML Tag",再在下拉菜单里先"table",在弹出的面板里,category里选择border,在border里,将top,

frontpage中的网页制作线条技巧

 线条是网页制作中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 < HR > 的标签,也就是水平直线.但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条.在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得.  为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是否能够正确的显示.其中就有一个水平线的颜色属性问题.我们都知道 < HR > 标签具有一个

Javascript设计网页中的下拉菜单

javascript|菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指

&amp;#106avascript设计网页中的下拉菜单

菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指针指向菜单条时,菜单条

Dreamweaver网页中实用的制作技巧

dreamweaver|技巧|网页 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Sty

Dreamweaver中网页设计制作技巧

1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style. 2.活用Format Tab

网页制作必学技巧之用CSS美化你的网页

css|技巧|网页 现在我们设计网页已经离不开CSS,使用CSS可以美化我们的网页,这已经是大家所共知的了! CSS是"Cascading Style Sheets"的缩写,译为样式表.HTML允许我们利用CSS来实现风格的显示,举个简单的例子:我们可以使用<b>标签来使页面的字体加粗.如: <b>网页教学网加粗字体显示</b> 如果你使我们使字体显示为红色.宋体.并且加粗显示我们可以使用下面的代码: <font color="#FF