您的位置：首页 > 编程技术 > html  >  轻松随意设置网页水平线颜色

轻松随意设置网页水平线颜色

 更新时间：2016年9月20日 19:02  点击：1986
水平线对于制作网页的朋友来说一定不会陌生，它在网页的版式设计中是非常有作用的，可以用来分隔文本和对象。在Dreamweaver中依次点击“插入→标准”，然后单击“水平线”按钮即可添加一条水平线。Html代码为<hr>。

　　在网页设计过程中，如果随意利用缺省水平线，常常会出现插入的水平线与整个网页颜色不协调的情况。打开水平线属性面板也只有宽、高、对齐以及阴影方面的设置，没有对水平线颜色的设置，怎么办?

　　其实，你只要仔细看一下水平线的属性设置面板，就会发现一个“快速标签编辑器”，点击此标签并在后面输入“color=颜色”。这里的“颜色”可以是任何颜色，一般格式为：<hr color=#FF0000>，显示如下：


　　用这个方法设置后，在Dreamweaver中无法直接看到效果，我们可以点击“F12”键，在浏览器里浏览水平线的颜色变化。

　　小技巧：诸如“#FF0000”这样的颜色代码对于初级朋友来说不容易分辩，你可以这样做：给网页中的字体加上颜色     在网上安家的朋友一般都要使用计数器，以便知道有多少人访问过你的网站。而绝大多数都是使用主页空间提供者提供的计数器，他们一般都是给你一条诸如<img src=../../...>的语句让你加在你的主页上，但你知道这条语句中各个参数的含义吗？你知道计数器还有许多其它用途吗？本文就来详细介绍一下两种常用计数器的使用方法.
　　一. wwwcount V2.4 For Unix
   这是最常用的一种计数器，国内一些免费主页空间（如网易、自贡169、保定热线、深圳963等）都在使用它！它的通常用法是<img src="/cgi-bin/Count.cgi?df=sample.dat">，如果你的计数器语句与它类似，那就赶快往下看吧！
   使用格式：<img src=http:///htmldata/2005-02-24/"/cgi-bin/Count.cgi?arg1=value1&arg2=value2&...&argn=valuen"> 其中“arg?”是参数名，“value?”是参数值，下面具体介绍各个参数的使用方法。
   1. ft--边框厚度（ft>=0，ft=0时没有边框，ft>5时为三维立体边框，缺省值为4）
   例如：<img src="/cgi-bin/Count.cgi?df=sample.dat&ft=0">
   2. frgb--边框颜色（R;G;B或16进制颜色值或颜色的英文单词，缺省值为100;139;216或648bd8）
   例如：<img src="/cgi-bin/Count.cgi?df=sample.dat&frgb=ff0000">
   3. md--计数器位数（5<=md<=10，缺省值为6）
   4. dd--计数器数字样式（dd=A~E)
   注：软件只本身提供5种图样，如需要更多的图样可到http://。
   5. comma--是否每三位加逗号（comma=T or F，缺省值为F）
   例如：<img src="/cgi-bin/Count.cgi?df=sample.dat&dd=C&comma=T">
   6. srgb，prgb--将颜色srgb变为颜色prgb（颜色值见frgb，缺省值：srgb=green，prgb=cyan）
   例如：<img src="/cgi-bin/Count.cgi?lit=1234567&srgb=00ff00&prgb=ff0000"&chcolor=T>
   注：必须与参数chcolor=T同时使用。
   7. chcolor--是否允许颜色改变（chcolor=T or F，缺省值为F）
   8. st--起始数值（缺省值为1）
   注：必需Server允许你自由生成data文件，如果data文件已经存在无效。
   9. sh--是否显示计数器（sh=T or F，缺省值为T）
   注：你可以使用参数：st=F不显示计数器而照常计数。
   10. df--保存计数的data文件（如不指定则显示随机数）
   注：这个文件是计数器提供者指定的。
   11. incr--是否计数（缺省值为T）
   注：如设为F则只显示当前数值而不增加。（谁会用这个功能！）
   12. lit--显示指定的字符串（lit为数字,a,p,:或-）
   13. negate--反色显示（negate=T or F，边框颜色不反转，缺省值为F）
   14. degrees--旋转计数器的角度（degrees=90，180，270 or 360，缺省值为270）
   例如：<img src=/cgi-bin/Count.cgi?ft=0&df=sample.dat°rees=90&dd=D&prgb=ffff00&rotate=T">
   注：必须与参数rotate=T同时使用。
   15. rotate--是否允许旋转显示（rotate=T or F，不指定degrees时旋转270度，缺省值为F）
   16. display--显示计数器、日期、时间或图像（display=counter, clock, date or image

