1, implicit and explicit control lateral vertical scrollbar?
<Body style = "overflow-y: hidden"> remove the x-axis
<Body style = "overflow-x: hidden"> removed y-axis
<Body scroll = "no"> not significant
2, table color
<TD onmouseover=”this.style.backgroundColor=’#FFFFFF’”
onmouseout=”this.style.backgroundColor=””
style=”CURSOR: hand”>
3 is prohibited to copy, 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 highly adaptive
<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, replaced by his former IE icon in the address bar & can show you an icon in Favorites
<link rel=”Shortcut Icon” href=”favicon.ico”>
<link rel=”Bookmark” href=”favicon.ico”>
7, size scaling
More and more people long bubble net, glasses penetration rate is getting higher and higher, to make text big point, so that more users to see more clearly.
<script type=”text/javascript”>
function doZoom(size)
{document.getElementById(‘zoom’).style.fontSize=size+’px’;}
</script>
<Span id = "zoom"> specify the size of the text </ span>
<a href=”javascript:doZoom(16)”>大</a> <a href=”javascript:doZoom(14)”>中</a> <a href=”javascript:doZoom(12)”>小</a>
8, select the blocking solution div
Add the following code in the div, according to need to adjust it.
<iframe src=”javascript:false” scrolling=”no” frameborder=”0″ style=”z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;”>
</iframe>
9, iframe (embedded frame) highly adaptive
Be sure to fill in the address and embedding this page on the same site, otherwise it will prompt "Access denied!." There are references to cross-domain privilege issues, please refer to 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 transparent option
<param name=”wmode” value=”transparent”>
12, Add to Favorites and Homepage
<a href=# onclick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(‘http://www.makewing.com/lanren/’);”>设为首页</a>
<a href="javascript:window.external.AddFavorite(' http://www.makewing.com/lanren/','懒人图库')"> Favorite </a>
13, record and display the last modified pages
<script language=JavaScript>
document.write ( "Last updated:" + document.lastModified + "")
</script>
14, the festival 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 ( "from now" + times + "there:" + time + "day")
</Script>
15 plus years in the HEAD
Disable caching
<meta http-equiv=”Expires” CONTENT=”0″>
<meta http-equiv=”Cache-Control” CONTENT=”no-cache”>
<meta http-equiv=”Pragma” CONTENT=”no-cache”>
16, so that a transparent background document within the framework of the IFRAME
<iframe src=”about:<body style=’background:transparent’>” allowtransparency></iframe>
17, open the window is maximized
<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 for IE
<embed src=”music.mid” autostart=”true” loop=”true” hidden=”true”> 对Netscape ,IE 都适用
19, rolling
<Marquee direction = up height = 146 onmouseout = start () onmouseover = stop () scrollAmount = 2> scroll information
</marquee>
20, when the air to prevent click the link, the page is often reset to the top end
Code "javascript: void (null)" instead of the original "#" mark
21, specify the size of the text or images pop up window
Join in the body
<script language=”JavaScript” type=”text/JavaScript”>
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
</script>
Pop-Code
<a href=”#” target=”_self” onClick=”MM_openBrWindow(‘windows01.htm’,”,’width=550,height=380′)” width=”550″ height=”380″ border=”0″>图片或文字</a>
22, flash button plus links
on (press) {
getURL(“http://www.makewing.com”,”_blank”);
}
23, page code jump
<meta http-equiv=”refresh” content=”5;url=http://www.makewing.com”>
24, the thin line dividing line
<hr noshade size=0 color=#C0C0C0>
25, pages Wrap
<Td style = "word-break: break-all"> to get.
It is complete
style=”table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word”
26, to eliminate the image toolbar ie6 appear automatically, set GALLERYIMG property to false or no.
<IMG SRC=”mypicture.jpg” HEIGHT=”100px” WIDTH=”100px” GALLERYIMG=”no”>
27, prohibiting the page text content is 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()”>
28, the point is not right, do CTRL + A, do not 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>
29, IE browser supports a Body attribute bgproperties, which allows background does not scroll:
<Body Background = "image file" bgproperties = "fixed">
30, random transformation background image (to refresh a mood effects)
<Script Language=”JavaScript”>
image = new Array (4); // number of images is defined as an array of image
image [0] = 'tu0.gif' // background image path
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>
31, flash load videos
on (release)
{
loadMovie(“1-01.swf”, “_root.loaderclip”);
}
32 pictures form buttons
<form id=”form1″ name=”form1″ method=”post” action=”">
<img src=”login.gif” width=”62″ height=”22″ onclick=”document.form1.submit()” />
</form>
33, the left and right shaded background method defined CSS
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}
34, across link hand-type mouse
style=”cursor:hand”
35, how to turn off layer
<div id=”Layer1″></div>
<a href="#" onClick="Layer1.style.display='none'"> shutdown layer </a>
36, close the script window
<a href=javascript:close()> [Close] </a>
37, if the text is too long, then the portion becomes long display ellipsis
<DIV STYLE=”width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis”>
<NOBR> For example, there is a line of text, a long, the table does not fit on one line. </ NOBR>
</DIV>
38, after entering the home page automatically maximize
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
39, sunken text
<div style=”width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; ”>
<font disabled>
How, I have sunk in, right? <br>
You do not want to try it? <br>
<a href=”http://www.lenvo.cn/”>www.lenvo.cn</a></font>
</div>
40, Operation code box
<script>
function Preview()
{var TestWin=open(”);
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>
41, to make the link table
<table width=”100%” onclick=”window.open(‘http://www.makewing.com/’, ‘_blank’)” style=”CURSOR:hand”>
<tr>
<td height=”100″ bgcolor=”f4f4f4″> </td>
</tr>
</table>
42, let the pop-up window always on top
<body onblur=”this.focus();”>
43, CSS text-shadow
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: “宋体”; FONT-SIZE: 9pt;COLOR: #ffffff;}
44, Back & Close
Back: javascript: history.back (1)
关闭：javascript:window.close();
45, transparent form
style=”FILTER: alpha(opacity=72)”
46, how to avoid other people to your website in frames
<script language=“javascript”><!–if (self!=top){top.location=self.location;} –>< /script>
47, the difference between Alt and Title
alt pictures used to prompt. Title used to link text or plain text prompts.
<a href="#" Title="给链接文字提示"> text </a>
<P Title = "text prompts to link"> text </ p>
<Img src = "image link" alt = "to the picture prompt">
48, all calls to try to take the external call javascript
<SCRIPT LANGUAGE=”javascript” SRC=”js/xxxxx.js”></SCRIPT>
49, linked to the
response.redirect”login.asp”
location.href=”xx.asp”
onClick=”window.location=’login.asp’”
onClick=”window.open(”)”
50, the basic link style
a: link represents a link style
a: active representation style of the current active connections
a: hover the mouse over the time of presentation style
a: visited presentation style has visited connected
"Link-visited-hover-active" abbreviated as "lvha" ie "love" + "hate"
51, setting text links different effects on the same page style
<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”>文字</a>
Second, to allow automatic adjustment of web width
"Responsive Web Design" in the end is how to do? In fact, not difficult.
First, the head of the page code, add the line viewport meta tag .
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport is a web default width and height, above this line means that the width of the page by default equal to the screen width (width = device-width), the original scale (initial-scale = 1) of 1.0, i.e., the page initial size accounted Screen 100% of the area.
All major browsers support this setting, including IE9. For those older browsers (mainly IE6,7,8), requires the use of CSS3-mediaqueries.js .
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Third, do not use absolute width
As the page layout will be adjusted according to the screen width, so you can not use the absolute width of the layout, you can not use elements with absolute width. This one is very important.
Specifically, CSS code does not specify the width in pixels:
width:xxx px;
You can only specify a percentage width:
width: xx%;
or
width:auto;
Fourth, the relative size of the font
Fonts can not use absolute size (px), but can only use relative size (em).
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
The above code is specified, the default font size is the page size of 100%, i.e., 16 pixels.
h1 {
font-size: 1.5em;
}
Then, the size h1 is 1.5 times the default size, i.e., 24 pixels (24/16 = 1.5).
small {
font-size: 0.875em;
}
Small element size is 0.875 times the default size, i.e., 14 pixels (14/16 = 0.875).
Fifth, the layouts flow (fluid grid)
"Fluid layout" meaning that the position of each of the blocks are floating, not fixed.
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float advantage is that, if the width is too small to fit two elements, the latter elements are automatically scrolled to the bottom of the front elements, in the horizontal direction will not overflow (overflow), to avoid the occurrence of the horizontal scroll bar.
In addition, absolute positioning (position: absolute) use, should be very careful.
Sixth, choose to load CSS
Core "RWD", is the introduction of CSS3 Media Query module.
What it means is that automatic detection width of the screen, and then load the appropriate CSS file.
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />
Code above means, if the screen width is less than 400 pixels (max-device-width: 400px), loads the file tinyScreen.css.
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />
If the width of the screen between the pixel 400 to pixel 600, is loaded smallScreen.css file.
In addition to loading CSS file with html tags, you can also load an existing CSS file.
@import url("tinyScreen.css") screen and (max-device-width: 400px);
Seven, CSS @media rule of
With a CSS file, you can also according to different screen resolutions, different applications and CSS rules.
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
Code above means, if the screen width is less than 400 pixels, the column block cancel floating (float: none), the width of automatic adjustment (width: auto), sidebar block is not displayed (display: none).
Eight pictures of adaptive (fluid image)
In addition to the layout and text, "RWD" must also realize pictures of automatic scaling .
This single line of CSS code:
img { max-width: 100%;}
This line is also effective for most video embedded in Web pages, it can be written as:
img, object { max-width: 100%;}
Older versions of IE do not support max-width, so I had to write:
img { width: 100%; }
In addition, when the windows platform scale the image, image distortion may be visible. In this case, the IE can try to use a proprietary command :
img { -ms-interpolation-mode: bicubic; }
Or, Ethan Marcotte's imgSizer.js .
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});