分享

一些常用网页制作代码收集汇总

 爲妳╭ァ絕筆 2009-03-18
一些常用网页制作代码收集汇总
2008-01-02 16:42

001.如何控制横向和纵向滚动条的显隐
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显


002.加入注释的格式是:  
〈!-[注释内容…]--〉

003.怎样在网页中加入 E-mail 链接并显示预定的主题

〈A href="mailto:e3i5@e3i5.net?subject=主题"〉……〈/a〉

004.定义本网页关键字,可以在〈Head〉〈/Head〉中加入如下代码:  
〈meta name="Keywords" content="山水天下"〉
Content 中所包含的就是关键字,你可以自行设置。
这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如:
〈meta name="Keywords" content="山水天下"〉


005.添加到收藏夹
〈a href="java script:window.external.addFavorite(http://www.,'http://www.);"〉添加到收藏夹〈/a〉

006.设为首页
〈a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.);〉设为首页〈/a〉

007.定制浏览器地址栏前的小图标
A:在网页的〈head〉〈/head〉间加入以下语句:
〈link rel="shortcuticon" href="http://…/icon.ico"〉
即可。其中 icon.ico 为 16x16 的图标文件,颜色不要超过 16 色。


008.表格的分隔线可以隐藏
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线


009.
表格的边框不断在闪

以下方法可以令表格的边框不断在闪,很实用的

在BODY区加上

<table border="0" width="280" id="myexample"
style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<script language="javascript1.2">

<!--

function fla****(){

if (!document.all)

return

if (myexample.style.borderColor=="yellow")

myexample.style.borderColor="lime"

else

myexample.style.borderColor="yellow"

}

setInterval("fla****()", 500)

//-->

</script>


010.普通表格

<table border="1" width="220" style="position: absolute; left:
11; top: 11" height="26" >

<tr>

<td width="100%">普通表格</td>

</tr>

</table>

012.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"
bordercolordark="#000000" style="position: absolute; left: 10; top:
49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>


013.
细表格

<table border="0" frame=vsides width="219"
bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="position: absolute; left: 11; top: 86">

<tr bgcolor="#FFFFFF">

<td width="100%" height="2">细表格</td>

</tr>

</table>

014.立体表格

<table border="1" width="220" bordercolorlight="#ffffff"
bordercolordark="#ffffff" style="position: absolute; left: 10; top:
112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

</tr>

</table>


015.无名表格

<table width="220" align="center" style="position: absolute;
left: 246; top: 12" height="51">

<tr>

<td><fieldset style="width:220" align="center">
<legend> 无名表格 </legend>  <p align="right"> </fieldset>
<br>

</td>

</tr>

</table>

016.表中表效果Ⅱ

<table width="220" align="center" style="position:
absolute; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220"
align="center"> <legend> 表中表效果Ⅱ </legend> <table
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff"
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table>

018表中表效果Ⅰ

<table width="220" align="center" style="position: absolute;
left: 10; top: 120" height="138" cellspacing="1"
cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;
border-style: groove" align="center"> <legend style="color:
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
</legend>  <p align="right"> </fieldset>

</td>

</tr>

</table>


019.表格中边框的显示


只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>


020.
将彻底屏蔽鼠标右键,无右键菜单

<body oncontextmenu="window.event.returnvalue=false">

也可以用于网页中Table框架中

<table border oncontextmenu=return(false)><td>no</table>

021.
取消选取、防止复制

<body onselectstart="return false">

022.
不准粘贴
<body onpaste="return false">

023.
防止复制
<body oncopy="return false;" oncut="return false;">

024.IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">
说明:关于favicon.ico文件的制作。你可以先在FW中做一个图片,属于你自己站点一个小图标。然后在ACD see将文件属性改为*.ico,然后将你做的*.ICO文件传到你的服务器目录中,然后就可以使用以上代码来实现,当别人登陆你的站点时,地址栏里使用的就是你自定义的图标了。很PP哦。

025.可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">
说明:制作方法和上面的一样。只是显示的方式不同,这个是在别人收藏你的网页地址时显示的个性图标。也很PP.

026
关闭输入法
<input style="ime-mode:disabled">
说明:这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

027.
永远都会带着框架
<script language="javascript"><!--
 if (window == top)top.location.href = "frames.htm";// --></script>
说明:frames.htm为你的网页,这也是保护页面的一种方法