由于IE和NS对于层的支持存在差别，所以在代码的最前面。先对浏览器进行检测。IE使用document.all.id-name.style.visibility="visible"，NS使用document.layers.id-name.visibility="visible"。
<HTML>
<HEAD>
<TITLE>层的显示和隐藏及浏览器检测</TITLE>
<script language="javascript">
<!--
file://if explorer (4.x)
if (document.all) {
layerRef='document.all'
styleRef='.style.'
}
file://else if netscape (4.x)
else if (document.layers) {
layerRef='document.layers'
styleRef='.'
}
else{
alert("你使用的浏览器可能看不到效果。")
}
function show(){
eval(layerRef+'["divTest"]'+styleRef+'visibility="visible"')
}
function hide(){
eval(layerRef+'["divTest"]'+styleRef+'visibility="hidden"')
}
file://-->
</script>
</HEAD>


<BODY bgcolor="#000000" text="#FFFFFF" link="#FFFFCC" vlink="#CCFFCC" alink="#CCCCFF">


<p align="center"><a href="javascript:hide('divText')">隐藏代码</a> <a href="javascript:show('divText')">显示代码</a>


<div id="divTest" style="position:absolute; left:238px; width:340px; height:32px; top:190px; visibility: hidden">
<p align="center">本例是显示和隐藏层的例子。-----这里是层里显示的内容，随便。</p>
</div>
</BODY>
</HTML>


说明：<div id="divTest" style="position:absolute; left:238px; width:340px; height:32px; top:190px; visibility: hidden"> 是设置层的绝对位置以及宽度和高度。使用象素值表示。层一开始设置为“hidden”隐含的，点击后显示出来“visible”。
你所需要做的仅仅是：
（1）改一下<div>...</div>中的id名字，当然不改页可以，只要前后保持一致即可。
（2）根据你的页面情况设置一下层的绝对位置，多试几次直到合适为止。绝对位置left:238px（距离屏幕左侧的象素）， top:190px（距离屏幕上端的象素）。




    1.首先主题选择不要落俗! 现在许多的个人主页就象"大锅饭".题材包罗万象,内容雷同无味.人人都是"软件速递""音乐宝库""主页教程"等等.让我一看就赶紧"back",我可是花钱上网的噢!题材的选择少而精,又能坚持天天更新的话,会很快受到大家的欢迎，就象书路的电子图书,龙翔的游戏资讯.另外提醒您的一点就是,最好不要在主页里设有关hacker(解密,注册码)的资料,国内大部分的免费空间提供商都不接受含此类信息的站点.
