æ人说ï¼å¦ç½é¡µå¶ä½å
ä»PSå¶ä½ææå¾å¦èµ·ï¼æ人说ä»DWå¦èµ·ï¼ä¼è¯´é£äºï¼èæ认为å¦ä¹ ç½é¡µå¶ä½ä¸å®è¦ä»htmlæ ç¾åCSSå¦èµ·ï¼å 为ç½é¡µå¶ä½çæ ¸å¿å°±æ¯htmlæ ç¾å ä¸CSSï¼ådreamweaveråªæ¯ä¸ä¸ªå¼åå·¥å
·ï¼ä¸å»ºè®®ä¸å¼å§å°±å
å¦ä¹ æä¹å»ä½¿ç¨ãåªè¦ä½ ææ ¸å¿å¦ä¼äºï¼å©ç¨è®°äºæ¬ç
§æ ·ä¹è½åç½é¡µãæ³å¿
大家é½ç¥éåªä¸ªæ´å éè¦äºï¼
(ä¸)htmlæ ç¾é¨å
æ们é½ç¥éhtmlæ ç¾å¤§å¤§å°å°æå å个æ ç¾ï¼èå¨æ们å®é
å¼åä¸è¿ç¨ä¸ï¼å´åªç¨å°æåå¤ä¸ªæ ç¾ãæ以æ建议å
å¦ä¹ 常ç¨çä¸äºæ ç¾ï¼ç¶åå¨éæ¸æ·±å
¥å¦ä¹ å
¶å®æ ç¾ã
æ¯å¦ï¼pæ ç¾--->表示ä¸ä¸ªæ®µè½
hæ ç¾--->æ é¢æ ç¾
ç½é¡µä¸ä¸è¬åªç¨ï¼h1ãh2ãh3è¿ä¸ªä¸ä¸ªæ ç¾ã并ä¸h1æ ç¾å¨ä¸ä¸ªç½é¡µä¸æä¸åªæä¸ä¸ªï¼ä¸è¬ç¨äºç½é¡µçæ é¢ã
divæ ç¾--->å¯ä»¥ç解为çå容å¨
aæ ç¾--->é¾æ¥æ ç¾
æ¯å¦è¦è·³è½¬å°ç¾åº¦<a href="
www.baidu.com">ç¾åº¦</a>
imgæ ç¾--->å¨ç½é¡µä¸å¼ç¨å¾ç
æ¯å¦æè¦é¾æ¥ä¸å¼ å¾çï¼<img src="å¾çå°å" width="" height="" alt=""/>
注ï¼å设æä¸å¼ 1.jpgçå¾çï¼è¥è¯¥ç½é¡µåå¾çå¨åä¸çº§ç®å½ï¼é£ä¹å°å为ï¼src="1.jpg"ã
å¦æå¨æ个
æ件夹ä¸ï¼å°±å¨åé¢å 该æ件å称ï¼æå¤å°å±çº§å å¤å°ãä¾æ¬¡ç±»æ¨ãæ¯å¦å¾çå¨imagesæ件夹ä¸ï¼é£ä¹å°å就为ï¼src="images/1.jpg"ã
bræ ç¾--->æ¢è¡
spanæ ç¾--->è¡å
æ ç¾
strongæ ç¾--->å ç²ææï¼å¼ºè°å®ä¹çææ¬å
容å¾éè¦ã
table--->è¡¨æ ¼æ ç¾
å®ä¹ä¸ä¸ªè¡¨æ ¼éé¢ætræ ç¾ï¼è¡ï¼tdæ ç¾ï¼åï¼thæ ç¾ï¼ä¸è¬ç¨äºè¡¨æ ¼çæ é¢ï¼
ul--->æ åºå表
ol--->æåºå表
(äº)CSSé¨å
CSSï¼
å±å æ ·å¼è¡¨ï¼å¯ä»¥ç解æ人穿çè¡£æãåªè¦æ´æ¢CSSï¼å°±ç¸å½äºç»ç½é¡µæ¢äºä¸å¥æ¼äº®è¡£æãå¨CSSé¨åï¼æè§å¾æ以ä¸å 个ç¥è¯ç¹éè¦æ³¨æï¼
(1)CSSè¯æ³
(2)CSSçå ç§å¼ç¨æ¹å¼
1.è¡å
æ ·å¼
æ¯å¦ï¼<p style="width:120px;height:30px;border:1px solid red;"></p>
2.å
åµæ ·å¼
æ¯å¦ï¼<style>
p{width:120px;height:30px;border:1px solid red;}
</style>
3.å¤é¨å¼ç¨æ ·å¼
<link rel="stylesheet" type="text/css" href="æ ·å¼å表å°å">
<style type="text/css">@import url("æ ·å¼å表å°å");></style> è¿ç§åºæ¬å¾å°ç¨
(3)CSSéæ©å¨
1.æ ç¾éæ©å¨
htmlæ ç¾ï¼æ¯å¦ï¼Pæ ç¾ divæ ç¾ spanæ ç¾....
p{color:red;}
2.Classéæ©å¨
以"."å¼å¤´ç为Classéæ©å¨ .p{color:red;}
3.IDéæ©å¨
以"#"å¼å¤´ç为IDéæ©å¨ï¼ä¸è¬æ¥è¯´ï¼ä¸ä¸ªIDéæ©å¨å¨ä¸ä¸ªé¡µé¢ä¸å
·æå¯ä¸æ§ï¼æä¸åªåå¨ä¸æ¬¡ã
#p{color:red;}
(4)ç解ï¼æµ®å¨åæ¸
é¤æµ®å¨ä»¥åå®ä½
å
¶å®æè§å¾å¨CSSä¸åªæ两ç¹éè¦éç¹å»ç解ï¼ä¸æ¯ï¼æµ®å¨åæ¸
é¤æµ®å¨ãäºæ¯ï¼å®ä½ãåªè¦ä½ æ·±å»æç½è¿ç¹ä¸¤ç¹äºï¼æç¸ä¿¡CSSé¨ååºè¯¥æ²¡æå¤å¤§é¾é¢ã
为ä»ä¹è¿ä¹è¯´å¢ï¼å 为æ¥è§¦å¾å¤æ°ææå们ï¼å¤§å¤æ°é½ä¸ç解为ä»ä¹ç¨äºæµ®å¨ååè¦"æ¸
é¤æµ®å¨"ï¼ä»¥åè¿æ¸
é¤æµ®å¨çå«ä¹æ¯ä»ä¹ã
å
¶å®ç¨æ¸
é¤æµ®å¨ä¸»è¦æ¯ä¸ºäºé²æ¢ç½é¡µäº§çä¸äºå¼å¸¸çå°BUGï¼æ¯å¦ï¼ç½é¡µéä½ãç¸ä¿¡å¾å¤äººæ°ææåé½éå°è¿è¿æ ·çé®é¢ï¼â为ä»ä¹æçç½é¡µä¼éä½åï¼æ²¡æææ£å¸¸æ
åµä¸å¸å±ææ¾âã
å
¶å®è¿ç±»æ
åµï¼å¤§å¤æ°é½æ¯ä¸ºæ¸
é¤æµ®å¨äº§ççï¼ç±æ¤å¯è§âæ¸
é¤æµ®å¨çéè¦æ§âã
å¨å®ä½æ¹é¢ï¼ä¸å®è¦ç解ä¸ç§å®ä½çå«ä¹ï¼ç¸å¯¹å®ä½ï¼position:relativeï¼ç»å¯¹å®ä½ï¼position:absoluteï¼è¿æposition:fixedç¸å¯¹äºæµè§å¨å®ä½ã
å
¶ä¸æè§å¾æéè¦ç解çæ¯ç»å¯¹å®ä½ï¼å 为ç»å¯¹å®ä½æ¯ç¸å¯¹äºæ个å
ç´ æ¥å®ä½çãæ¯å¦è¯´ï¼
<html>
<body>
<div id="box">
<p style="position:absolute;top:100px;left:200px;">ææ¯ç»å¯¹å®ä½å¦ï¼</p>
</div>
</body>
</html>
æè·¯ï¼å¦æç»ä¸ä¸ªå
ç´ ç»å¯¹å®ä½ï¼é£ä¹å®å°±ä¼åå¤å±ä¸ç´å¯»æ¾ç¸å¯¹å®ä½ãå¦ææ¾å°æ个å°æ¹ç¨äºç¸å¯¹å®ä½ï¼åç¸å¯¹äºå®å®ä½ãå¦æé½æ²¡ææ¾å°ãåç¸å¯¹äºæµè§å¨æ¥å®ä½ãç±æ¤å¯è§På
ç´ æ¯ç¸å¯¹äºæµè§å¨æ¥å®ä½çï¼å 为ä»çç¶çº§DIV没æç¸å¯¹å®ä½ã
ï¼ä¸ï¼å¸å±
å
¶å®å¸å±ï¼å°±æ¯æä¸ä¸ªä¸ªDIV模åç»åèµ·æ¥ï¼å©ç¨CSSæ¥å¸å±ãè¿éæåä¸ä¸ªæ常è§çå¸å±æ¡æ¶ ç¹å»é¢è§
ï¼åï¼å
³äºJSç¹æï¼javascript/jqueryï¼
å
³äºjavascriptåjqueryçå¦ä¹ ï¼æè§å¾åææ°æ没å¿
è¦å»æ·±å
¥å¦ä¹ ï¼åªéè¦ä¼ä½¿ç¨è¿äºç¹æå°±è¡ãå¦æ以åèµ°webå端è¿ååå±çè¯ï¼æ建议å»äºè§£å¦ä¹ javascriptï¼éç¹å»å¦ä¹ jqueryãå 为jqueryæ¯åºäºjavascriptå¼ååºæ¥çä¸ä¸ªç±»åº,æ¯è¾å®¹æä¸æï¼æè¯å¥½çææ¡£å帮å©æåãå¯ä»¥ç¨æ´å°ç代ç ï¼å®ææ´å¤çåè½ã
å¦æä½ æ¯çå¿æ³å¦ä¹ ç½é¡µå¶ä½ã以åæ³æçè¿ä¸ªæ¹ååå±ï¼é£ä¹ä½ ä¸å®è¦æ¥è¿ä¸ªä¼é¹
è£ï¼åé¢åé¢æ¯äºä¹å
ï¼ä¸é´æ¯äºä¹ä¸ï¼æåé¢å°±æ¯äºä¹é¶ï¼è¿èµ·æ¥å°±æ¯å®æ´çå¢ï¼æ¥è¿éå¯ä»¥è¿éå¦ä¹ ç»éªï¼å¾å°ä¸äººè§£çï¼è¿æ ·ä½ å¯ä»¥æé¿çæ´å¿«ï¼æå¾
ä½ çå å
¥ï¼ï¼ï¼
åå¨æåï¼æä¸æ¢è¯´æç
å¦ä¹ æ¹æ³éåä½ ï¼å 为æ¯ä¸ªäººçå¦ä¹ æ¹æ³é½ä¼ä¸åï¼ä½è³å°ä½ å·²ç»èµ°å¨äºä¸ä¸ªæ£ç¡®ç
èµ·è·çº¿ä¸ãæè§å¾è¦æ³å¿«éå¦ä¼ç½é¡µå¶ä½æ两ç¹è¯çª:第ä¸ãæä¸ä¸ªéåèªå·±çå¦ä¹ æ¹æ³ã第äºãå¤åäºæèï¼å¤å»åå¤å»ç»ãåªæå¨ä¸æå»åçè¿ç¨ä¸ï¼æä¼åç°èªå·±åå¨çåªäºç缺ç¹ã