锘??xml version="1.0" encoding="utf-8" standalone="yes"?> 2銆佸悓涓涓殑class閫夋嫨絎﹀彲浠ュ湪涓涓枃妗d腑閲嶅鍑虹幇錛岃宨d閫夋嫨絎﹀嵈鍙兘鍑虹幇涓嬈★紱瀵逛竴涓爣絳懼悓鏃朵嬌鐢╟lass鍜宨d榪涜CSS瀹氫箟錛屽鏋滃畾涔夋湁閲嶅錛宨d閫夋嫨絎﹀仛鐨勫畾涔夋湁鏁堬紝鏄洜涓篒D鐨勬潈鍊艱姣擟LASS澶с?/p>
3銆佷竴涓吋瀹規ц皟鏁?IE鍜孧ozilla)鐨勭鍔炴硶錛?br />鍒濆鍙兘浼氱鍒拌繖鏍蜂竴涓儏鍐碉細鍚屾牱涓涓爣絳劇殑灞炴у湪IE璁劇疆鎴怉鏄劇ず鏄甯哥殑錛岃屽湪Mozilla閲屽繀欏昏璁炬垚B鎵嶈兘姝e父鏄劇ず錛屾垨鑰呬袱涓掕繃鏉ャ?br />涓存椂瑙e喅鏂規硶錛?font color="#0000ff">閫夋嫨絎灞炴у悕:B !important;灞炴у悕:A} 4銆佸鏋滀竴緇勮宓屽鐨勬爣絳句箣闂撮渶瑕佷簺闂磋窛鐨勮瘽錛岄偅灝辯暀緇欎綅浜庨噷闈㈢殑鏍囩鐨刴argin灞炴у惂錛岃屼笉瑕佸幓瀹氫箟浣嶄簬澶栭潰鐨勬爣絳劇殑padding 5銆乴i鏍囩鍓嶉潰鐨勫浘鏍囨帹鑽愪嬌鐢?font color="#0000ff">background-image錛岃屼笉鏄痩ist-style-image銆?/p>
6銆両E鍒嗕笉娓呯戶鎵垮叧緋誨拰鐖跺瓙鍏崇郴鐨勫樊鍒紝鍏ㄩ儴閮芥槸緇ф壙鍏崇郴銆?/p>
7銆佸湪緇欎綘鐨勬爣絳劇柉鐙傚姞閫夋嫨絎︾殑鏃跺欙紝鍒繕浜嗗湪CSS閲岀粰閫夋嫨絎﹀姞涓婃敞閲娿?絳変綘浠ュ悗淇敼浣犵殑CSS鐨勬椂鍊欏氨鐭ラ亾涓轟粈涔堣榪欎箞鍋氫簡銆?/p>
8銆佸鏋滀綘緇欎竴涓爣絳捐緗簡涓涓繁鑹茶皟鐨勮儗鏅浘鐗囧拰浜壊璋冪殑鏂囧瓧鏁堟灉銆傚緩璁繖涓椂鍊欑粰浣犵殑鏍囩鍐嶈緗竴涓繁鑹茶皟鐨勮儗鏅鑹層?/p>
9銆佸畾涔夐摼鎺ョ殑鍥涚鐘舵佽娉ㄦ剰鍏堝悗欏哄簭: Link Visited Hover Active 10銆佷笌鍐呭鏃犲叧鐨勫浘鐗囪浣跨敤background 11銆佸畾涔夐鑹插彲浠ョ緝鍐?font color="#0000ff">#8899FF=#89F 12銆乼able鍦ㄦ煇浜涙柟闈㈡瘮鍏跺畠鏍囩琛ㄧ幇鐨勮濂界殑澶氥傝鍦ㄩ渶瑕佸垪瀵歸綈鐨勫湴鏂圭敤瀹冦?/p>
13銆?lt;script>娌℃湁language榪欎釜灞炴э紝搴旇鍐欐垚榪欐牱: 14銆佹爣棰樻槸鏍囬錛屾爣棰樼殑鏂囧瓧鏄爣棰樼殑鏂囧瓧銆傛湁鏃跺欐爣棰樹笉涓瀹氶渶瑕佹樉紺烘枃瀛楋紝鎵浠?<h1>鏍囬鍐呭</h1> 鏀規垚 <h1><span>鏍囬鍐呭</span></h1> 15銆佸畬緹庣殑鍗曡薄绱犲妗嗙嚎琛ㄦ牸錛堝湪IE5銆両E6銆両E7鍙奆F1.0.4浠ヤ笂涓潎鍙氳繃嫻嬭瘯錛?br />table{border-collapse:collapse;} 16銆乵argin鍙栬礋鍊煎彲浠ュ湪鏍囩浣跨敤緇濆瀹氫綅鐨勬椂鍊欒搗鍒扮浉瀵瑰畾浣嶇殑浣滅敤錛屽湪欏甸潰灞呬腑鏄劇ず鏃訛紝浣跨敤緇濆瀹氫綅鐨勫眰涓嶉傚悎浣跨敤left:XXpx榪欎釜灞炴с傛妸榪欎釜灞傛斁鍒頒竴涓鐩稿瀹氫綅鐨勬爣絳炬梺錛岀劧鍚庝嬌鐢╩argin鐨勮礋鍊兼槸涓ソ鏂規硶銆?/p>
17銆佺粷瀵瑰畾浣嶆椂浣跨敤margin鍊煎畾浣嶅彲浠ヨ揪鍒扮浉瀵逛簬鏈韓鎵鍦ㄤ綅緗殑瀹氾紝榪欎笌top錛宭eft絳夊睘鎬х浉瀵逛笌紿楀彛杈圭紭鐨勫畾浣嶄笉鍚屻傜粷瀵瑰畾浣嶇殑浼樺娍鍦ㄤ簬鍙互璁╁叾瀹冨厓绱犲拷鐣ュ畠鐨勫瓨鍦ㄣ?/p>
18銆佸鏋滄枃瀛楄繃闀?鍒欏皢榪囬暱鐨勯儴鍒嗗彉鎴愮渷鐣ュ彿鏄劇ず錛欼E5,FF鏃犳晥錛屼絾鍙互闅愯棌錛孖E6鏈夋晥 19銆佸湪IE涓彲鑳界敱浜庢敞閲婂甫鏉ョ殑鏂囧瓧閲嶅闂鏃跺彲浠ユ妸娉ㄩ噴鏀逛負錛?br /><!鈥揫if !IE]>Put your commentary in here鈥?lt;![endif]鈥?gt; 20銆佸浣曠敤CSS璋冪敤澶栭儴瀛椾綋 21銆佸浣曡涓涓〃鍗曚腑鐨勬枃鏈涓殑鏂囧瓧鍨傜洿灞呬腑錛?br />濡傛灉鐢ㄨ楂樹笌楂樺害鐨勭粍鍦‵F涓槸娌℃湁鏁堟灉鐨勶紝鍔炴硶灝辨槸瀹氫箟涓婁笅琛ョ櫧灝卞彲浠ュ疄鐜版兂鎯崇殑鏁堟灉浜嗐?/p>
22銆佸畾涔堿鏍囩瑕佹敞鎰忕殑灝忛棶棰橈細 23銆佸茍涓嶆槸鎵鏈夋牱寮忛兘瑕佺畝鍐欙細 24銆佺綉绔欒秺澶э紝CSS鏍峰紡瓚婂錛屽紑濮嬪仛鍓嶏紝璇峰仛濂藉厖鍒嗙殑鍑嗗鍜岀瓥鍒掞紝鍖呮嫭鍛藉悕瑙勫垯銆傞〉闈㈠尯鍧楀垝鍒嗭紝鍐呴儴鏍峰紡鍒嗙被絳夈?/p>
25銆佸嚑涓父鐢ㄥ埌鐨凜SS鏍峰紡錛?br />1錛変腑鏂囧瓧涓ょ瀵歸綈錛?font color="#0000ff">text-align:justify;text-justify:inter-ideograph; 2錛夊浐瀹氬搴︽眽瀛楁埅鏂細overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(涓嶈繃鍙兘澶勭悊鏂囧瓧鍦ㄤ竴琛屼笂鐨勬埅鏂紝涓嶈兘澶勭悊澶氳銆?錛圛E5浠ヤ笂錛塅F涓嶈兘錛屽畠鍙殣钘忋?/p>
3錛夊浐瀹氬搴︽眽瀛楋紙璇嶏級鎶樿錛?font color="#0000ff">table-layout:fixed; word-break:break-all;錛圛E5浠ヤ笂錛塅F涓嶈兘銆?/p>
4錛?lt;acronym title=鈥濊緭鍏ヨ鎻愮ず鐨勬枃瀛椻?style=鈥漜ursor:help;鈥?gt;鏂囧瓧</acronym>鐢ㄩ紶鏍囨斁鍦ㄥ墠闈㈢殑鏂囧瓧涓婄湅鏁堟灉銆傝繖涓晥鏋滃湪鍥藉鐨勫緢澶氱綉绔欓兘鍙互鐪嬪埌錛岃屽浗鍐呯殑灝戝張灝戙?/p>
5錛夊浘鐗囪涓哄崐閫忔槑錛?font color="#0000ff">.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}鍦↖E6鍙奍E5嫻嬭瘯閫氳繃錛孎F鏈氳繃錛岃繖鏄洜涓鴻繖涓牱寮忔槸IE縐佹湁鐨勪笢瑗匡紱 6錛塅LASH閫忔槑錛氶変腑swf,鎵撳紑鍘熶唬鐮佺獥鍙o紝鍦?lt;/object>鍓嶈緭鍏?font color="#0000ff"><param name=鈥漺mode鈥?value=鈥漷ransparent鈥?gt; 浠ヤ笂鏄拡瀵笽E鐨勪唬鐮併?br />閽堝FIREFOX 緇?lt;embed> 鏍囩涔熷鍔犵被浼煎弬鏁?font color="#0000ff">wmode=鈥漷ransparent鈥?/font> 7錛夊湪鍋氱綉欏墊椂甯哥敤鍒版妸榧犳爣鏀懼湪鍥劇墖涓婁細鍑虹幇鍥劇墖鍙樹寒鐨勬晥鏋滐紝鍙互鐢ㄥ浘鐗囨浛鎹㈢殑鎶宸э紝涔熷彲浠ョ敤濡備笅鐨勬護闀滐細
<script type=鈥漷ext/javascript鈥?gt;
td{border:#000 solid 1px;}
<DIV STYLE=鈥漺idth:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis鈥?gt;
<NOBR>灝辨槸姣斿鏈変竴琛屾枃瀛楋紝寰堥暱錛岃〃鏍煎唴涓琛屾樉紺轟笉涓?</NOBR>
璇硶錛?br />@font-face{font-family:name;src:url(url);sRules}鍙栧鹼細
name錛氬瓧浣撳悕縐般備換浣曞彲鑳界殑 font-family 灞炴х殑鍊?br />url(url)錛氫嬌鐢ㄧ粷瀵規垨鐩稿 url 鍦板潃鎸囧畾OpenType瀛椾綋鏂囦歡
sRules錛氭牱寮忚〃瀹氫箟
褰撴垜浠畾涔塧{color:red;}鏃訛紝瀹冧唬琛ㄤ簡A鐨勫洓縐嶇姸鎬佺殑鏍峰紡錛屽鏋滄鏃惰瀹氫箟涓涓紶鏍囨斁涓婄殑鐘舵佸彧瑕佸畾涔塧:hover灝卞彲浠ヤ簡錛屽叾瀹冧笁縐嶇姸鎬佸氨鏄疉涓墍瀹氫箟鐨勬牱寮忋?br />鍙畾涔変簡涓涓猘:link鏃訛紝涓瀹氳璁板緱鎶婂叾瀹冧笁縐嶇姸鎬佸畾涔夊嚭鏉ワ紒
褰撴牱寮忚〃鍓嶅畾涔変簡濡俻{padding:1px 2px 3px 4px}鏃訛紝鍦ㄥ悗緇伐紼嬩腑鍙堝鍔犱簡涓涓牱寮忎笂琛ョ櫧5px錛屼笅琛ョ櫧6px銆傛垜浠茍涓嶄竴瀹氳鍐欐垚p.style1{padding:5px 6px 3px 4px}銆傚彲浠ュ啓鎴?font color="#0000ff">p.style1{padding-top:5px;padding-right:6px;},浣犲彲鑳戒細鎰熻榪欐牱鍐欒繕涓嶅鍘熸潵閭f牱濂斤紝浣嗕綘鎯蟲病鎯寵繃錛屼綘鐨勯偅縐嶅啓娉曢噸澶嶅畾涔変簡鏍峰紡錛屽彟澶栦綘鍙互涓嶅繀鍘繪壘鍘熸潵鐨勪笅琛ョ櫧涓庡乏琛ョ櫧鐨勫兼槸澶氬皯錛佸鏋滀互鍚庡墠涓涓牱寮廝鍙樹簡璇濓紝浣犲畾涔夌殑p.style1鐨勬牱寮忎篃瑕佸彉銆?/p>
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
]]>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="generator" content="editplus">
<meta name="author" content="dron">
<meta name="keywords" content="dron">
<meta name="description" content="dron">
<style type="text/css">
body
{
聽聽聽 font-size:12px;
}
.checkbox
{
聽聽聽 width:12px;
聽聽聽 height:12px;
聽聽聽 background-image:url(http://ucren.com/files/WebTex/setCheckbox/images/checkbox.gif);
聽聽聽 background-color:#fff;
聽聽聽 line-height:1px;
聽聽聽 font-size:1px;
}
</style>
</head>
<body>
<div class="checkbox"></div>
聽
<div class="checkbox"></div>
聽
<div class="checkbox" checked=true></div>
聽
<div class="checkbox"></div>
聽
<div class="checkbox" checked=true></div>
聽
<div>灝嗗閫夋閫変腑鏃舵墦鍕劇殑棰滆壊璁句負錛?lt;input type="text" size="7" maxlength="7" value="#0000ff" id="colorValue"><input type="button" value="璇曡瘯" onclick="setActColor(document.getElementById('colorValue').value)">錛堟敞錛氶鑹插煎彲浠ヨ嚜琛屾洿鏀癸級</div>
<script type="text/javascript">
/*******************************************\
聽 鑷畾涔?checkbox 鎵撳嬀棰滆壊鐨勪緥瀛?
聽 This JavaScript was writen by Dron.
聽 @2003-2008 Ucren.com All rights reserved.
\*******************************************/
var actColor = "#f00";
var divs = document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
聽聽聽 if(divs[i].className=="checkbox")
聽聽聽 {
聽聽聽聽聽聽聽 divs[i].onclick = function()
聽聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽聽 var tempvalue = this.getAttribute("checked") ? '' : true;
聽聽聽聽聽聽聽聽聽聽聽 this.setAttribute("checked",tempvalue);
聽聽聽聽聽聽聽聽聽聽聽 return setcheck();
聽聽聽聽聽聽聽 }
聽聽聽 }
}
function setcheck()
{
聽聽聽 var divs = document.getElementsByTagName("div");
聽聽聽 for(var i=0;i<divs.length;i++)
聽聽聽 {
聽聽聽聽聽聽聽 if(divs[i].className=="checkbox"&&divs[i].getAttribute("checked"))
聽聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽聽 divs[i].style.backgroundColor = actColor;
聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 if(divs[i].className=="checkbox"&&(!divs[i].getAttribute("checked")))
聽聽聽聽聽聽聽 {
聽聽聽聽聽聽聽聽聽聽聽 divs[i].style.backgroundColor = "#fff";
聽聽聽聽聽聽聽 }
聽聽聽 }
}
function setActColor(str)
{
聽聽聽 var body = document.body;
聽聽聽 try
聽聽聽 {
聽聽聽聽聽聽聽 body.style.color = str;
聽聽聽聽聽聽聽 body.style.color = "#000";
聽聽聽 }
聽聽聽 catch(e)
聽聽聽 {
聽聽聽聽聽聽聽 window.alert("濉畾浜嗛敊璇殑棰滆壊鍊箋?);
聽聽聽聽聽聽聽 return;
聽聽聽 }
聽聽聽 actColor = str;
聽聽聽 return setcheck();
}
setcheck();
</script>
</body>
</html>