æ¼è®²å宾ï¼åæ¥ï¼HTMLæ¯ä¸ æ¨å¯ä»¥ä½¿ç¨éé¢çå¯ä¸è¯è¨ ä¸ä¸ªç½é¡µã æ¨å¯ä»¥ä½¿ç¨ä¸ç§å«åCSSæ å±å æ ·å¼è¡¨ï¼ä»¥åã CSSå
è®¸ä½ æå®å¤ ä¸ä¸ªwebæ£æ¯ç¾å¦ 页é¢ï¼å
æ¬å¸å±å大å°ï¼ é¢è²ååä½ççã ä¾å¦ï¼è®©æ们å建ä¸ä¸ªç½é¡µ è¿éæ说çCSS0ä¸ä¸ªä»£è¡¨ 主页ä¸ï¼æ¯å¦è¯´ï¼çº¦ç¿°Â·åä½ã
å¨è¿ä¸ªé¡µé¢ï¼æ们å°æ约翰·åä½ç å½åï¼å¨å
¶ä¸ä¼ ä»çè§ä¼ä¸ä¸ªä¸éçæ¶æ¯ï¼ä¸é¢ è¿å°æ¯ä¸ä¸ªé¡µèï¼ç¨ 说ï¼ä¸äºçæä¿¡æ¯ã è¦åå°è¿ä¸ç¹ï¼è®©æ们å®ä¹ä¸ä¸ªé¨é¨ ç¨äºä½¿ç¨æ ç¾çé¡µé¢ å«æ ¼ã æå¼æ¯æ¶çdivï¼çº¦ç¿°åä½ï¼æ¥è¿ æ¶æ ¼ï¼å¦ä¸ä¸ªæå¼æ¯æ¶çdivï¼ ç°å¨æ们å°æå®çä¸è¥¿ å欢ï¼æ¬¢è¿å°æçä¸»é¡µï¼ å¹¶è®©æ们å
³éè¿ä¸ªååºï¼ä¹æ¯å¦æ¤ã
ç°å¨ç¬¬ä¸æ¬¡ä¹æ¯æå æ ¼ï¼çæã åå被çä¸ï¼è®©æç°å¨ä½¿ç¨çHTML å®ä½ï¼ä»£è¡¨ä¸ä¸ªç¬¦å· ä¸ä¸ªåï¼ä½ ä¸è½ä»¥å
¶ä»æ¹å¼ è¾å
¥æ¨çé®çä¸ã ç¹å«æ¯ï¼æ该æä¹å 符å·ï¼è±éï¼169ï¼åå·ã åæ¥ï¼æ¯æ°å代ç 对äºçæ符å·ã é£ä¹è®©æ们æ¥æå®çº¦ç¿°Â·åä½ è¿éå¨åºé¨ã 让æ们å
³édivåä¿åæ件ã
ç°å¨ï¼ä»ä¹æ¯è¿ä¸ªdivæ ç¾ï¼ divæ ç¾ç®åå°å®ä¹äºä¸ä¸ªå¸ ç页é¢ï¼å®æ¬è´¨ä¸æ¯ä¸ ç©å½¢åºåã æ以å¨è¿ä¸ªæ¶å»ï¼ææä¸ä¸ª ç©å½¢åºåï¼ä¸ä¸ªå¨é¡¶é¨ å
¶ä»çã æ以ç°å¨ï¼ææå ä¹ä¸æ · è½ç¶ææä¸æ®µã ä½æ们ä¸ä¼çå°ç¸å½å¤ 空ç½å¨ä»ä»¬ä¹é´ã
让æ们æ¥ä¿åè¿ä¸ªæ件ï¼æ´æ¹å
¶ æéï¼çä¸çäº æ¤å»å¨Chromeã ååæéchmod a + R CSS0.htmlã ç°å¨ï¼è®©æ们æå¼Chromeåè®¿é® http://localhost.CSS0.htmlã äºå®ä¸ï¼è¿éæä¸ä¸ªä¸»é¡µ 约翰·åä½ã ç°å¨ï¼è®©æ们é£æ ¼åè¿ä¸ç¹æ´ æ£æ¯ä½¿ç¨ä¸äºCSSã
æ©å¨geditä¸ï¼è®©æ们è¿å
¥è¿ä¸ª 第ä¸ä¸ªdivæ ç¾ï¼å¹¶æ·»å æ ·å¼ æå®çå±æ§ï¼ææ³ä¸ä¸ª çï¼ä¾å¦åä½å¤§å°ï¼36个åç´ ï¼æåç´ ã ææ³è¿ä¸ªåä½çç²ç» è¦å¤§èèä¸æ¯é»è®¤çï¼ è¿æ¯æ£å¸¸çã 对äºç¬¬äºä¸ªdivï¼è®©æ们æå® å
·æå¦ä¸ç§é£æ ¼å±æ§ ç24åç´ çåä½å¤§å°ï¼å æ¤ ç¨å¾®å°äºä¸ç¹ã åå·åå
³éå¼å·ã
æåï¼å¨ç¬¬ä¸æ ¼ï¼è®©æ们å é£æ ¼çäºæ¥ä»·ï¼åä½å¤§å°å æ¯æ¹è¯´ï¼12个åç´ è¿æ®µæ¶é´ã åå·åå
³éçæ¥ä»·ã 请注æï¼é£æ¶ï¼æä¼¼ä¹æ 对äºæå®äºä½ç¨å¼åç æ¯ä¸ä¸ªä½¿ç¨è¿ä¸ä¸ªdivçï¼ äºå®è¯æï¼CSSã äºå®ä¸ï¼ä½ å¨çè¯æ³ è¿äºåå¼å·ä¹é´æ¯CSSï¼ å
·ä½çCSSå±æ§ ä¸å¼ã è对äºç¬¬ä¸ä¸ªæ ç¾ï¼å¨é£éææ 两个è¿æ ·çå±æ§ï¼åä½å¤§å°å åä½ç²ç»ï¼æåªæ¯åå¼ ç¨åå·ã
ç°å¨ï¼åªæ¯é£æ ¼çç¼æ
ï¼æ å¨è¿å
å«åå· æ¯ä¸è¡çæ«å°¾ã ä½ä»ä»¬ä¸æ¯ç»å¯¹å¿
è¦çï¼ ç¹å«æ¯å½ä½ åªæä¸ä¸ª å±æ§å®ä¹ã ç°å¨è®©æ们ä¿åæ件并éæ°å è½½ å¨Chromeæµè§å¨ï¼ççæä»ä¹ åæåºæ¯ã æ©å¨Chromeæµè§å¨å¨è¿éï¼ è®©æ们ç¹å»å·æ°ã
ç°å¨æ们æä¸ä¸ªç¨å¾®æ´æ趣 约翰主页 åä½ï¼ç±æ¤ä¸è¯¥ç¬¬ä¸çº¿ ä»çååï¼è¿æ¯è¿éé¢ ç¬¬ä¸ä¸ªdivï¼æ¯36åç´ é«ï¼è¿ ç²ä½åï¼ç±æ¤ï¼ç¬¬äºè¡ï¼ è¿æ¯å¨ç¬¬äºä¸ªdivï¼æ¯24 åç´ é«ï¼ä½ä¸æ¯é»ä½ã 并ç±æ¤å¨è¯¥ç¬¬ä¸ç¬¬ä¸è¡ æ ¼ä¸º12åç´ é«ï¼è¿ 没æé»ä½åã ä½æ¯å设æç°å¨æ³è½¬ç§» è¿ä¸åçæåè¶
è¿ è¿æ ·ï¼å®çä¸å¿ã
æå¯ä»¥ä½¿æ¯ä¸ä¸ªä¸ªä½ç çdivä½ä¸ºä¸ºä¸å¿ã ä½æ´å®¹æï¼å¯è½æçå
裹 第å个divä¸3çdivï¼ä¸ä¸ª ç¶ååºï¼å¯ä»¥è¿ä¹è¯´ï¼å¹¶æå® é£è¯¥divåå
¶ææ å人åºè¯¥æ¯ ææ¬å¯¹é½ä¸å¿ï¼ 让æ们ä¸èµ·æ¥ççã
éé¢çgeditï¼è®©æ们åå°æ ä½ï¼å¹¶æ·»å ä¸ä¸ªæ°çdiväºé¡¶é
æ ¼ï¼é£æ ¼çäºæ¥ä»·å¼æç»æ ææ¬å¯¹é½å¸ä¸å¿ï¼é è¿ åå·åå¼è¿°ã ç°å¨ï¼è®©æ们继ç»åè¿ï¼ææç¼©è¿ é£äºæ们以åé®å
¥è¡ã 以ä¸æ¯ç¬¬ä¸æ ¼ï¼è®©æ们 å
³éè¿ä¸ªæ°çdivã
æ¢å¥è¯è¯´ï¼å 为è¿ä¸ä¸ª åæ¥çdivç°å¨çå©åï¼æä»¥è¦ è®²ä¸ä¸ªæ°çç¶divçï¼æå·²ç» æå®ææ³å¯¹é½ å¨è¯¥ä¸å¿çç¶divçææ¬ é¡µé¢ï¼è¯¥å±æ§å° 继æ¿äºææè¿äºå©åã äºå®ä¸ï¼è®©æ们ä¿åæ件并 èµ°å¨æµè§å¨ä¸ççã 让æ们éæ°å¨Chromeã æ们å¨é£éæå®ï¼ä¸ä¸ªæ´æ¼äº® 主页约翰åä½ã