028.
防止被人frame
<SCRIPT LANGUAGE=javascript><!--
 if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

029.网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>
说明:<noscirpt>的用法很广,其中一条就是可以使JS广告失效。

030.
查源文件
<input type=button value=查看网页源代码
onclick="window.location = 'view-source:'+ http://www./index.htm';"> 

031.
COOKIE脚本记录,有很大的用处哦
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = documents.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
documents.cookie="popped=yes"
}
}
说明:以上是JS代码,请自己加起始符和结束符 

032.
内框架<IFRAME>使用
Iframe标记的使用格式是:  
<iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"
name="main"></iframe>
src:文件的路径,既可是HTML文件,也可以是文本、ASP等;   width、height:"内部框架"区域的宽与高;  
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;  FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0。
name:框架的名字,用来进行识别。
比如:  当你想用父框架控制内部框架时,可以使用: target="框架的名字"来控制。
例子:<iframe name="mm" src="http://www.";;; width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe> 

033.
自动跳转
在源代码中的<head>…</head>加入如下代码:
<meta http-equiv="refresh"content="3;URL=http://www.; charset=gb2312">
说明:content="3 表示3秒刷新到URL

034.如何改变链接的鼠标形状
只需在链接上加上这一代码就行的了
或者跟上面的用CSS写也行
style="cursor:hand"       style="cursor:crosshair"
style="cursor:text"       style="cursor:wait"
style="cursor:move"       style="cursor:help"
style="cursor:e-resize"     style="cursor:n-resize"
style="cursor:nw-resize"     style="cursor:w-resize"
style="cursor:s-resize"     style="cursor:se-resize"
style="cursor:sw-resize"
以上代码你只需要加到连接或是页面的style区里就可以实现鼠标多样化。 

035.
全屏显示
<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'big', 'fullscreen=yes')">
</div>
</form>
把它放到<body>区中。


036.
这里是加入收藏夹的代码
<a href="#" onClick="window.external.addFavorite(http://www.';.'-=E代时光=-')" target="_self" title="-=E代时光=-">加入收藏夹</a> 

037.
flash图片效果
以下代码加入<head>区域
<SCRIPT language="javascript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
以下代码加入<body>区域
<img src="http://www./images/logo.gif";;; style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)" width="63" height="56"> //图片地址请自己改


038.
背景图片滚动
<body scroll="no" background="images/bg.jpg" link="#00FF00" alink="#FF0000" vlink="#00FF00" bgcolor="#000080" topmargin="8">
<script language="javascript">
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;}
var ScrollTimer = window.setInterval("scrollBG(410)", 20)
</script>

039.滚动特效
<marquee onMouseOver="this.stop()" onMouseOut="this.start()" scrollamount="2" scrolldelay="0" direction="up" width="330" height="120" border="0" align="center" id="MARQUEE1">
欢迎光临山水天下
我们地址http://www.
</marquee>
 

040.
让背景图不滚动

IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动:
〈Body Background="图片文件" bgproperties="fixed"〉

041.
让你的网页无法另存为

<noscript><iframe src=*></iframe></noscript>

042.
让IFRAME框架内的文档的背景透明

<iframe src="about :<body style='background:transparent'>" allowtransparency></iframe>

043.禁止右键:

<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">

044.进入页面后立即自动刷新
<meta http-equiv="refresh" content="120;url=http://www.">
http://www.,这是你自己的网址。


045.隐藏IFRAME的滚动条三种方法:

1. 设置iframe scrolling="no"
2. 被包含页body应用overflow:hidden
3. 被包含页的body标签加scroll="no"

046.加入背景音乐
<bgsound src="mid/min1.mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用

047.
滚动
<MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4></marquee>

048.
细线分隔线
<hr noshade size=0 color=#C0C0C0>

 

下面是一些js的常用代码!