　　2.如果您准备建立新的个人首页，千万不要立刻开始制作页面。一定要好好的想一想，总体规划一下整个网站的结构。特别要考虑到网站的维护更新方便。一时兴起，想到什么就作什么，往往会使您的网站，虎头蛇尾，条理混乱，最终因维护困难而夭折。
　　3.开始制作请您千万不要急着许多页面一起制作.许多新手会及不可待的将收集到的各种资料填入各个页面.转眼首页速成,成就感喔!可等您回过味来想要修改一些页面元素时,却发现一页一页改的好辛苦! 建议您先制作有代表性的一页,将页面的结构,图片的位置,链接的方式统统设计周全,例如:每页设置"返回首页"的链接,Email地址,版权信息等.然后copy成N个页,再将相应的内容"填空".这样制作的主页,速度快,整体性强.如果您能结合borders的使用,可以天天轻松改变站点的风格.
　　4.制作时,内容不要全搬照抄他人的内容,适当加入一些自己的文章,评论和见解,会使大家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程.毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在!
　　5.每个页面不要使用超过2个的java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受.java会使您的网页速度减慢至少50%.由于浏览器的版本,有时候等候半天,却告诉您java applent不能启动,这种经历相信您也有!
　　6.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示.
　　7.设置一个专门的"what's new"页面.及时醒目的告诉来访者您主页最新更新的内容,这样能方便常客浏览和寻找他们所需要的内容.许多好的主页干脆将首页的内容作成"what's new",如"欢乐天地""华军主页",让您一目了然,不致于层层深入,一无所获.
　　8.为您的图片加注解.图片的下载较慢,在没有显示出来时注解的标注有助于让浏览者知道这是关于什么的图片,是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便,您千万抽空为图片加一个注解.这是一个小地方,却体现一个网页的制作水准哦!
　　9. 备份您的主页.您要说了,这也算窍门?象在凑数!千万千万不要这样想."机有不测风云",现在系统大战,软件Bug百出,病毒横行的年代,您保不准什么时候机器罢工,辛辛苦苦制作的网页付之东流.这样的"惨痛教训"我可不止一次了.算俺罗唆也好,杞人忧天也好,您就备份了罢!


<     IE频道文件实际上就是一个纯文本文件，有与html类似的语法格式， 以cdf为扩展名。所以要建立频道文件不需要任何专门的编辑工具，仅仅 windows 95/98/2000下的notepad就足够了。
　　注：由于编码的关系，“<>”用“[]”代替。
    下面是完整的频道文件举例：
      +++++++++++++++++++++++++++
        [Channel HREF="http:///htmldata/2005-02-24/default.htm" SELF="soim.cdf"
        BASE="http://www.soim.com/"]
　    　[Title]索易电子刊物[/Title]
　    　[Logo HREF="http:///htmldata/2005-02-24/soimcdf.gif" Style="IMAGE" /]
　    　[Logo HREF="http:///htmldata/2005-02-24/soimicon.gif" Style="Icon" /]
　    　[Abstract]索易电子刊物——soim.com[/Abstract]
　　　　[Item HREF="http:///htmldata/2005-02-24/subscribe.htm" Precache="yes"]
　　　　[Title]索易邮件订阅[/Title]
　　　　[Abstract]索易在线邮件订阅[/Abstract]
　　　　[Logo HREF="http:///htmldata/2005-02-24/subscribe.gif" Style="icon" /]
　　　　[/Item]
　　　　[Item HREF="http:///htmldata/2005-02-24/software.htm" Precache="yes"]
　　　　[Title]共享软件联盟[/Title]
　　　　[Abstract]索易共享软件联盟[/Abstract]
　　　　[Logo HREF="http:///htmldata/2005-02-24/software.gif" Style="icon" /]
　　　　[/Item]
        [/Channel]
    +++++++++++++++++++++++++++++++++++++++++++++++++++
　　说明：
　　频道文件的正文都是以[channel ......]开头，并以[/channel]结 尾的。 就像在html语言中是以[html]开头，以[/html]结尾的一样。
　　在第一行[channel ......]中，
    href=http:///htmldata/2005-02-24/"......"标明此频道所指向的主网页文件名；
    self="......"是频道文件自身的文件名；
    base="......"频道文件默认的基本路径（URL），在频道文件中的
    “HREF”全部使用绝对路径的话，这项是可以省略的。
　　第二行[title]......[/title]，填写频道的标题。
　　在第三，四行[logo ......]中 ，
    href=http:///htmldata/2005-02-24/"....."处填写图案的文件名，
    style="....."处填写对图案的描述，image表示是位于频道栏处的图标（大小为：80*32象素）；icon表示频道文件的图符（大小为：32*32象素）。 注意：末尾的“/”不要漏掉。
　　第五行[abstract]......[/abstract]，填写对频道内容的描述。
　　第六行[item ......]，定义子频道。子频道可以是主页面下的一 些主要栏目的链接。其中href=http:///htmldata/2005-02-24/"......"处填写子频道所指向的网页文件名；Precache="......"是判断否对子频道作缓存，回答只有“yes” 或“no”
[!--infotagslink--]

