1. Control the visibility of horizontal and vertical scroll bars?
<body style="overflow-y:hidden"> Remove the x-axis
<body style="overflow-x:hidden"> Remove the y-axis
<body scroll="no">Do not display
---------------------------------------- ----------------------------------------
2. Form discoloration
<TD onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand">
-------------------------------------------------- ----------------------------------
3. Prohibit copying, drag the mouse to select
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>
-------------------------------------------------- ----------------------------------
4. Ordinary iframe page
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>
----------- -------------------------------------------------- -------------------
5.iframe adaptive height
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style .height=pindex.document.body.scrollHeight" ></iframe>
-------------------------------------------------- ----------------------------------
6. Change the IE address bar to your own icon & your icon can be displayed in your favorites
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
-------------------------------------------------- ----------------------------------
7. Font size scaling More and more people spend a lot of time surfing the Internet, and the popularity of glasses is also getting higher and higher. Make the text larger so that more users can see it more clearly.
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">Text of specified size</span>
<a href="javascript:doZoom(16)">Large</a> <a href="javascript:doZoom(14)">Medium</a> <a href="javascript:doZoom(12)">Small </a>
-------------------------------------------------- ----------------------------------
8. Simple jump web page code. If you want the page to jump after displaying for 3 seconds, you can add this code to the <head></head> part of the html code:
<meta http-equiv="refresh" content="3; url=http://www.devdao.com">
-------------------------------------------------- ----------------------------------
9. The embedded address filled in with iframe (embedded frame) adaptive height must be on the same site as this page, otherwise it will prompt "Access Denied!". There are permission issues with cross-domain references, please check other information.
<iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no onload="document.all['guestbook'].style.height= guestbook.document.body.scrollHeight"></iframe>
-------------------------------------------------- ----------------------------------
10. Jump menu new window
<select name="select" onchange="window.open(this.options[this.selectedIndex].value)">
<option value=" http://www.microsoft.com/ie ">Internet Explorer</option>
<option value=" http://www.microsoft.com "> Microsoft Home</option>
<option value=" http://msdn.microsoft.com "> Developer Network</option>
</select>
-------------------------------------------------- ----------------------------------
11.flash transparency option
<param name="wmode" value="transparent">
-------------------------------------------------- -------------------------------
12. Add to favorites and set as homepage
<a href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.devdao.com');">Set as homepage</a>
<a href="javascript:window.external.AddFavorite('http://www.devdao.com/','Webmaster Design Network')">Favorite this site</a>
-------------------------------------------------- ----------------------------------
13. Record and display the last modification time of the web page
<script language=JavaScript>
document.write("Last updated time: " + document.lastModified + "")
</script>
-------------------------------------------------- ----------------------------------
14. Holiday Countdown
<Script Language="JavaScript">
var timedate= new Date("October 1,2002");
var times= "National Day";
var now = new Date();
var date = timedate.getTime() - now.getTime();
var time = Math.floor(date / (1000 * 60 * 60 * 24));
if (time >= 0)
document.write("Now there are: "+time +"days" from "+times+")
</Script>
-------------------------------------------------- ----------------------------------
15. Add to HEAD to disable caching
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
---------------------------------- --------------------------------------------------
16. Make the background of the document within the IFRAME frame transparent
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>
-------------------------------------------------- ----------------------------------
17. Maximize the window when it is opened
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
-------------------------------------------------- ----------------------------------
18. Add background music
<bgsound src="mid/windblue[1].mid" loop="-1"> only applies to IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> Applicable to both Netscape and IE
-------------------------------------------------- ----------------------------------
19.Scroll
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>Scroll information
</marquee>
-------------------------------------------------- ----------------------------------
20. Prevent the page from being reset to the code "javascript:void(null)" at the top of the page instead of the original "#" mark when clicking on an empty link.
-------------------------------------------------- --------------------------
21. Text or pictures pop up a window of a specified size and added to the body
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
</script>
pop up code
<a href="#" target="_self" onClick="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border=" 0">Picture or text</a>
-------------------------------------------------- ----------------------------------
22.Jump page code
<meta http-equiv="refresh" content="5;url=http://www.devdao.com">
-------------------------------------------------- ----------------------------------
23. Thin Line Dividers
<hr noshade size=0 color=#C0C0C0>
-------------------------------------------------- ----------------------------------
24. Automatic line wrapping in web pages
<td style="word-break:break-all">That's it.
complete is
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
-------------------------------------------------- ----------------------------------
25. Eliminate the image toolbar that automatically appears in ie6 and set the GALLERYIMG attribute to false or no.
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
-------------------------------------------------- ----------------------------------
26. Prohibit page body content from being selected
<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()">
---------------------------------------- --------------------------------------------------
27. You cannot right-click, CTRL+A is not required, and you cannot copy!
<body oncontextmenu="window.event.returnValue=false"
onkeypress="window.event.returnValue=false"
onkeydown="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
-------------------------------------------------- ----------------------------------
28.IE browser supports a Body property bgproperties, which can prevent the background from scrolling:
<Body Background="Image file" bgproperties="fixed">
-------------------------------------------------- ----------------------------------
29. Randomly change the background image (a special effect that can refresh your mood)
<Script Language="JavaScript">
image = new Array(4); //Define image as an array of picture numbers image [0] = 'tu0.gif' //The path of the background image image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("<BODY BACKGROUND="+image[number]+">");
</Script>
----------------------------------------------- ----------------------------------
30. Image form button
<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" onclick="document.form1.submit()" />
</form>
-------------------------------------------------- ----------------------------------
31. CSS definition method of left and right shadow backgrounds
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}
-------------------------------------------------- ----------------------------------
32. Cross the link hand mouse
style="cursor:hand"
-------------------------------------------------- ----------------------------------
33. How to turn off layers
<div id="Layer1"></div>
<a href="#" onClick="Layer1.style.display='none'">Close layer</a>
-------------------------------------------------- ----------------------------------
34. Script to close window
<a href=javascript:close()>[Close window]</a>
-------------------------------------------------- ----------------------------------
35. If the text is too long, the overly long part will be displayed as ellipses.
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>For example, there is a line of text that is so long that it cannot be displayed in one line in the table.</NOBR>
</DIV>
-------------------------------------------------- ----------------------------------
36. Automatically maximize after entering the homepage
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
-------------------------------------------------- ----------------------------------
37. Debossed text
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:# eeeeee;">
<font disabled>
How about it, am I dented? <br>
Don't you want to try it? <br>
<a href=" http://www.devdao.com/">www.devdao.com</a></font >
</div>
-------------------------------------------------- ----------------------------------
38. Run code box
<script>
functionPreview()
{var TestWin=open('');
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >Run</button>
-------------------------------------------------- -------------------------------
38. Link the form
<table width="100%" onclick="window.open('http://www.devdao.com/', '_blank')" style="CURSOR:hand">
<tr>
<td height="100" bgcolor="f4f4f4"> </td>
</tr>
</table>
-------------------------------------------------- ----------------------------------
39. Make pop-ups always on top
<body onblur="this.focus();">
-------------------------------------------------- ----------------------------------
40.CSS text shadow
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}
-------------------------------------------------- ----------------------------------
41. Back & close the window and go back: javascript:history.back(1)
Close: javascript:window.close();
-------------------------------------------------- ----------------------------------
42. The form is transparent
style="FILTER: alpha(opacity=72)"
-------------------------------------------------- ----------------------------------
43. How to prevent others from putting your web page in a frame
<script language="javascript"><!--if (self!=top){top.location=self.location;} -->< /script>
-------------------------------------------------- ----------------------------------
44.The difference between Alt and Title
alt is used to give hints to pictures. Title is used to give link text or ordinary text hints.
<a href="#" Title="Give link text hint">Text</a>
<p Title="Text hint for link">Text</p>
<img src="Picture link" alt="Tips for picture">
------------------ -------------------------------------------------- ----------
45. Try to use external calls for all javascript calls.
<SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT>
-------------------------------------------------- ----------------------------------
46. Link to
response.redirect"login.asp"
location.href="xx.asp"
onClick="window.location='login.asp'"
onClick="window.open('')"
--------------------------------------------- ----------------------------------------
47. Basic link styles
a:link represents the style of the link
a:active represents the style of the current active connection
a:hover represents the style when the mouse passes over it
a:visited represents the style of the visited link
"link-visited-hover-active", abbreviated as "lvha", that is, "love"+"hate"
---------------- -------------------------------------------------- ---------------
48. Set styles with different text link effects on the same page
<style type="text/css">
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
</style>
<a href="#" class="green">Text</a>
-------------------------------- --------------------------------------------------------
49. Drop-down jump menu
<select name=select onchange="javascript:window.open(this.options[this.selectedIndex].value)"style="color:#333">
<option>----Please select----</option>
<option value=" http://www.devdao.com ">Webmaster Design Network</option>
<option value=" http://www.fontchina.cn/">Font</option >
</select>
-------------------------------------------------- ----------------------------------
50. Select the solution to blocking the div. Add the following code to the div and adjust it as needed.
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;" >
</iframe>
----------------------------------------------- ----------------------------------
51. All links on the entire page are _blank. New window opens
<base target="_blank">