• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Frontpage教程 > 网页中制作线条的技巧

网页中制作线条的技巧

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-07-06

本文主要包含网页线条,网页线条素材,网页设计线条,网页线条代码,网页制作技巧等相关知识,佚名希望在学习及工作中可以帮助到您

线条是网页中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 < HR > 的标签,也就是水平直线。但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条。在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得。

为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是否能够正确的显示。其中就有一个水平线的颜色属性问题。我们都知道 < HR > 标签具有一个 Color 属性,例如我们要制作一条红色的线条就可以用这样的代码:
< hr color="颜色代码" >

当你在 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. 设置单元格的背景颜色,如:
  4. 利用图像制作软件制作一个 1 * 1 的 GIF 格式的图像(一个点)。这里又有一个技巧,你可以将这个图像设置为透明的,这样你就可以利用这个“点”来制作任何颜色的线条,而不需要为每一种颜色的线条都制作一个这样的“点”。

这时你再用 Netscape 浏览这个表格你就可以看到一个红色的线条了。也就是说在 Netscape 中当一个单元格中什么也没有的时候,无法显示这个单元格的背景色,而只要这个单元格中有一点东西,就可以显示单元格的被景色。笔者也不知道什么原因但事实如此。

使用这一种方法你也可以制作纵向的线条。你只是需要将上述步骤的第 2 步的宽度改为你想要的线条的宽度,然后再设置高度或者调整这个单元格的行跨度以达到你想要的长度。这需要你在网页制作过程中根据自己的实际要求来做出相应的处理。顺便说一句,以前《电脑报》登过一篇文章说可以使用 HR 的 Size 属性来制作纵向线条,但我在实际中发现这种方法只能制作 100 个象素长的纵向线条。

您可能想查找下面的文章:

  • 网页中制作线条的技巧

相关文章

  • 2017-07-06FrontPage10全透视教程(5)
  • 2017-07-06用FrontPage转换图片文件格式
  • 2017-07-06FrontPage2003 发布网站
  • 2017-08-06Frontpage教程:在表格中布局图片
  • 2017-07-06Frontpage巧补残缺网页
  • 2017-07-06FrontPage10全透视教程(15)
  • 2017-07-06FrontPage2002高效使用的技巧
  • 2017-07-06FrontPage2002简明教程八:站点的管理
  • 2017-08-06FrontPage教程:编辑网页
  • 2017-07-06FrontPage2000的映射制作

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • FrontPage巧制网站目录
    • 用FrontPage 2000制作鼠标光照特效
    • FrontPage的超链接管理
    • FrontPage10全透视教程(15)
    • FrontPage10全透视教程(5)
    • 轻松利用FrontPage做站内搜索
    • FrontPage2003轻松布局网页
    • Frontpage常见问题
    • 用FrontPage 2000快速制作动态按钮
    • Frontpage 三种回车键

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有