相关文章

  • Android设置TextView竖着显示实例

    TextView默认是横着显示了，今天我们一起来看看Android设置TextView竖着显示如何来实现吧，今天我们就一起来看看操作细节，具体的如下所示。 在开发Android程序的时候，...2016-10-02

  • JavaScript实现颜色查看器

    这篇文章主要为大家详细介绍了JavaScript实现颜色查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-13

  • jQuery获得字体颜色16位码的方法

    这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23

  • 安卓利用按钮Button更改的字体大小、字体颜色、背景颜色代码

    本文章来介绍在android开发中，我们通过button按钮来动态改变字体大小、字体颜色、背景颜色代码，有需要了解的朋友可参考参考。 实现的逻辑：通过遍历View的方式，判断Vi...2016-09-20

  • PyCharm设置注释字体颜色以及是否倾斜的操作

    这篇文章主要介绍了PyCharm设置注释字体颜色以及是否倾斜的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-16

  • JavaScript实现鼠标经过表格行给出颜色标识

    这篇文章主要为大家详细介绍了JavaScript实现鼠标经过表格行给出颜色标识，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-12

  • R ggplot2 修改默认颜色的操作

    这篇文章主要介绍了R ggplot2 修改默认颜色的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06

  • vivo x9怎么设置默认输入法?vivo x9设置默认输入法教程

    本篇文章介绍了vivo x9如何设置默认输入法的方法，手机小白们快来了解一下吧。 问：vivo x9怎么设置默认输入法?答：其实设置默认输入法很容易，首先点击应用程序，然后点设...2017-01-22

  • Windows Server 2008 R2远程设置选项灰色解决方法

    最近公司环境有几天Windows Server 2008R2的服务器因为没有激活导致过期后都不能远程，连接显示器后发现远程设置的地方为灰色了...2016-01-27

  • 美图秀秀如何改色 修改颜色方法分享

    今天小编在这里要教大家的是美图秀秀的这一款软件修改颜色的方法，各位想知道到底该怎么样才能够修改颜色的使用者们，那么下面就快来跟着小编一起看看教程吧。 给各...2016-09-14

  • Windows 2016 服务器安全设置

    最近公司的网站升级Windows 2016服务器，选择安装了最新版的Windows 2016，以前使用Windows服务器还是Windows 2003系统，发现变化还是挺多的，依次记录下来以备后面查阅...2020-10-05

  • PHP脚本实现Magento权限设置与缓存清理

    PHP脚本实现Magento权限设置与缓存清理的实例代码有需要的朋友可参考一下。 代码如下 复制代码 <?php ## 设置文件644，目录755 function Al...2016-11-25

  • 韩国网站之网站颜色组合搭配

    ...2016-09-20

  • win2008之IIS7中FTP设置技巧

    如果要允许用户在站点中上载或下载文件，就需要在 Web 服务器上设置 FTP。无论站点是位于 Intranet 还是位于 Internet 上，使用 FTP 在所提供的位置中上载和下载文件的原理是相同的。...2016-01-27

  • 深入分析为Visual Assist设置快捷键的方法

    本篇文章是对为Visual Assist设置快捷键的方法进行了详细的分析介绍，需要的朋友参考下...2020-04-25

  • python 根据excel中颜色区分读取的操作

    这篇文章主要介绍了python 根据excel中颜色区分读取的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-06

  • goland设置颜色和字体的操作

    这篇文章主要介绍了goland设置颜色和字体的操作方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-04

  • 基于javascript实现随机颜色变化效果

    这篇文章主要介绍了基于javascript实现随机颜色变化效果的相关资料,需要的朋友可以参考下...2016-01-15

  • C#如何更改Word的语言设置

    这篇文章主要为大家详细介绍了C#如何更改Word的语言设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载

    我们经常看到有很多的垂直时间轴用来记录事件进展，而有朋友问我要求分享水平的时间轴，其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴...2015-12-21