如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要让你挨着看的话,你就准备看完就去配眼镜!!

    • 事件源对象
      event.srcElement.tagName
      event.srcElement.type
    • 捕获释放
      event.srcElement.setCapture();
      event.srcElement.releaseCapture();
    • 事件按键
      event.keyCode
      event.shiftKey
      event.altKey
      event.ctrlKey
    • 事件返回值
      event.returnValue
    • 鼠标位置
      event.x
      event.y
    • 窗体活动元素
      document.activeElement
    • 绑定事件
      document.captureEvents(Event.KEYDOWN);
    • 访问窗体元素
      document.all("txt").focus();
      document.all("txt").select();
    • 窗体命令
      document.execCommand
    • 窗体COOKIE
      document.cookie
    • 菜单事件
      document.oncontextmenu
    • 创建元素
      document.createElement("SPAN");
    • 根据鼠标获得元素:
      document.elementFromPoint(event.x,event.y).tagName=="TD
      document.elementFromPoint(event.x,event.y).appendChild(ms)
    • 窗体图片
      document.images[索引]
    • 窗体事件绑定
      document.onmousedown=scrollwindow;
    • 元素
      document.窗体.elements[索引]
    • 对象绑定事件
      document.all.xxx.detachEvent('onclick',a);
    • 插件数目
      navigator.plugins
    • 取变量类型
      typeof($js_libpath) == "undefined"
    • 下拉框
      下拉框.options[索引]
      下拉框.options.length
    • 查找对象
      document.getElementsByName("r1");
      document.getElementById(id);
    • 定时
      timer=setInterval('scrollwindow()',delay);
      clearInterval(timer);
    • UNCODE编码
      escape() ,unescape
    • 父对象
      obj.parentElement(dhtml)
      obj.parentNode(dom)
    • 交换表的行
      TableID.moveRow(2,1)
    • 替换CSS
      document.all.csss.href = "a.css";
    • 并排显示
      display:inline
    • 隐藏焦点
      hidefocus=true
    • 根据宽度换行
      style="word-break:break-all"
    • 自动刷新
      <meta HTTP-EQUIV="refresh" CONTENT="8;URL=http://c98.yeah.net">
    • 简单邮件
      <a href="
      mailto:aaa@bbb.com?subject=ccc&body=xxxyyy">
    • 快速转到位置
      obj.scrollIntoView(true)

    • <a name="first">
      <a href="#first">anchors</a>
    • 网页传递参数
      location.search();
    • 可编辑
      obj.contenteditable=true
    • 执行菜单命令
      obj.execCommand
    • 双字节字符
      /[^\x00-\xff]/
      汉字
      /[\u4e00-\u9fa5]/
    • 让英文字符串超出表格宽度自动换行
      word-wrap: break-word; word-break: break-all;
    • 透明背景
      <IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe>
    • 获得style内容
      obj.style.cssText
    • HTML标签
      document.documentElement.innerHTML
    • 第一个style标签
      document.styleSheets[0]
    • style标签里的第一个样式
      document.styleSheets[0].rules[0]
    • 防止点击空链接时,页面往往重置到页首端。
      <a href="javascript:function()">word</a>
    • 上一网页源
      asp:
      request.servervariables("HTTP_REFERER")
      javascript:
      document.referrer
    • 释放内存
      CollectGarbage();
    • 禁止右键
      document.oncontextmenu = function() { return false;}
    • 禁止保存
      <noscript><iframe src="*.htm"></iframe></noscript>
    • 禁止选取<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()>
    • 禁止粘贴
      <input type=text onpaste="return false">
    • 地址栏图标
      <link rel="Shortcut Icon" href="favicon.ico">
      favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
    • 收藏栏图标
      <link rel="Bookmark" href="favicon.ico">
    • 查看源码
      <input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">
    • 关闭输入法
      <input style="ime-mode:disabled">
    • 自动全选
      <input type=text name=text1 value="123" onfocus="this.select()">
    • ENTER键可以让光标移到下一个输入框
      <input onkeydown="if(event.keyCode==13)event.keyCode=9">
    • 文本框的默认值
      <input type=text value="123" onfocus="alert(this.defaultValue)">
    • title换行
      obj.title = "123 sdfs "
    • 获得时间所代表的微秒
      var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime()
    • 窗口是否关闭
      win.closed
    • checkbox扁平
      <input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br>
    • 获取选中内容
      document.selection.createRange().duplicate().text
    • 自动完成功能
      <input type=text autocomplete=on>打开该功能
      <input type=text autocomplete=off>关闭该功能   
    • 窗口最大化
      <body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)">
    • 无关闭按钮IE
      window.open("aa.htm", "meizz", "fullscreen=7");
    • 统一编码/解码
      alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))
      encodeURIComponent对":"、"/"、";" 和 "?"也编码
    • 表格行指示
      <tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'">

单击返回

<a href=javascript:history.back()><span style="text-decoration: none">返回</span></a>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多