分享按钮
RSS订阅

网页常用经典代码大全

作者: 清逸成风 |来源:原创| 标签: 前端技术   网页   代码   清逸成风   javascript  

▲我的滚动连接代码:
<marquee width=100% behavior=alternate scrollamount=3><a href=http://www.xiaonei.com/GetUser.do?id=60276><font size=4.5>去我的好友的页面看看</font></a></marquee>
▲背景和字的颜色:<body bgcolor="#000000" text="#ff9933">
特别说明的是:bgcolor=后面的内容是背景颜色的代码,text=后面的内容是个人资料留言等文本的字的颜色
▲滚动背景图案:<BODY BACKGROUND="http://img.xiaonei.com/photos/43/864/orig59095.jpg">
▲固定背景图案:<body background="http://img.xiaonei.com/photos/27/474/orig74269.gif"bgproperties="fixed"></body>
▲背景音乐:<BGSOUND src="http://img.xiaonei.com/photos/7/719/96072391.mp3" loop=infinite>
背景音乐显示播放器:
<embed src=http://img.xiaonei.com/photos/27/474/orig38170.mp3 type=application/x-mplayer2 showcontrols="1"></embed>
背景音乐隐藏播放器:<embed src=http://img.xiaonei.com/photos/43/864/orig60507.wma type=application/x-mplayer2 showcontrols="0"></embed>
背景音乐循环播放并隐藏播放器:<embed src=http://img.xiaonei.com/photos/43/864/orig60507.wma type=application/x-mplayer2 showcontrols="0" loop="true" ></embed>
▲页面贴图:<img src="http://img.xiaonei.com/photos/43/864/orig60273.gif">
▲贴图精确定位:<div style="position:absolute;Top:335px;left:266px;width:200px;height:128px;"><img width=100% src="http://sms.imobile.com.cn/Upload/I/P/4/MMSLOGO_45832.GIF"></div>
▲精确定位::<div style="position:absolute;Top:335px;left:266px;width:200px;height:128px;">定位的内容</div>

