网页设计当中的常用标签

本文详细列举了网页设计中的一些实用技巧,包括处理单元格溢出、设置弹出窗口、去除图片边框、电子邮件表单处理、页面大小设定、背景图片固定、光标样式定制、JavaScript交互等。此外,还介绍了如何处理滚动条颜色、图片抖动效果、全屏播放Flash、创建邮票效果、弹出窗口的控制以及CSS和JavaScript在设计中的应用,如文字链接效果、文字阴影和描边、下拉菜单颜色、显示更新日期、滚动条位置、图片关闭按钮、禁止右键查看源代码、查看源代码按钮、嵌入网页、闪烁按钮、线条绘制、鼠标拖动层大小调整等,展示了网页设计的丰富性和多样性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、如内容超出单元格,则隐藏:

style="TABLE-LAYOUT: fixed"

2、让弹出窗口总是在最上面:

<body onblur="this.focus();">

3、不要滚动条,让竖条没有:

<body style='overflow:scroll;overflow-y:hidden'>

    让横条没有:

 <body style='overflow:scroll;overflow-x:hidden'> 
    两个都去掉:

 <body scroll="no">

4、去掉图片链接点击后,图片周围的虚线 :

<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0>

5、电子邮件处理提交表单:

<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"> <input type=submit> </form>

6、在打开的子窗口刷新父窗口:

 window.opener.locat ion.reload()

7、设定打开页面的大小:

 <body onload="top.resizeTo(300,200);">

8、在页面中加入不是满铺的背景图片,拉动页面时背景图不动:

 <html><head> <STYLE> body {background-image:url(logo.gif); background-repeat:no-repeat; background-position:center } </STYLE> </head> <body bgproperties="fixed" > </body> </html>

9、各种样式的光标:

   auto :标准光标

   default :标准箭头

   hand :手形光标

   wait :等待光标

   text :I形光标

   vertical-text :水平I形光标

   no-drop :不可拖动光标

   not-allowed :无效光标

   help :?帮助光标

   all-scroll :三角方向标

   move :移动标

   crosshair :十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize

   定义全局鼠标:body{cursor: url(cur.ani或cur);}

   示例:

<span style="cursor:auto">Auto</span>

10、

本机ip<%=request.servervariables("remote_addr")%>

服务器名<%=Request.ServerVariables("SERVER_NAME")%>

服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>

服务器端口<%=Request.ServerVariables("SERVER_PORT")%>

服务器时间<%=now%> IIS

版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>

脚本超时时间<%=Server.ScriptTimeout%>

本文件路径<%=server.mappath(Request.ServerVaria  bles("SCRIPT_NAME"))%>

服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSOR S")%>

服务器解译引擎<%=ScriptEngine & "/"& ScriptEngineMajorVe  rsion &"."&ScriptEngineMinorVe  rsion&"."& ScriptEngineBuildVe  rsion %>

服务器操作系统<%=Request.ServerVariables("OS")%>


11、文本竖排方式
<style type="text/css">
.shupai {Writing-mode:tb-rl}
</style>

12、超链接去虚线边框

在链接中加上onfocus="this.blur()"

13、网页搜索关键字 头里插入
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
14、收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
15、鼠标控制图片隐现效果:
<SCRIPT language="javascript">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.o pacity=100
else
cur.filters.alpha.o pacity=20
}
</SCRIPT>
<img src="2.gif" style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)"
onMouseOut="makevisible(this,1)">
16、禁止图片下载
<A HREF="javascript:void(0)" onMouseover="alert('对不起,此图片不能下载!')">
<IMG SRC="2.gif" Align="center" Border="0" width="99" height="50">[/url]
17、页嵌页
<iframe width=291 height=247 src="main.files/news.htm" frameBorder=0></iframe>


18、CSS文字阴影(定义在<TD>中)
.abc{
FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;
}

19、跳转:
<meta http-equiv=refresh content='0; url=/distributor/distributor.aspx'>

20、 溢出栏的设制:
visible:超出的部分照样显示;
hidden:超出的部分隐藏;
scrool:不管有否超出,都显示滚动条;
auto:有超出时才出现滚动条;


