收集的一些常用JS代碼和CSS代碼

來源:互聯網
上載者:User

<INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存新檔 name=Button2>
<INPUT onclick=document.all.WebBrowser.ExecWB(10,1) type=button value=屬性 name=Button3>
<INPUT onclick=document.all.WebBrowser.ExecWB(6,1) type=button value=列印 name=Button>
<INPUT onclick=document.all.WebBrowser.ExecWB(8,1) type=button value=版面設定 name=Button4>
<INPUT onclick=window.location.reload() type=button value=重新整理 name=refresh>
<INPUT onclick="window.external.ImportExportFavorites(true,'');" type=button value=匯入收藏夾 name=Button5>
<INPUT onclick="window.external.ImportExportFavorites(false,'');" type=button value=匯出收藏夾 name=Button32>
<INPUT onclick="window.external.AddFavorite(location.href, document.title)" type=button value=加入收藏夾 name=Button22>
<INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夾 name=Submit2>
<INPUT onclick='window.location="view-source:" + window.location.href' type=button value=查看源檔案 name=Button7>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=語言設定 name=Button6>
<INPUT onclick="document.execCommand('Cut')" type=button value=剪下>
<INPUT onclick="document.execCommand('Copy')" type=button value=拷貝>
<INPUT onclick="document.execCommand('Paste')" type=button value=粘貼>
<INPUT onclick="document.execCommand('Undo')" type=button value=撤消>
<INPUT onclick="document.execCommand('Delete')" type=button value=刪除>
<INPUT onclick="document.execCommand('Bold')" type=button value=黑體>
<INPUT onclick="document.execCommand('Italic')" type=button value=斜體>
<INPUT onclick="document.execCommand('Underline')" type=button value=底線>
<INPUT onclick="document.execCommand('stop')" type=button value=停止>
<INPUT onclick="document.execCommand('SaveAs')" type=button value=儲存>
<INPUT onclick="document.execCommand('Saveas',false,'c://test.htm')" type=button value=另存新檔>
<INPUT onclick="document.execCommand('FontName',false,fn)" type=button value=字型>
<INPUT onclick="document.execCommand('FontSize',false,fs)" type=button value=字型大小>
<INPUT onclick="document.execCommand('refresh',false,0)" type=button value=重新整理>
<INPUT onclick=window.location.reload() type=button value=重新整理>
<INPUT onclick=history.go(1) type=button value=前進>
<INPUT onclick=history.go(-1) type=button value=後退>
<INPUT onclick=history.forward() type=button value=前進>
<INPUT onclick=history.back() type=button value=後退>
<INPUT onclick='window.external.ImportExportFavorites(true,"http://localhost";);' type=button value=匯入收藏夾>
<INPUT onclick='window.external.ImportExportFavorites(false,"http://localhost";);' type=button value=匯出收藏夾>
<INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夾>
<INPUT onclick="window.location = 'view-source:'+ window.location.href" type=button value=查看源檔案>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=語言設定>
<INPUT onclick="window.external.AddFavorite('http://www.behar.cn', 十萬個為什麼)" type=button value=加入收藏夾>
<INPUT onclick="window.external.addChannel('http://www.behar.cn')" type=button value=加入到頻道>
<INPUT onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('www.why100000.com')" type=button value=設成首頁>

HTML關閉IE的映像工具列
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 來禁用,也可以通過對 IMG 標記元素設定屬性  

解決select菜單邊框無法設定的問題

<span style="border:1px solid green; position:absolute; overflow:hidden"><select style="margin:-2px">
<option>1111</option>
<option>11111111111111</option>
<option>111111111</option>
</select></span>

1.取消按鈕按下時的虛線框
在input裡添加屬性值 hideFocus 或者 HideFocus=true
2.唯讀文字框內容
在input裡添加屬性值 readonly
3.防止退後清空的TEXT文檔(可把style內容做做為類引用)
程式碼<INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput>

4.ENTER鍵可以讓游標移到下一個輸入框
程式碼<input onkeydown="if(event.keyCode==13)event.keyCode=9" >

5.只能為中文(有閃動) 
 程式碼<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">

6.只能為數字(有閃動)
程式碼<input onkeyup="value=value.replace(/[^/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

7.只能為數字(無閃動)
程式碼<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

8.只能輸入英文和數字(有閃動)
程式碼<input onkeyup="value=value.replace(/[/W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))">

9.屏蔽IME
程式碼<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9">
10. 只能輸入 數字,小數點,減號(-) 字元(無閃動)
程式碼<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false">

11. 只能輸入兩位小數,三位小數(有閃動) 
程式碼<input maxlength=9 onkeyup="if(value.match(/^/d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(//./d*/./g,'.')" onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^/d{3}$/) || //./d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe name=text_kfxe>

盒尺寸
通常有下面四種書寫方法:

property:value1; 表示所有邊都是一個值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

邊框(border)
邊框的屬性如下:

border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句:border:1px solid #000;

文法是border:width style color;

背景(Backgrounds)
背景的屬性如下:

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

文法是background:color image repeat attachment position;

你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器預設值,預設值為:

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字型(fonts)
字型的屬性如下:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你縮寫字型定義,至少要定義font-size和font-family兩個值。

列表(lists)
取消預設的圓點和序號可以這樣寫list-style:none;,

list的屬性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為一句:list-style:square inside url(image.gif);]]>

一般用CSS設定字型屬性是這樣做的:

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它們全部寫到一行上去:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不錯!只有一點要提醒的:這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且,如果你沒有設定font-weight, font-style, 以及 font-varient ,他們會使用預設值,這點要記上。

如果想做個固定寬度的網頁並且想讓網頁水平置中的話,通常是這樣:

#content { width: 700px; margin: 0 auto }

你會使用 <div id="content"> 來圍上所有元素。這很簡單,但不夠好,IE6之前版本會顯示不出這種效果。改CSS如下:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

這會把網頁內容都置中,所以在Content中又加入了
text-align: left 。

垂直對齊用表格可以很方便地實現,設定表格單元 vertical-align: middle 就可以了。但對CSS來說這沒用。如果你想設定一個導航條是2em高,而想讓導航文字垂直置中的話,設定這個屬性是沒用的。

CSS方法是什麼呢?對了,把這些文字的行高設為 2em:line-height: 2em ,這就可以了。

9. CSS在容器內定位

CSS的一個好處是可以把一個元素任意定位,在一個容器內也可以。比如對這個容器:

#container { position: relative }

這樣容器內所有的元素都會相對定位,可以這樣用:
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30點,距上5點,可以這樣:

#navigation { position: absolute; left: 30px; top: 5px }

當然,你還可以這樣:
margin: 5px 0 0 30px
注意4個數位順序是:上、右、下、左。當然,有時候定位的方法而不是邊距的方法更好些。

10. 直通到螢幕底部的背景色

在垂直方向是進行控制是CSS所不能的。如果你想讓導覽列和內容欄一樣直通到頁面底部,用表格是很方便的,但如果只用這樣的CSS:

#navigation { background: blue; width: 150px }

較短的導航條是不會直通到底部的,半路內容結束時它就結束了。該怎麼辦呢?

不幸的是,只能採用欺騙的手段了,給這較短的一欄加上個背景圖,寬度和欄寬一樣,並讓它的顏色和設定的背景色一樣。

body { background: url(blue-image.gif) 0 0 repeat-y }

此時不能用em做單位,因為那樣的話,一旦讀者改變了字型大小,這個花招就會露餡,只能使用px

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.