▲整个页面不透明度设置,30越大越透明(用了之后打开页面速度会变的很慢,不推荐使用)
<body style="FILTER: alpha( Style=3 FinishOpacity=30);" >
▲贴图透明化:<IMG style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();" src= http://img.xiaonei.com/photos/43/864/orig60273.gif width=400 height=300>
▲贴图透明加定位:
<div style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black();position:absolute;Top:335px;left:266px;width:200px;height:128px;"><img width=100% src="http://img.xiaonei.com/photos/43/864/orig52995.jpg"></div>
▲FLASH动画:<embed style="left: 150px; position: absolute; top: 50px; " align=right src=http://www.dabaoku.com/images/yu.swf width=1000 height=500 type=application/octet-stream ; quality="high" wmode="transparent"></embed>
▲FLASH动画(相对定位即放在涂鸦板里):<embed style="left: 150px; position: relativity; top: 800px; " align=right src= http://www.dabaoku.com/images/yu.swf width=400 height=200 type=application/octet-stream ; quality="high" wmode="transparent"></embed>
▲视频1:
<embed SRC=http://img.xiaonei.com/photos/43/864/orig37195.wmv type=audio/x-pn-realaudio-plugin CONSOLE=Clip1 CONTROLS=ImageWindow HEIGHT=252 WIDTH=324 AUTOSTART=true loop=true>
视频2:
<embed HEIGHT=480 WIDTH=590 name=MediaPlayer1 pluginspage=http://www.microsoft.com/Windows/MediaPlayer src=http://img.xiaonei.com/photos/43/864/orig37195.wmv type=application/x-mplayer2 showstatusbar="1" showcontrols="1" loop="0" volume="1"></embed>
▲建链接(本页面进入):
<a href=http://www.xiaonei.com/GetUser.do?id=60276>我的默林邀请您进入</a>
▲建链接(新页面进入):
<a href=http://www.xiaonei.com/GetUser.do?id=60276 target="_blank">我的默林邀请您进入</a>
▲滚动的超链接:
<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>
▲改字颜色:
<font color=00dfff>字</font>
▲改字体和字号
<font face="幼圆"><font size=4.5>字</font></font>
▲改鼠标:
<body style="cursor:url('http://img.xiaonei.com/photos/43/864/orig65926.ani ')"></body>
将其中的 连接改成自己喜欢的鼠标FLASH地址即可
鼠标样式大全:http://www.zidou.com/page/cursor/
▲改变所有字的代码
<style type=text/css>
<!-- A:link{COLOR: 颜色代码;FONT-SIZE:9pt;FONT-FAMILY: 字体名称}; A:visited{COLOR:颜色代码;FONT-SIZE:9pt;FONT-FAMILY: 字体名称}; A:active{COLOR: 颜色代码;FONT-SIZE:9pt;FONT-FAMILY: 字体名称}; A:hover{COLOR: 颜色代码}; body{COLOR:颜色代码;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:字体名称}--></style>
将上面颜色字号字体换成自己喜欢的即可
▲横向交替滚动:
<marquee width=100% behavior=alternate scrollamount=1>所要写的文字</marquee>
▲颜色代码网址:
http://img.xiaonei.com/photos/20060605/2100/orig55142.htm
字体颜色代码
1 白色 #FFFFFF 2 红色 #FF0000 3 绿色 #00FF00 4 蓝色 #0000FF 5 牡丹红 #FF00FF 6 青色 #00FFFF 7 黄色 #FFFF00 8 黑色 #000000 9 海蓝 #70DB93 10 巧克力色 #5C3317 11 蓝紫色 #9F5F9F 12 黄铜色 #B5A642
13 亮金色 #D9D919 14 棕色 #A67D3D 15 青铜色 #8C7853 16 2号青铜色 #A67D3D 17 士官服蓝色 #5F9F9F 18 冷铜色 #D98719 19 铜色 #B87333 20 珊瑚红 #FF7F00 21 紫蓝色 #42426F 22 深棕 #5C4033 23 深绿 #2F4F2F 24 深铜绿色 #4A766E 25 深橄榄绿 #4F4F2F 26 深兰花色 #9932CD 27 深紫色 #871F78 28 深石板蓝 #6B238E 29 深铅灰色 #2F4F4F 30 深棕褐色 #97694F 32 深绿松石色 #7093DB 33 暗木色 #855E42 34 淡灰色 #545454 35 土灰玫瑰红色#856363 36 长石色 #D19275 37 火砖色 #8E2323
贴图时可能要考虑尺寸,有时需要裁剪,让图片完整出现在页面内。
“背景图案”宽度在1100左右,“页面贴图”宽度在480左右。
▲发光字
<TABLE style="FILTER: glow(color:#FF00FF,direction=2)"> 所要写的文字</table>
▲浮雕字:
<table style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1);"><font size=4.5>你要的文字</font></table>
▲可爱的钟表:
<embed style="left: 728px; position: absolute; top: 99px; " align=right src=http://www.9941.cn/moban/zhong/67.swf width=100 height=200 type=application/octet-stream ; quality="high" wmode="transparent"></embed>

▲给自己加星星5颗:
<DIV style="LEFT: 606px; BACKGROUND-IMAGE: url(http://img.xiaonei.com/photos/20060523/1950/orig78576.png); WIDTH: 60px; BACKGROUND-REPEAT: repeat-x; POSITION: absolute; TOP: 128px; HEIGHT: 9px"></DIV>

▲阴影文字
</tex:tarea><table style="FILTER: dropshadow(color=#cccccc, offx=2, offy=2, positive=2);">
<font color=#6CABE7 size=2>谢谢大家的支持</font>
</table>
 
▲5月13号新增;
<style type=text/css> <!-- #pageheader{display:none;}--></style> <!-隐藏上方图片和上方连接(5月29号最新)->
<style type=text/css> <!-- #pageheader{ margin:0;padding-top:00px; background-image:url();} #pageheader a{color:white;} #pageheader a:hover{background-color:#9F79EE;color:#fffbd1;}--> </style><!-隐藏上方图片(已过期)->
▲7月26号新增
<style type=text/css><!--.lwPic{display:none;}--></style><!-隐藏留言小头像代码->