21、Javascript鼠标动作:

   onMouseOver:鼠标移到目标上;
   onMouseUp:按下鼠标再放开左键时;
   onMouseOut:鼠标移开时;
   onMouseDown:按下鼠标时(不需要放开左键);
   onClink:点击时;
   onDblClick:双击时;
   onLoad:载入网页时;
   onUnload:离开页面时;
   onResize:当浏览者改变浏览窗口的大小时;
   onScroll:当浏览者拖动滚动条的时。

22、CSS链接样式:
a:link:表示已经链接;
a:hover:表示鼠标移上链接时;
a:active:表示链接激活时;
a:visited:表示己点击过的链接。

23、Javascript操作:

javascript:alert('lajflsjpjwg')  跳出对话框链接
javascript:history.back(1)  后退
javascript:window.close();  关闭窗口

function restore(){
window.moveTo(8,8);
window.resizeTo(screen.width-24,screen.availHeight-24);
}  窗口还原

24、head区域标签说明
A①网页显示字符集
简体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
A②网页制作者信息
<META name="author" content=" webmaster@maketown.com">
A③网站简介
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxx  xxxxxxx">
A④搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
A⑤网页标题
<title>xxxxxxxxxxxxxxxxxx</title>
A⑥设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
A⑦.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
A⑧用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
A⑨自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 5指时间停留5秒。
B①网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
B②收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">

25、flash透明:
在flash的源代码中加上:<param name="wmode" value="transparent">

26、表格透明:
style="FILTER: alpha(opacity=72)"

27、状态栏连接说明:
<A HREF="链接到某处" onmouseOver="window.status='连接说明';return true;" onMouseOut="window.status=' ';">某某链接[/url]

28、链接说明:
<a href=“”Title=链接说明>

29、禁止鼠标右键:
在<body>标签中加入 <body oncontextmenu="return false">

30、添加水平线:
<hr width="长度" size="高度" color="颜色代码" noshade> noshade为有无阴影

31、表单电子邮件提交:
< form name="content" method="post" action="mailto:电子邮箱" >< /form>
文本域名为Subject 为邮件的标题

32、邮件链接定制:
Mailto:地址 ? Subject=邮件的标题 &bc=抄送 &bcc=密件抄送

33、背景音乐:
<bgsound src=地址 loop="-1">

34、禁止页面正文选取:
<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()">

35、消除ie6自动出现的图像工具栏:

设置 GALLERYIMG属性为false或no .

<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">


36、防止点击空链接时,页面往往重置到页首端:
   代码“javascript:void(null)”代替原来的“#”标记


37、页面定时刷新:
<meta http-equiv="Refresh" content="秒" >

38、页面定时转向新的地址:
<meta http-equiv="refresh" content="秒;URL=url">

39、显示日期:
<script language="javascript">
today=new Date();
var week; var date;
if(today.getDay()==0) week="星期日"
if(today.getDay()==1) week="星期一"
if(today.getDay()==2) week="星期二"
if(today.getDay()==3) week="星期三"
if(today.getDay()==4) week="星期四"
if(today.getDay()==5) week="星期五"
if(today.getDay()==6) week="星期六"
date=(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+" "
document.write("<span style='font-size: 9pt;'>"+date+week+"</span>");
</script>

40、设为首页:
<A href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('url');">设为首页[/url]

41、添加收藏:
<A href="javascript:window.external.Add  Favorite('url','title')">收藏本站[/url]

42、文字滚动:
插入边框为0的1行1列的表格,在表格中输入文字,选中文字,
按ctrl+t输入marquee direction="up", 回车即可让文字在表格区域内向上滚动。
(right、down可用于让文字或图象向右及向下滚动,修改html原代码还可以得到需要的滚动速度。

43、表单验证:
<SCRIPT language=javascript>
function checkform(theform){
if(theform.name.value==""){
alert("姓名不能为空!");
theform.name.focus();
return false;
}
if(theform.tel.value==""){
alert("电话不能为空!");
theform.tel.focus();
return false;
}
}

</SCRIPT>


44、以图片方式插视频:
<IMG height=240 loop=infinite dynsrc=http://amedia.efu.com.cn/EFUADD0001.rmvb width=320>


45、层在flash上面:
< param name="wmode" value="opaque" >
延迟跳转
<meta http-equiv=refresh content='3; url=javascript:window.close();'>


46、导航条变色::
单元格<TR后面插入onmouseover="javascript:this.bgColor='#57AE00'" onmouseout="javascript:this.bgColor='#99CCFF'"


47、滚动条颜色代码:
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;
SCROLLBAR-BASE-COLOR: #FFFFFF
}


48、连续的英文或者一堆感叹号!!!不会自动换行的问题,只要在CSS中定义了如下句子,可保网页不会再被撑开了:
table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
注释一下:
1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

49、如何给图片抖动怎做的:
〈SCRIPT language=javascript〉
var rector=2
var stopit=0
var a=1
var count=0
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElement ById)||stopit==1||count==100)
return
count++
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a〈4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
count=0
which.style.left=0
which.style.top=0
}
〈/SCRIPT〉
〈style〉.shakeimage {POSITION: relative}
〈/style〉
〈img src="图片的路径" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage〉


