巧妙实现很酷的动态背景文字

 更新时间:2016年9月20日 19:02  点击:2059

下面的效果别以为只有Flash才能做到,用Dreamweaver一样可以做!

首先建立一个层,放入文字并用上mask滤镜:

<div id="Layer1" style="font:40pt Arial Black;filter:mask(color=white);position:absolute; left:0px; top:0px; width:508px; height:120px; z-index:2">

建立一个层,写入<marquee>

<marquee behavior=scroll direction=right width=508 height=120 scrollamount=4 scrolldelay=0 >

最后插入图片即可!

全部的代码

<html>
<head>
<title>很酷的动态背景文字</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin=0 leftmargin=0>
<div id="Layer1" style="font:40pt Arial Black;filter:mask(color=white);position:absolute; left:0px; top:0px; width:508px; height:120px; z-index:2">
<p>Dreamweaver</p>
</div>
<div id="Layer2" style="position:absolute; left:0px; top:0px; width:508px; height:120px; z-index:1">
<marquee behavior=scroll direction=right width=508 height=120 scrollamount=4 scrolldelay=0 >
<script language=javascript>
for(t=1;t<=1000;t++)
document.write("<img src=http://www.ccidnet.com/school/zhuan/3d/back.jpg>")
</script>
</marquee>
</div>
</body>
</html>



网络安全已经成为互联网最热门的话题之一,与现实相对应的,网络安全的部属、实现也就成为一个企业特别关心的问题。所以,现在我们可以很容易的看到各个企业在设计自己网络、构建企业网站的时候,对于网络安全的投入还是比较大方的,特别是一些敏感信息比较多的网站,比如银行、证券等企业,对于网络安全更是不遗余力,市场上各种宣传、广告,也都大力推广各种安全产品,比如防火墙、入侵检测、企业防病毒等一系列的产品。但是,是不是使用了这些产品,网络特别是网站就真的安全了?不一定,即使这些安全设备最高档、设置也很合理,网站还是有被攻击甚至完全被控制的可能。我们知道,现在的网站特别是稍微大一点的网站,一般都采用ASP、PHP或者JSP等脚本语言来连接数据库,取得数据库里面的数据生成动态网页,这样,当一个网站完全建立的以后,程序就会很多,特别是网页设计的特殊性,服务器与用户的交互程序特别多,所以,如果程序员不是很有经验或者没有强烈的安全意识,程序的漏洞就会很多,给网站带来不可估量的安全隐患。这些程序漏洞,一定程度上,可能比网站服务器的漏洞更加严重,因为这些漏洞防火墙或者入侵检测系统根本无法防止。
一、编程漏洞的形成
编程漏洞怎么形成的呢?我们需要对网页编程有比较全面的认识才可以理解。首先,我们来看看网页编程的特点。
1、网页编程交互性强
之所以采用各种语言来设计网站而不直接采用HTML,目的就是为了更好的管理网站资源,增加网站与浏览者之间的交互。所以,在网站设计的时候,一些常见的交互编程是少不了的,比如留言版、BBS论坛,聊天室等,这些程序最大的共同点就是用户输入很多资料,通过这些资料与其他浏览者交流或者与网站管理者交流。而交互的特点,正式漏洞形成的一大原因,因为用户输入信息是不可预测的,如果程序没有考虑到或者考虑不全面一些安全问题,用户输入就有可能成为攻击事件,不管有意还是无意。
2、网页编程字符处理特别多
上面我们谈到,交互其实就是信息的流通。所以,这些信息的处理就是大问题,怎样严格控制用户输入信息的内容、信息格式、信息长度都是编程需要考虑的问题。
3、网页编程涉及安全最里层
我们知道,网页编程直接和服务器打交道,这些程序都是直接和网站目录、网站数据库设置网站设置、系统设置相关,通过这些程序,可以访问网站目录、设置等几乎所有服务器内容。仔细想,这些程序其实都是很有潜在安全问题的,因为它们太敏感了。所以,如果程序设计有漏洞,几乎就等于网站有漏洞,甚至完全开放。
4、网页编程整体人员基础较差
网页编程人员的技术素质,这个问题其实我们可能比较少关注。在部分传统程序员眼中,网页程序设计其实不能称为程序员,他们认为网页程序设计,只需要美工好就可以了,完全没有技巧可言,不叫真正的编程。之所以形成这种观点,有几个原因。一是网页编程相对比较简单,变化较少,基本上,网页编程可以很简单的概括出几个类型:留言版、论坛、聊天室、邮件列表、新闻发布、软件下载等,而这些类型的编程,大部分都有模式可循,和传统编程相比,的确比较简单,任意掌握;二是网页编程人员大部分半路出家,专业的程序员相对较少,编程的系统训练较少,可能编程的基础也比较弱,所以,编程方面可以还是有一些缺陷的;三是部分网站直接下载网上免费程序来建立网站,这些程序的健壮性、安全性都没有严格考虑,如果网站采用者不自己修改这些程序而直接照搬得话,很可能存在严重安全问题。
二、编程漏洞的类型
网页编程相对比较简单,漏洞的形成实例虽然很多,但是,都有一些内在地共同点可以寻找,以此归纳出一些共同的特点,供我们参考。
1、用户输入验证不全面
在网站编程而言,有一个规则可能我们需要牢记,那就是对于用户和用户的输入,都必须抱怀疑态度,不能完全信任。所以,对于用户的输入,不能简单的直接采用,而必须经过严格验证,确定用户的输入是否符合输入规则才可以现实、录入数据库。总结用户输入验证,应该包括以下几个方面。
(1)输入信息长度验证
这一点可能我们比较少注意,因为我们往往认为一般用户不会故意将输入过分拉长,稍微有一些用户可能捣乱,但是,在这一点上可能没有危害。其实,只要我们仔细考虑,如果不进行输入验证,可能的危害会相当大,为什么?如果用户输入的信息达到几个兆,而我们的程序又没有验证长度的话,想想的危害就有:a、程序验证出错;b、变量占用大量内存,出现内存溢出,至使服务器服务停止甚至关机。这样的危害多大?
(2)输入信息敏感字符检查
这一点平时在设计程序的时候我们可能都有注意,主要关注的是一些JavaScript的敏感字符,比如在设计留言版的时候,我们会将“<”等符号的信息去除,以免用户留下页面炸弹。但是,是否这些就已经足够了呢?还远远不够。我们还有很多没有注意到,以下几个方面我们需要特别注意。
a、留言版内容信息的过滤
这一点上面已经提到,平时也使用较多。
b、用户名信息的过滤
这一点其实我们常常验证,但是,用户名的验证我们往往只是验证长度,没有验证JavaScript或者HTML的标记,这样就容易形成漏洞。比如用户在用户名填入“<h1>黑</h1>”,一般的用户名验证都可以通过,但是,显示在网页中却是很不美观的。这个输入没有破坏,但是,如果用户名验证不严,没有长度限制,后果怎样呢?

    在网上安家的朋友一般都要使用计数器,以便知道有多少人访问过你的网站。而绝大多数都是使用主页空间提供者提供的计数器,他们一般都是给你一条诸如<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 水平线对于制作网页的朋友来说一定不会陌生,它在网页的版式设计中是非常有作用的,可以用来分隔文本和对象。在Dreamweaver中依次点击“插入→标准”,然后单击“水平线”按钮即可添加一条水平线。Html代码为<hr>


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

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



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

  小技巧:诸如“#FF0000”这样的颜色代码对于初级朋友来说不容易分辩,你可以这样做:给网页中的字体加上颜色

