å¨1024*768æè
800*600çå辨çä¸å¯ä»¥èªå¨è°æ´æéç¨äºè¯¥å®¢æ·ç«¯å辨çç大å°ã
ãã第ä¸ç§æ¹æ³ï¼åä¸ä¸ªç½é¡µè§£å³é®é¢ï¼é¿äºç¹ï¼
ããå¦æåªæ¯å 为æµè§è
æ¹åäºæµè§å¨ç设置ï¼æè
å 为æµè§å¨ä¸å
¼å®¹ï¼ä½¿èªå·±ç²¾å¿å¶ä½çç½é¡µåå¾"é¢ç®å
¨é"ï¼é£å¤ä»¤äººæ²®ä¸§ï¼ä¸é¢æ们以ç½é¡µç±å¥½è
ç常ç¨å·¥å
·Dreamweaverï¼ä»¥ä¸ç®ç§°DWï¼ä¸ºä¾ï¼ååºå 个ç½é¡µå¶ä½åå¦è
è¾å¸¸è§çç½é¡µå¸å±é®é¢ä»¥å解å³æ¹æ³ï¼å¸æ对åå¦è
们ææ帮å©ã
ããä¸ãæ¶é¤ä»»æ缩æ¾æµè§å¨çªå£å¯¹ç½é¡µçå½±å
ããä¸çªè¾è¦ååºæ¥çç½é¡µï¼å¨å
¨å±ç¶æä¸æµè§ä¸åæ£å¸¸ãä½å¨æ¹åæµè§çªå£å¤§å°ä¹åï¼ç½é¡µå°±åå¾"ä¸å ªå
¥ç®"äºï¼è¿æ¯ä¸ªå¾å¼å¾æ³¨æçé®é¢ã
ããé®é¢çæ ¹æºè¿å¾ä»ç½é¡µçå¸å±è¯´èµ·ï¼å¨DWä¸ï¼ç½é¡µå
容çå®ä½ä¸è¬æ¯éè¿è¡¨æ ¼æ¥å®ç°çï¼è§£å³è¡¨æ ¼çé®é¢ä¹å°±æåäºå¤§åã
ãã大家åºè¯¥æ³¨æå°ï¼å¨DWä¸è¡¨æ ¼å±æ§é¢æ¿çé«å®½è®¾å®éæ©ä¸æä¾äºä¸¤ç§ä¸åç±»åï¼ç¾åæ¯ååç´ å¼ãç¾åæ¯ç使ç¨å°ä¼äº§çåé¢è¯´å°çé£ä¸ªæ¯ç
ãè¿éæ说çç¾åæ¯æ¯æè¡¨æ ¼çé«æ宽设置为ä¸å±æ è®°æå åºåé«æ宽çç¾åæ¯ï¼å¦å¨ä¸ä¸ªè¡¨æ ¼åå
ç宽度æ¯600ï¼å¨å®éé¢åµå
¥äºå¦å¤ä¸ä¸ªè¡¨æ ¼ï¼è¡¨æ ¼å®½åº¦å è¡¨æ ¼åå
ç50%ï¼åè¿ä¸ªè¡¨æ ¼ç宽度为300ï¼ä¾æ¤ç±»æ¨ï¼å¦æå¨ä¸ä¸ªè¡¨æ ¼ä¸æ¯åµäºå¦ä¸ä¸ªè¡¨æ ¼åå
ä¸ï¼åå
¶ç¾åæ¯æ¯ç¸å¯¹äºå½æ¶çªå£ç宽度çãIEæµè§å¨ä¸ï¼é便æ¹å¨ä¸»é¡µçªå£ç大å°æ¶ï¼è¡¨æ ¼çå
容ä¹éä¹éä½ãåå½¢ï¼å°±æ¯å ä¸ºè¡¨æ ¼çç¾åæ¯ä¹è¦éççªå£ç大å°èæ¹åæç¸åºçç¾åæ¯å®½åº¦ã
ããèªç¶ï¼è§£å³è¿ä¸ªé®é¢çåæ³å°±æ¯å°è¡¨æ ¼å®½åº¦è®¾ç½®æåºå®å®½åº¦ï¼ä¹å°±æ¯åç´ å¼ï¼ãå¦å¤å¦æå¤å±è¡¨æ ¼å·²å好åºå®å®½åº¦è®¾ç½®ï¼å
å±è¡¨æ ¼ä¹å¯ä»¥éå½ä½¿ç¨ç¾åæ¯è®¾ç½®ãæ¸
æ¥è¿ä¸ªåå以åï¼å¦æåºç°ç±»ä¼¼çé®é¢å¤§å®¶ä¹ç¥éæä¹è§£å³ã
ããäºã让ç½é¡µå±
ä¸
ãã说å°äºçªå£å¤§å°å°±ä¼é¡ºçè·¯åæ³å°å辨ççé®é¢ï¼å¨800Ã600å辨çä¸å¶ä½çç½é¡µå¨1024Ã768å辨ççæºå¨ä¸æå¼ï¼æ´ä¸ªç½é¡µå°±ä¼è·å°å·¦è¾¹ï¼1024Ã768å辨ççç½é¡µå¨800Ã600å辨ççæºå¨ä¸ææ¶ä¹ä¼åå¾"ä¸å ªå
¥ç®"ã两ç§å辨çååä¸ä¸ªå§ï¼åèµ·æ¥è´¹æ¶ï¼çèµ·æ¥ä¹è´¹å²ãæä¹åå¢ï¼
ããç°å¨å¤§å¤æ°ç½æ°é½è¿å¨ç¨800*600çå辨çï¼æ以æ们ä¸è¬å¯ä»¥ä»¥æ¤å辨ç为主ï¼è¦æ³è®©ç½é¡µå¨1024*768æ¶å±
ä¸ï¼åªè¦å¨ç½é¡µå代ç ç<body>åç´§å ä¸å¥<center>ï¼</body>åå ä¸å¥</center>å°±OKäºãä¸è¿æå 个é®é¢è¿æ¯è¦æ³¨æä¸ä¸ï¼ç¬¬ä¸ä¸ªå°±æ¯ä¸é¢è¯´å°çç¾åæ¯çé®é¢ï¼è¡¨æ ¼ãåå
æ ¼ç宽度åä½æ好è¦ä½¿ç¨åç´ åä½ï¼èä¸è¦ç¨ç¾åæ¯ãä¾å¦width=770ãå¦æä½ çè¡¨æ ¼å®½åº¦è®¾çæ¯ç¾åæ¯ï¼é£ä¹ä½¿ç¨å¤§äº800Ã600çåç´ æ¶ï¼ç½é¡µå°±ä¼æ宽ï¼è¿æ ·ç½é¡µå¯è½ä¼åå½¢ãå¨<body>ä¸å å
¥leftmargin=0ï¼å³<body leftmargin=0>è¿ç§æ
åµä¸ï¼800Ã600æ¯æçè¡¨æ ¼å®½åº¦ä¸º780åç´ æ¶ä¸ä¼åºç°æ»å¨æ¡ãè¿æä¸ç¹è¦æ³¨æçæ¯ä¸è½ç¨DWä¸çå±æ¥å®ä½ã
ãã<html>
ãã<head></head>
ãã<body topmargin=0 leftmargin=0>
ãã<center>
ãããã<table cellspacing cellpadding width=760><tr><td></td></tr></table>
ãã</center>
ãã</body>
ãã</html>
ãä¸ãå®ä¹åºå®å¤§å°çæå
ãã大家é½ç¥é,å¨IEæµè§å¨çåè½è®¾ç½®ä¸ï¼æä¸ä¸ªå¯ä»¥èªç±è®¾ç½®çªå£å
容åä½å¤§å°çåè½ï¼è¿æ ·ç±äºä¸å访é®è
çè®¾ç½®ä¹ æ¯ä¸åï¼åç°å¨ä»ä»¬é¢åçç½é¡µææ¶ä¹ä¼ä¸ä¸ç¸åãæ¯å¦ä½ å¯è½æ¬æ¥è®¾è®¡æ¶ç¨çæ¯2å·åä½ï¼ç»æç±äºç¨æ·å¯¹æµè§å¨çé¢å¤è®¾å®ï¼åçæ´å¤§äºï¼è¿æ¶ä½ çç½é¡µä¹å¯è½åå¾"ä¸å ªå
¥ç®"ãè½ç¶ä¸æ¯ä½ çéï¼ä½å®¢æ·æ¯ä¸å¸ã
ããå¦æ使ç¨äºç½é¡µä¸çCSSæ ·å¼è¡¨ææ¯ï¼å°±ä¸ä¼åºç°ä¸è¿°æ
åµäºã使ç¨å¿«æ·é®"Shift+F11"æå¼æ ·å¼è¡¨"CSS style"ç¼è¾å¨ï¼å¨çªå£ä¸åå»é¼ æ å³é®æ§è¡"New CSS style..."å½ä»¤æ°å»ºä¸ä¸ªæ ·å¼è¡¨ï¼ç¶åå¨ç»åºçå表ä¸éæ©"ç±»å"é项ï¼å®ä¹æåå±æ§åæ°ï¼ä¸è¬æåç大å°éæ©12pxè¾ä¸ºéå®ï¼ãå®æåéæ©ç½é¡µç¼è¾çªä¸çææ¬ï¼åå»æ°çæ ·å¼è¡¨å称ï¼å¯ä»¥çå°éä¸çææ¬åçäºååãé¢è§æ¶è¯è¯å®ä¹çææ¬åä½å°ºå¯¸è¿ä¼ä¸ä¼éæµè§å¨çéæ©åä½å¤§å°èæ¹åã
ããåã让ç½é¡µéåºä¸åçæµè§å¨
ããæµè§å¨çæ ¼å±ç°å¨æ¯ä¸¤å天ä¸ï¼ä¸åæ¯IEï¼å¦ä¸åæ¯NetScapeï¼å¨å½å
Ieæç»å¯¹çå æçï¼å¨è¿ç§æ
åµä¸æ们设计çç½é¡µåªè¦å
¼å®¹å®å°±è¡äºï¼ä½NetScapeå¨å½å¤è¿æ¯æå¾å¤äººä½¿ç¨ï¼æ¯ç«å®æ¯æµè§å¨çå
èã
ããè½ç¶æ²¡æåæ³ååºè®©æææµè§å¨é½å
¼å®¹çç½ç«ï¼ä½åªè¦æ³¨æ以ä¸å ç¹ï¼ååºæ¥çç½é¡µå¨å个æµè§å¨é½ä¸è½è¾¾å°æ¯è¾å¥½çæ¾ç¤ºææï¼
ããä¸è¦æ··å使ç¨å±åè¡¨æ ¼æçï¼å¦ææ¯ç¶åå
³ç³»ï¼å¦å±ä¸è¡¨æ ¼ï¼ä¸å¨æ¤ååèå´å
ã
ããå
èå¼ç CSS å¨ Netscape Navigator ä¸ç»å¸¸ä¼åºç°é®é¢ï¼ä½¿ç¨é¾å¼æå
åµå¼ã
ããææ¶éè¦å¨ç©ºå±æå
¥è¡¨æ ¼æè
éæå¾çï¼ä»¥ä¿è¯å¨ Netscape Navigator éçææã
ãã对äºåªæå 个åç´ å®½åº¦æé«åº¦çå±ï¼æ¹ç¨å¾çæ¥å®ç°ã
ããé¿å
ä½¿ç¨ W3C ç»ç»ä¸æ¨èçæçå±æ§ï¼ç¨ CSS 代æ¿ã
ãã第äºç§æ¹æ³ï¼å两个éåä¸åå辨çç页é¢ï¼ä¸ä¸ªæ¯800Ã600ï¼ä¸ä¸ªæ¯1024Ã768ï¼å¨800Ã600ç页é¢ä¸å å
¥ä¸ä¸ä»£ç å°±å¯ä»¥å®ç°è·³è½¬äºï¼
ã
ãã解å³å辨çé®é¢å¨Dreamweaverä¸æ²¡ææ¤é¡¹åè½ï¼æ们åªè½æå¨å å
¥ä¸æ®µJavascript代ç ãé¦å
å¨changeï¼ie.htmlæchangeï¼nc.html页é¢ä»£ç ä¸ç< head>å< /head>ä¸å å
¥ä»¥ä¸ä»£ç ï¼
ãã < script language=JavaScript>
ãã < !ï¼ï¼
ãã function redirectPage(){
ãã var url800x600=ãindexï¼ie.htmlã; //å®ä¹ä¸¤ä¸ªé¡µé¢ï¼æ¤å¤å设indexï¼ex.htmlå1024ï¼ie.htmlåchangeï¼ie.htmlå¨åä¸ä¸ªç®å½ä¸
ãã var url1024x768=ã1024ï¼ie.htmlã;
ãã if ((screen.width==800) ï¼ï¼ (screen.height==600))ã//å¨æ¤å¤æ·»å screen.widthãscreen.heightçå¼å¯ä»¥æ£æµæ´å¤çå辨ç
ãã window.location.href= url800x600;
ãã else if ((screen.width==1024) ï¼ï¼ (screen.height==768))
ãã window.location.href=url1024x768;
ãã else window.location.href=url800x600;
ãã }
ãã // ï¼ï¼>
ãã < /script>
ãã ç¶ååå¨< bodyâ¦>å
å å
¥onLoad=ãredirectPage()ã
ãã æåï¼åæ ·å°ï¼å¨< body>å< /body>ä¹é´å å
¥ä»¥ä¸ä»£ç æ¥æ¾ç¤ºç½é¡µçå·¥ä½ä¿¡æ¯ï¼
ãã < script language=JavaScript>
ãã < !ï¼ï¼
ãã var w=screen.width
ãã var h=screen.height
ãã document.write(ãç³»ç»å·²æ£æµå°æ¨çå辨ç为:ã);
ãã document.write(ã< font size=3 color=red>ã);
ãã document.write(wï¼ãÃãï¼h);
ãã document.write(ã< /font>ã);
ãã document.write(ãæ£å¨è¿å
¥é¡µé¢è½¬æ¢,请ç¨åâ¦ã);
ãã // ï¼ï¼>
ãã < /script>
å¤æ读è
æµè§å¨ç±»ååå±å¹å辨çï¼èªå¨è°ç¨ä¸åCSS
æ们å¨è®¾è®¡ç½é¡µçæ¶åä¸ä¸ªæ¯è¾å¤´ççé®é¢æ¯ç©¶ç«æ们çæµè§è
çå辨çæ¯å¤å°ï¼å¦æ使æ们çæµè§è
è½å¤æ´å¥½çå»æµè§å°æçç½é¡µï¼è¿ä¸ªæ¯æ们设计åå¿
é¡»æèçé®é¢ãæ以Leyingå¨è®¾è®¡ç½é¡µçæ¶å第ä¸ä¸ªæ³çæ¯å
¼å®¹ç°å¨å¤§å¤æ°æµè§è
çå±å¹å辨çï¼è¿é头æå ç§æ常ç¨çæ¹æ³ï¼
1ã硬è¡æç½é¡µå
ç¨è¡¨æ ¼æ¡èµ·æ¥ï¼æ¡çå辨çåºè¯¥æ¯å¨760ï¼780è±¡ç´ ï¼å
¶ä½ç空é´å¯ä»¥ç»ä¸ä¸ªèæ¯å¾æè
空ç½.
2ãç¨èªå¨ç¼©æ¾çæ¹æ³ä¹å¯ä»¥å®ç°ï¼è¿ç§æ¹æ³æ¯è¾å¤èï¼èä¸å¾ç®åï¼è¿ä¸ªä¸å¤è¯´äºï¼
3ãç¨èªå¨å¤æçæ¹æ³ã
ä»å¤©ï¼å°±ç¬¬ä¸ç§æ¹æ³æ¥è¯´è¯´ï¼å¦ä½æ¥å¤æåºæµè§è
çå±å¹å辨çï¼æ ¹æ®ä¸åçå辨çç»äºè¯»è
ä¸åçæµè§å
容ï¼
ç½ç»ä¸ä¹æä¸äºè½èªå¨å¤æåºä½ çæµè§å¨æ¯ä»ä¹ç±»åæè
ä»ä¹çæ¬ç代ç ï¼éæè¿æ¥ã
ä¸ãæ¢å¤æå辨çï¼ä¹å¤ææµè§å¨ï¼ä½¿ä¹æ为å¤ææµè§å¨ç±»åå±å¹å辨çèªå¨è°ç¨ä¸åCSSç代ç ã
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//å¦ææµè§å¨ä¸ºFirefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
}else{
//å¦ææµè§å¨ä¸ºå
¶ä»
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
}
}
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
}else{
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
}else{
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
}else{
setActiveStyleSheet(CSS4);
}}}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
为äºå¤§å®¶æç½ï¼è¿éç®å解æä¸ä¸ï¼
å¼ç¨å
容
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
å¼å·éé¢åå«å¡«åï¼ç¨æ·ä½¿ç¨IEçæ¶å并ä¸å辨ç为1024*768,800*600,1152*864è¦ä½¿ç¨çcssæ件åã
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
å¼å·éé¢åå«å¡«åï¼ç¨æ·ä½¿ç¨FireFoxï¼ä¸ä¸ªä¹å¾æµè¡çæµè§å¨ï¼çæ¶å并ä¸å辨ç为1024*768,800*600,1152*864è¦ä½¿ç¨çcssæ件åã
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
å¼å·éé¢åå«å¡«åï¼ç¨æ·ä½¿ç¨å
¶ä»æµè§å¨çæ¶å并ä¸å辨ç为1024*768,800*600,1152*864è¦ä½¿ç¨çcssæ件åã
äºãä¸å¤æå辨çï¼åªå¤ææµè§å¨å®ç°æ ¹æ®æµè§å¨ç±»åèªå¨è°ç¨ä¸åCSSã
<SCRIPT LANGUAGE="JavaScript">
<!--
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
//å¦ææµè§å¨ä¸ºIE
setActiveStyleSheet("default.css");
}else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
//å¦ææµè§å¨ä¸ºFirefox
setActiveStyleSheet("default2.css");
}else{
//å¦ææµè§å¨ä¸ºå
¶ä»
setActiveStyleSheet("newsky.css");
}
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+title;
}
//-->
</SCRIPT>
解éï¼ï¼ååé¢çå·®ä¸å¤ï¼
å¦ææµè§å¨ä¸ºIEï¼åè°ç¨default.css
å¦ææµè§å¨ä¸ºFirefoxï¼åè°ç¨default2.css
å¦ææµè§å¨ä¸ºå
¶ä»ï¼åè°ç¨newsky.css
使ç¨æ¹æ³ï¼
å¾ç®åï¼æ¾å¨ â</head>â åé¢å³å¯ã
页é¢å¨ä¸åå±å¹å辨çä¸åå¨çé®é¢å解å³åæ³
ï¼æªèè800*600ææ´ä½å辨ççæ
åµï¼
ä¸ é®é¢
å¨ä¸åå辨çä¸ï¼é¡µé¢å¸å±åå¨ä¸åç¨åº¦çå·®å¼ï¼ç¹å«æ¯é¡µé¢ä¸ç表åæ§ä»¶ï¼å
¶å®½åº¦é»è®¤æ¯åºå®å¼âwidth:150pxâï¼å½å辨çè¾é«æ¶ï¼è¡¨æ ¼ä¸ç空ç½æ¾å¾è¿å¤ï¼é¡µé¢å¸å±æ¾å¾å¾ä¸åè°ï¼å¨å®½å±æ¾ç¤ºå¨ä¸å°¤ä¸ºææ¾ã
äº è§£å³åæ³
æ¹æ³1. 为ä¸åå辨çåç¬åæ ·å¼æ件ï¼å¨é¡µé¢å¤´é¨ç¨jså¤æå辨çåå¨æå è½½å®ä¹å¥½çæ ·å¼æ件ãæ ·å¼æ件å½åæ ¼å¼å¦ï¼forms[_å±å¹å®½åº¦].cssï¼æ ·å¼æ件ä¸åªééæ°å®ä¹ææ¬æ¡åä¸ææ¡ç宽度å³å¯ã
å¨å
å«ç头æ件headr.incä¸å å
¥js代ç ï¼
if(screen.width > 1024){
document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');
}
forms_1280.cssæ件å
容ï¼
/* å辨ç宽度为1280çæ¶åï¼ææ¬æ¡åä¸ææ¡ç宽度å±æ§(width)åç¬å®ä¹
* åè计ç®æ¹æ³ä¸ºï¼ï¼å辨ç宽度-174ï¼/4 * 0.7
* 左侧èåæ 宽度为174pxï¼å³ä¾§é¡µé¢è¡¨æ ¼æ¯4åï¼æ§ä»¶å®½åº¦ä¸ºåå
æ ¼ç70%
* (1280-174)/4*0.7 = 193
*/
input.text
{
background:#FFFFFF;
border:1px solid #B5B8C8;
padding:3px 3px;
height:22px;
line-height:18px;
vertical-align:middle;
padding-bottom:0pt;
padding-top:2px;
width: 193px;
color: #333;
}
select.select{
width: 193px;
}
ä¼ç¹ï¼å®ç°å¾ç®åï¼ä»£ç éå°ï¼å¹¶ä¸å¯é对ä¸åå辨çåæ´ç»ç²åº¦ç页é¢æ§å¶ã
缺ç¹ï¼æ ææ¾ç¼ºç¹ã
æ¹æ³2 å°æ´ä¸ªé¡µé¢ç宽度设置为åºå®å¼ï¼å¹¶ä½¿å
¶å±
ä¸æ¾ç¤ºã
ä¼ç¹ï¼å¯ä»¥å¾å¤§ç¨åº¦çæ¶é¤ä¸åå辨çä¸çæ¾ç¤ºå·®å¼ã
缺ç¹ï¼å辨ç宽度大äºè¿ä¸ªåºå®å¼çæ¶åï¼é¡µé¢ä¸¤è¾¹ä¼åºç°ç©ºç½ã
æ¹æ³3 ç¨jså¤æå辨çï¼ä¿®æ¹bodyçzoomå±æ§ï¼IEç¹æ§ï¼ï¼å³å¯å®ç°å¯¹æ´ä¸ªé¡µé¢è¿è¡ç¼©æ¾ï¼ç±»ä¼¼IE8æå
¶å®æµè§å¨æä¾ç缩æ¾åè½ã
ä¼ç¹ï¼å®ç°ç®åï¼é¡µé¢è½è¿è¡ç¼©æ¾ã
缺ç¹ï¼ç¼©æ¾æ¯å®½åº¦åé«åº¦ççæ¯ç¼©æ¾ï¼é«å辨çä¸åä½ãå¾ççèµ·æ¥ä¼åå°ï¼é®é¢è§£å³çä¸å½»åºã
ä¸ æ»ç»
æ¨èæ¹æ³1ã页é¢å¸å±çåååå辨çç宽度æå¯åå
³ç³»ï¼åé«åº¦å
³ç³»ä¸å¤§ï¼å¸¸ç¨çå辨ç宽度ä¹å°±å ç§ï¼åå 个ç®åçcssæ件å³å¯ã
温馨提示:答案为网友推荐,仅供参考