50、在网页中实现flash的全屏播放:
只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100%即可,当然也可以在Flash导出HTML文件的设置中进行设置,方法是:打开File菜单;选Publish Settings弹出导出设置对话框;在HTML标签下的Dimensions选项,下拉后选中Percent(百分比),并在WIDTH 和HEIGHT框中填100.就行了。

51、用CSS做邮票:
〈input type=button value=我象不象邮票? style="height:80px;border:2px dashed #cccccc"〉

52、一进入首页立刻会弹出一个窗口:
〈SCRIPT LANGUAGE="javascript"〉
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
〈/SCRIPT〉
参数解释:
window.open 弹出新窗口的命令;
`page.html` 弹出窗口的文件名;
`newwindow` 弹出窗口的名字(不是文件名),非必须,可用空``代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
〈/SCRIPT〉 js脚本结束

53、用marquee做的滚动字幕:
〈marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5〉〈/marquee〉

语法:
align=# | top | middle| bottom //对齐方式)
BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移动的方式
BGCOLOR=color//底色区域颜色
DIRECTION=DOWN | LEFT | RIGHT | UP //移动的方向
Loop=n //循环次数(默认是循环不止)
Scrolldelay=milliseconds//延时
height=# width=# //区域面积
hspace=# vspace=# //空白区域
scrollamount=# //移动的速度


54、让一张图片有浅到深的渐变:
〈SCRIPT language=javascript〉
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alph a.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha. opacity〈100)
cur2.filters.alpha. opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
〈/script〉
〈img onmouseout=low(this) onmouseover=high(this) style="FILTER: alpha(opacity=40)"src="logo.gif" 〉


55、双击鼠标左键来滚动背景,单击停止:
〈SCRIPT language=javascript〉
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",16);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrol lTop)
sc();
}
document.onmousedow n=sc
document.ondblclick=initialize
〈/SCRIPT〉


56、在同一页面设置不同文字链接效果的样式:

〈style type="text/css"〉
a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
a:link { font-size: 9pt; color: #006699; text-decoration: underline}
a:visited { font-size: 9pt; color: #006699; text-decoration: underline}
a:active { font-size: 9pt; color: #FF0000; text-decoration: none}
a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}
a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}
a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}
a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}
〈/style〉
〈body〉
〈a href="#"〉下划线链接 〈/a〉
〈a href="#" class="r1"〉双下划线链接〈/a〉
〈/BODY〉
补充说明:
a:hover 表示鼠标划过时的样式.
a:link 表示链接的样式.
a:active 表示当前活动连接的样式.
a:visited 表示已经访问过的连接的样式.


57、用CSS给文字加入阴影效果和文字描边效果:


.glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)}
//文字描边效果
.shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: "宋体"}
//加入阴影效果
补充说明:
  这两种滤镜要想实现效果,必须加在如:〈td class=glow或shadow 〉〈div〉xxxxxxxxx〈/div〉〈/td〉上
,并且要留有足够的空间能够显示阴影或描边,否则会出现半截的阴影或描边现象。


58、如何给做带颜色的下拉菜单:


〈select style="FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana;BACKGROUND-COLOR: #ff6600;" size=1 〉
〈option selected〉:: Dreamweaver4 ::〈/option〉
〈option〉::Flash5::〈/option〉
〈option〉::Firewoks4::〈/option〉
〈/select〉

59、自动显示主页最后更新日期:

〈script〉
document.write("最后更新日期:"+document.lastModified+"")
〈/script〉