由于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(距离屏幕上端的象素)。




[!--infotagslink--]

相关文章

  • ps动态环绕动画效果怎么制作

    ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
  • vue 实现动态路由的方法

    这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
  • iOS设置UIButton文字显示位置和字体大小、颜色的方法

    这篇文章给大家分享了iOS如何设置UIButton的文字显示位置和字体的大小、颜色,文中给出了示例代码,相信对大家的学习和理解很有帮助,有需要的朋友们下面来一起看看吧。...2020-06-30
  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
  • Vue实现动态查询规则生成组件

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧...2021-05-27
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
  • jQuery动态添加与删除tr行实例代码

    最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15
  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
  • C#中动态显示当前系统时间的实例方法

    想在网页中动态地显示当前系统的时间,找了好多,不过都是一些停在那里不动的。。。不过皇天不负有心人,终于让我找到了...2020-06-25
  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等,下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25
  • c#动态调用Webservice的两种方法实例

    这篇文章介绍了c#动态调用Webservice的两种方法实例,有需要的朋友可以参考一下...2020-06-25
  • SQL Server中执行动态SQL

    本文详细讲解了SQLServer中执行动态SQL的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-05-19
  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
  • C#文字换行的实现方法

    这篇文章主要介绍了C#文字换行的实现方法,通过自定义函数实现针对特定字符串的换行长度处理,是比较实用的技巧,对于C#的深入学习具有一定的借鉴价值,需要的朋友可以参考下...2020-06-25
  • jQuery为动态生成的select元素添加事件的方法

    下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-09-01
  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
  • C#实现动态显示及动态移除图片方法

    这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25