▲隐藏好友和最近访问
<style type=text/css><!--.withsubtitle {display:none;} .memberlist {display:none;}--></style>
▲<br /><style type=text/css><!-- #pageheader{ margin:0;padding-top:60px; background-image:url(http://img.xiaonei.com/photos/43/864/orig57704.jpg);} #pageheader a{color:white;} #pageheader a:hover{background-color:#003399;color:#fffbd1;}--> </style><!-改上方图片-> ---------作废
更新..
▲<style type=text/css> <!-- #pageheader img{display:none;}#pageheader{background-image:url(http://img.xiaonei.com/photos/43/864/orig57704.jpg);} .topright {margin:0;padding-top:60px;BACKGROUND-IMAGE: url()} #pageheader a{color:white;}#pageheader a:hover{background-color:transparent;color:#333333;} --></style><!-改上方图片->
▲<style type=text/css> <!--#sidebar img{display:none;border:none;};#sidebar center div div{border:none;display:none;};#sidebar center div{border:none;display:none;};#sidebar div h5{border:none;display:none;};--></style><!-除掉下半张脸除广告->

▲<br /><style type=text/css> <!-- #header{background-color:#FFFFFF;} h1{color:#0000FF;}--></style><!-最上方图片下的边框颜色->
 
▲5月24号新增
去掉白块、白条,即去掉边框去掉广告加宽导航栏代码:
<link rel=stylesheet href="http://img.xiaonei.com/photos/131/4464024/orig94311.css" type="text/css">
▲隐藏上方图片(本条转自邓冰澌)
<style type=text/css> <!-- #pageheader img{display:none;} .topright {BACKGROUND-IMAGE: url()} #pageheader a{color:white;}#pageheader a:hover{background-color:transparent;color:#333333;} #sidebar img{display:none;} --></style><!-隐藏上方图片->
▲给日志加个滚动条(本条转自李响)
<style type=text/css>div.entryBody{height:200px; overflow:auto; color:#009999; font-size:20px;font-family:楷体;}</style>

▲浏览者IP 等其他电脑详细参数等显示<本条转自苏海龙>
<img src=http://www.hotik.com/sign.png border=0>
▲修改边框颜色《本条转自李曼》:
<style type=text/css>.top{color:#98FB98;}H2{background-color: #242424;color:#98FB98;}.lwTitle{background-color: #242424;}.label{color:#FFFFFF;}.person{background-color: #242424;}.memberlist2{background-color:#242424;}#gnav{background-color:#242424;}h1{background-color:#242424;}#profileActions{background-color:#00ff00;}#profileActions a{background-color:#242424;border-bottom: solid 1px #FFFFFF;}</style>

▲5月28号新增-<本条转自许晓澄>
移动侧边栏的大小和位置:
<style type=text/css> <!-- #sidebar{width:132px;float:right;}--></style>
去处底部系统链接:
<style type=text/css> <!-- #pagefooter{display:none;}--></style>
隐藏个人照片:
<style type=text/css> <!-- #mainpic{display:none;}--></style>

关于超链接的控制:
A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff}
  (hover表示鼠标指示时,链接文字背景色为#ffccff;前景色为#0080ff)
  A:link {color:#000000;TEXT-DECORATION: none}
  (link表示未被访问时,链接颜色为黑色,链接无下划线.)
  A:visited {color:gray;TEXT-DECORATION: none}
  (visited表示被访问后,链接颜色为灰色,链接无下划线.)
  A:active {color:green;text-decoration: none}
  (active表示鼠标点击时,链接颜色为绿色,链接无下划线.)
  A:hover {TEXT-DECORATION: underline}
  (hover表示鼠标指示时,链接显示下划线)
  注释:
  none——没有下划线
  underline——下划线
  overline——上划线
  line-through——中划线
▲<转>滚动文字
用如下语句
<marquee>需要移动的文字</marquee><direction=#>
例:<marquee direction=left marquee scrollamount=10>开开心心每一天!</marquee> <P>
marquee 具体参数有:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动)、Slide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。
根据自己的喜欢,设定不同的参数,就有不同的效果
▲<转> 各种文字滚动代码
1.建立第一个滚动字幕。代码
<marquee scrollAmount=2 width=300>我钟意网页树树</marquee>
2.各参数详解:
a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)
3.实例:
  a)如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果,代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>,点击中央电视台就可以进入了:
中央电视台
b)如何制作当鼠标停留在文字上,文字停止滚动? 【此条已被禁止】
代码如:
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如:
文字内容
c)交替效果。代码如:
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
d)多行文本向上滚动。代码如:
<marquee scrollAmount=2 width=300 height=160 direction=up>&#8226;早晨好啊!<br>&#8226;空气好清新啊<br>&#8226;今朝食乜好呢?<p>&#8226;<a href=http://www.cctv.com>中央电视台</a></marquee>
&#8226;注意:如果你的网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候你发现你原来的代码顺序已经变了,My god!解决的办法是,找出原来的代码,把它嵌入到JavaScript的document.write中即可,上述代码写为:
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>&#8226;早晨好啊!<br>&#8226;空气好清新啊<br>&#8226;今朝食乜好呢?<p>&#8226;<a href=http://www.cctv.com>中央电视台</a></marquee>')</script>
e)改变滚动字幕的颜色?可以用样式表来控制。如下效果,代码是<marquee scrollAmount=2 width=300><a style=color:CC6600>我钟意网页树树!</a></marquee>。
我钟意网页树树!
计数器http://00counter.com/
http://cscqcn.com/webs/web1/mianfei/k.htm
flash素材下载大全:http://www.9941.cn/
▲<转>常用FLASH和MP3连接地址(现在可能有一部分被删,请先试试能否打开,再替换):
白鹅:http://forshine.net/flash/1031_19.swf
龙凤胎:http://forshine.net/flash/1031_20.swf
摇摆小姑娘:http://forshine.net/flash/1031_21.swf
长发飘飘:http://forshine.net/flash/1031_22.swf
下雨了:http://forshine.net/flash/1031_23.swf
白色蒲公英-1:http://forshine.net/flash/1031_24.swf
白色蒲公英-2:http://forshine.net/flash/1031_25.swf
公主:http://forshine.net/flash/1031_26.swf
太阳光:http://forshine.net/flash/1031_27.swf
郁金香:http://forshine.net/flash/1031_28.swf
 