60、让滚动条出现在左边:
〈html dir="rtl"〉
〈body bgcolor="#000000" text="#FFFFFF"〉
〈table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1"  cellpadding="0"〉
〈tr〉
〈td bgcolor="#FF0000" 〉是不是你的滚动条在左边啊〈/td〉
〈/tr〉
〈/table〉
〈/body〉
〈/html〉

61、用图片来关闭窗体:


〈A href="java script:window.close()"〉〈IMG height=20 width=20 alt="关闭窗口" src="close.gif" border=0〉〈/A〉
补充说明:如何使用了ACTIVEX!,不再警告窗口?
〈html〉
〈head〉
〈object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"〉
〈param name="Command" value="Close"〉〈/object〉
〈/head〉
〈body bgcolor="#003063" text="#ffffff" id=all〉 〈a href="#" onclick="closes.Click();"〉关闭窗口无提示〈/a〉
〈/body〉
〈/html〉


62、禁止鼠标右键查看网页源代码:


〈SCRIPT language=javascript〉
function click()
{if (event.button==2) {alert(`你好,欢迎光临!`) }}
document.onmousedow n=click
〈/SCRIPT〉
补充说明:
鼠标完全被封锁,可以屏蔽鼠标右键和网页文字。
〈 body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"〉


63、通过按钮来查看网页源代码:

〈input type="BUTTON" value="查看源代码" onClick= `window.location = "view-source:" + window.location.href` name="BUTTON"〉

64、利用〈IFRAME〉来给网页中插入网页:
       〈iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"〉 〈/iframe〉
  src="iframe.html"
  用来显示〈IFRAME〉中的网页来源,必要加上相对或绝对路径。
  name="test"
  这是连结标记的 target 参数所需要的。
  align="MIDDLE"
  可选值为 left, right, top, middle, bottom,作用不大 。
  width="300" height="100"
  框窗的宽及长,以 pixels 为单位。
  marginwidth="1" marginheight="1"
  该插入的文件与框边所保留的空间。
  frameborder="1"
  使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
  scrolling="Yes"
  使用 Yes 表示容许卷动(内定), No 则不容许卷动。

65、Alt和Title都是提示性语言标签:
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
用法如下:
   〈p Title="给链接文字提示"〉文字〈/p〉
   〈a href="#" Title="给链接文字提示"〉文字〈/a〉
   〈img src="图片.gif" alt="给图片提示"〉
补充知识:〈TITLE〉〈ALT〉里面如何多行换行?在源代码里Enter回车。
〈a href="#" Title="个人简历
姓名:张培
网名:我是闪梦
性别:男的,不是女的。
爱好:网页制作,软件开发"〉个人简历〈/a〉
例如:个人简历


66、 用javascript代码来实现闪烁按钮:


〈body〉
〈form method="POST" action="--WEBBOT-SELF--"〉
〈input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;BACKGROUND-COLOR: #FFFFFF"〉
〈/form〉
〈script〉
if (document.all&&document.all.flashi t)
{
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
function changecolor(which)
{
if (flashelement[which].style.color==`#800000`)
flashelement[which].style.color="#0063A4"
else
flashelement[which].style.color="#800000"
}
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i〈flashelement.length;i++)
{
var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)`
eval(tempvariable)
}
}
〈/script〉
〈/body〉

67、在网页中做出一根竖的线:

用水平条:〈hr color="red" width="1" size="100%"〉


68、关于鼠标拖动,改变层大小:
〈script〉
document.execComman d("2D-position",false,true);
〈/script〉
〈DIV contentEditable=true〉
〈DIV style="WIDTH: 300px; POSITION: absolute; HEIGHT: 100px; BACKGROUND-COLOR: red"〉移动层〈/DIV〉
〈/DIV〉


50.    过渡方式:
  <meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
  Duration的值为网页动态过渡的时间,单位为秒。
        Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
         0 盒状收缩 1 盒状放射
   2 圆形收缩 3 圆形放射
   4 由下往上 5 由上往下
      6 从左至右 7 从右至左
   8 垂直百叶窗 9 水平百叶窗
  10 水平格状百叶窗 11垂直格状百叶窗
  12 随意溶解 13从左右两端向中间展开
     14从中间向左右两端展开 15从上下两端向中间展开
  16从中间向上下两端展开 17 从右上角向左下角展开
  18 从右下角向左上角展开 19 从左上角向右下角展开
  20 从左下角向右上角展开 21 水平线状展开


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值