CSSÍøÒ³²¼¾ÖµÄ³£Óù淶
CSSÃüÃû¹æ·¶
Ò»£®ÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
¶þ£®³£ÓÃÀà/IDÃüÃû¹æ·¶
Ò³¡¡Ã¼£ºheader
ÄÚ¡¡ÈÝ£ºcontent
ÈÝ¡¡Æ÷£ºcontainer
Ò³¡¡½Å£ºfooter
°æ¡¡È¨£ºcopyright¡¡
µ¼¡¡º½£ºmenu
Ö÷µ¼º½£ºmainMenu
×Óµ¼º½£ºsubMenu
±ê¡¡Ö¾£ºlogo
±ê¡¡Óbanner
±ê¡¡Ì⣺title
²à±ßÀ¸£ºsidebar
ͼ¡¡±ê£ºIcon
×¢¡¡ÊÍ£ºnote
ËÑ¡¡Ë÷£ºsearch
°´¡¡Å¥£ºbtn
µÇ¡¡Â¼£ºlogin
Á´¡¡½Ó£ºlink
ÐÅÏ¢¿ò£ºmanage
……
³£ÓÃÀàµÄÃüÃûÓ¦¾¡Á¿ÒÔ³£¼ûÓ¢Îĵ¥´ÊΪ׼£¬×öµ½Í¨Ë×Ò׶®£¬²¢ÔÚÊʵ±µÄµØ·½¼ÓÒÔ×¢ÊÍ¡£¶ÔÓÚ¶þ¼¶Àà/IDÃüÃû£¬Ôò²ÉÓÃ×éºÏÊéдµÄģʽ£¬ºóÒ»¸öµ¥´ÊµÄÊ××ÖĸӦ´óд£ºÖîÈç“ËÑË÷¿ò”ÔòÓ¦ÃüÃûΪ“searchInput”¡¢“ËÑË÷ͼ±ê”ÃüÃûÕâ“searchIcon”¡¢“ËÑË÷°´Å¥”ÃüÃûΪ“searchBtn
CSSÊéд¹æ·¶¼°·½·¨
Ò». ³£¹æÊéд¹æ·¶¼°·½·¨
1. Ñ¡ÔñDOCTYPE£º
XHTML 1.0 ÌṩÁËÈýÖÖDTDÉùÃ÷¿É¹©Ñ¡Ôñ£º
¹ý¶ÉµÄ(Transitional):ÒªÇó·Ç³£¿íËɵÄDTD£¬ËüÔÊÐíÄã¼ÌÐøʹÓÃHTML4.01µÄ±êʶ(µ«ÊÇÒª·ûºÏxhtmlµÄд·¨)¡£ÍêÕû´úÂëÈçÏ£º
ÑϸñµÄ(Strict):ÒªÇóÑϸñµÄDTD£¬Äã²»ÄÜʹÓÃÈκαíÏÖ²ãµÄ±êʶºÍÊôÐÔ£¬ÀýÈç
¡£ÍêÕû´úÂëÈçÏ£º
¿ò¼ÜµÄ(Frameset):רÃÅÕë¶Ô¿ò¼ÜÒ³ÃæÉè¼ÆʹÓõÄDTD£¬Èç¹ûÄãµÄÒ³ÃæÖаüº¬Óпò¼Ü£¬ÐèÒª²ÉÓÃÕâÖÖDTD¡£ÍêÕû´úÂëÈçÏ£º
ÀíÏëÇé¿öµ±È»ÊÇÑϸñµÄDTD£¬µ«¶ÔÓÚÎÒÃÇ´ó¶àÊý¸Õ½Ó´¥web±ê×¼µÄÉè¼ÆʦÀ´Ëµ£¬¹ý¶ÉµÄDTD(XHTML 1.0 Transitional)ÊÇÄ¿Ç°ÀíÏëÑ¡Ôñ(°üÀ¨±¾Õ¾£¬Ê¹ÓõÄÒ²Êǹý¶ÉÐÍDTD)¡£ÒòΪÕâÖÖDTD»¹ÔÊÐíÎÒÃÇʹÓñíÏÖ²ãµÄ±êʶ¡¢ÔªËغÍÊôÐÔ£¬Ò²±È½ÏÈÝÒ×ͨ¹ýW3CµÄ´úÂëУÑé¡£
2. Ö¸¶¨ÓïÑÔ¼°×Ö·û¼¯£º
ΪÎĵµÖ¸¶¨ÓïÑÔ£º
ΪÁ˱»ä¯ÀÀÆ÷ÕýÈ·½âÊͺÍͨ¹ýW3C´úÂëУÑ飬ËùÓеÄXHTMLÎĵµ¶¼±ØÐëÉùÃ÷ËüÃÇËùʹÓõıàÂëÓïÑÔ£»È磺
³£ÓõÄÓïÑÔ¶¨Ò壺
±ê×¼µÄXMLÎĵµÓïÑÔ¶¨Ò壺
Õë¶ÔÀÏ°æ±¾µÄä¯ÀÀÆ÷µÄÓïÑÔ¶¨Ò壺
ΪÌá¸ß×Ö·û¼¯£¬½¨Òé²ÉÓÓutf-8”¡£
3. µ÷ÓÃÑùʽ±í£º
ÍⲿÑùʽ±íµ÷Óãº
Ò³ÃæÄÚǶ·¨£º¾ÍÊǽ«Ñùʽ±íÖ±½ÓдÔÚÒ³Ãæ´úÂëµÄheadÇø¡£ È磺
Íⲿµ÷Ó÷¨£º½«Ñùʽ±íдÔÚÒ»¸ö¶ÀÁ¢µÄ.cssÎļþÖУ¬È»ºóÔÚÒ³ÃæheadÇøÓÃÀàËÆÒÔÏ´úÂëµ÷Óá£
ÔÚ·ûºÏweb±ê×¼µÄÉè¼ÆÖУ¬ÍƼöʹÓÃÍⲿµ÷Ó÷¨£¬¿ÉÒÔ²»ÐÞ¸ÄÒ³ÃæÖ»ÐÞ¸Ä.cssÎļþ¶ø¸Ä±äÒ³ÃæµÄÑùʽ¡£Èç¹ûËùÓÐÒ³Ã涼µ÷ÓÃͬһ¸öÑùʽ±íÎļþ£¬ÄÇô¸ÄÒ»¸öÑùʽ±íÎ
Ïà¹ØÎĵµ£º
ÈÃleftµÄ¸ß¶ÈµÈÓÚ centerµÄ¸ß¶È..........
<div id=left></div>
<div id=center></div>
<script type="text/javascript">
document.getElementById("left").style.height = document.getElementById("center").offsetHeight + "px";
</script> ......
ÓÃCSSÈÃÔªËؾÓÖÐÏÔʾ²¢²»ÊǼþºÜ¼òµ¥µÄÊÂÇ顣ͬÑùµÄCSS¾ÓÖÐÉèÖÃÔÚ²»Í¬ä¯ÀÀÆ÷ÖеıíÏÖÒ²¸÷ÓÐǧÇï¡£±¾ÎľͽéÉÜÁËÔÚCSSÖг£¼ûµÄ¼¸ÖÖÈÃÔªËØˮƽ¾ÓÖÐÏÔʾµÄ·½·¨¡£
¡¡¡¡1.ʹÓÃ×Ô¶¯Íâ±ß¾àʵÏÖ¾ÓÖÐ
¡¡¡¡CSSÖÐÊ×Ñ¡µÄÈÃÔªËØˮƽ¾ÓÖеķ½·¨¾ÍÊÇʹÓÃmarginÊôÐÔ—½«ÔªËصÄmargin-leftºÍmargin-rightÊôÐÔÉèÖÃΪauto¼´¿É¡£ÔÚʵ¼ÊʹÓà ......
Ч¹ûͼ£º
csstest.css
*{
margin-left:0;
margin-top:0;
font-size:12px;
color:White;
}
#biaoge
{
/*¶ÔIDΪbiaogeµÄ±êǩʹÓôËCSS*/
width:405px; /*Áпí100£¬¼ÓÉÏÎå¸öΪ1µÄ±ß¾à£¬ËÄÁоÍÊÇ405*/
&nbs ......