飘出来的星星:http://forshine.net/flash/1031_29.swf
群星-1:http://forshine.net/flash/1031_30.swf
闪光:http://forshine.net/flash/1031_31.swf
群星-2:http://forshine.net/flash/1031_32.swf
2D泡泡:http://forshine.net/flash/1031_33.swf
吐泡泡:http://forshine.net/flash/1031_34.swf
小女孩布偶:http://forshine.net/flash/1031_35.swf
水滴下来:http://forshine.net/flash/1031_36.swf
水滴:http://forshine.net/flash/1031_37.swf
花开:http://forshine.net/flash/1031_38.swf
灯光下的花-3:http://forshine.net/flash/1031_40.swf
蜻蜓在花上:http://forshine.net/flash/1031_42.swf
青草:http://forshine.net/flash/1031_43.swf
巧克力蛋糕:http://yooyijin.go.51.net/001/qingrenjie001.swf
爱心巧克力夹心:http://yooyijin.go.51.net/001/qingrenjie002.swf
好时巧克力:http://yooyijin.go.51.net/001/qingrenjie003.swf
爱心气球-1:http://yooyijin.go.51.net/001/qingrenjie005.swf
爱心气球-2:http://home.atie.cn/upload/pic/1112097311.swf
爱心飘飞-1:http://yooyijin.go.51.net/001/heart001.swf
爱心飘飞-2:http://yooyijin.go.51.net/001/heart002.swf
爱心许愿瓶:http://home.atie.cn/upload/pic/1112097323.swf
贴了OK绑的爱心:http://yooyijin.go.51.net/001/heart003.swf
爱心信使:http://yooyijin.go.51.net/001/heart004.swf
爱心信纸:http://yooyijin.go.51.net/001/heart005.swf
爱心冒出来:http://yooyijin.go.51.net/001/heart006.swf
很多爱心:http://yooyijin.go.51.net/001/001heart_star.swf
透明大爱心:http://yooyijin.go.51.net/001/heart007.swf
爱心草:http://yooyijin.go.51.net/001/heart008.swf
吹笛子的男孩:http://yooyijin.go.51.net/001/boy001.swf
弹吉他的男孩:http://yooyijin.go.51.net/001/007boy.swf
泡泡浴:http://yooyijin.go.51.net/001/paopaoyu.swf
捧花的小女孩:http://yooyijin.go.51.net/001/gril001.swf
蓝天白云:http://love.xaonline.com/upload/2004114/UF2004114205849.swf
群鸟飞翔:http://yr2004.51.net/flash/feiniao.swf
灯光下的花朵-1:http://kiriyume.pekori.to/bbsother/snowshower11.swf
灯光下的花朵-2:http://kiriyume.pekori.to/bbsother/sikuramen2.swf
烛光:http://love.xaonline.com/upload/2004114/UF2004114205530.swf
彩团:http://love.xaonline.com/upload/2004114/UF200411420530.swf
风和日丽:http://love.xaonline.com/upload/2004114/UF2004114205423.swf
粒状火焰:http://love.xaonline.com/upload/2004114/UF200411420578.swf
烈火:http://love.xaonline.com/upload/2004114/UF2004114205612.swf
落雨滂沱:http://love.xaonline.com/upload/2004114/UF20041142123.swf
很多蜻蜓:http://love.xaonline.com/upload/2004114/UF200411420833.swf
两只蝴蝶:http://love.xaonline.com/upload/2004114/UF200411415025.swf
涟漪:http://love.xaonline.com/upload/2004114/UF2004114205023.swf
爱心:http://love.xaonline.com/upload/2004114/UF2004114205148.swf
日光下的海水:http://love.xaonline.com/upload/2004114/UF200411421249.swf
只有在黑色背景下才能看到:http://love.xaonline.com/upload/2004114/UF2004114201534.swf
烟花-1:http://bbs.flasher123.com/Upload ... 492417253374840.swf
烟花-2http://bbs.flasher123.com/UploadFile/2004-5/20045915485951073.swf
星光:http://bbs.flasher123.com/UploadFile/2004-5/20045912435828355.swf
月光下的城市:http://www.nice.or.jp/~mosmos/free/f101.swf
在窗前:http://www.nice.or.jp/~mosmos/free/f102.swf
妈妈:http://www.nice.or.jp/~mosmos/free/f103.swf
女学生:http://www.nice.or.jp/~mosmos/free/f104.swf
摇曳花朵:http://www.nice.or.jp/~mosmos/free/f105.swf
女仆-1:http://www.nice.or.jp/~mosmos/free/f106.swf
女仆-2:http://www.nice.or.jp/~mosmos/free/f107.swf
小仙子:http://www.nice.or.jp/~mosmos/free/f108.swf
小女孩-1:http ://www.nice.or.jp/~mosmos/free/f109.swf
小女孩-2:http://www.nic e.or.jp/~mosmos/free/f110.swf
小女孩-3:http://www.nice.or.jp/~mosmos/free/f111.swf
花朵-1:http://forshine.net/flash/1031_1.swf
花朵-2:http://forshine.net/flash/1031_2.swf
流星:http://forshine.net/flash/1031_4.swf
音符:http://forshine.net/flash/1031_8.swf
水泡泡:http://forshine.net/flash/1031_9.swf
发散:http://forshine.net/flash/1031_11.swf
落花:http://forshine.net/flash/1031_14.swf
飞鸟:http://forshine.net/flash/1031_15.swf
 
同一网页在线聊天交流
代码1:
<SCRIPT src="http://say-on.com/webchat/embed_webchat.js" id="WebChatScript" website="hujiangwei.16789.net" bgColor="#009900"  winTitle="[[小呼空间]]——在线交谈"  minText="与同时访问小站的网友交谈"  position="right:0px;bottom:0px"  bOpen="false" bPreview="true"  bStatic="true"  type=text/></SCRIPT>
代码2:
新浪提供“网页在线聊天”代码:
提示:在个人网页中加入如下一段代码,你将有机会和访问你网站的朋友进行交流、聊天,真正实现网站内的有认识和不认识的朋友之间的交友!呵呵,很好的东东吧,快试一下吧!

<script src="http://woocall.sina.com.cn/rls/stable.js" type="text/javascript"></script>

 

本文转自清逸成风博客:http://www.chenzongyong.cn