Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

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Îļþ¶ø¸Ä±äÒ³ÃæµÄÑùʽ¡£Èç¹ûËùÓÐÒ³Ã涼µ÷ÓÃͬһ¸öÑùʽ±íÎļþ£¬ÄÇô¸ÄÒ»¸öÑùʽ±íÎ


Ïà¹ØÎĵµ£º

cssÈçºÎ¿ØÖÆdiv¸ß¶ÈµÈÓÚÁíÒ»¸öDIVµÄ¸ß¶È?


ÈÃ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¿ò¼Ü»ã×Ü

Ò»¡¢YAML
´ó¼Ò±È½ÏÊìϤµÄÊÇjs¿ò¼Ü£¬ÀýÈçprototype¡¢JQueryѽ¡£ÆäʵXHTML+CSSÒ²ÊÇ
Óпò¼ÜµÄ£¬×îÖøÃûµÄ¿ÉÄܾÍÊÇYUIÁË£¬ÊÇyahoo¿ª·¢Ð¡×éµÄ¡£µ«ÊÇÄǸöÉÔ΢ÓеãÅӴ󣬶øÇÒÇ£³¶µ½Ò»Ð©µÄJS¿ò¼Ü¡£ËùÒÔ¸Õ¿ªÊ¼Ñо¿µÄʱºò¿ÉÄÜÉÔ΢ÓеãÀÛ¡£
¶øÕâ¸öYAML¾Í±È½Ïµ¥´¿ÁË¡£¿ÉÄÜÊÇÏÖÔÚ»¹ÔÚ·¢Õ¹³õÆÚËùÒÔ¿ò¼ÜºÜ¼òµ¥£¬¶«Î÷²»¶à£¬¶ÔXHMTL+CSS¿ò¼ ......

Ò»¸ö²»´íµÄCSSÑùʽ°´Å¥

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ò»¸ö±È½Ï²»´íµÄC ......

CSS ´¹Ö±¾ÓÖÐ

1.ͼƬµÄ´¹Ö±¾ÓÖÐ
  .box
{
/*·ÇIEµÄÖ÷Á÷ä¯ÀÀÆ÷ʶ±ðµÄ´¹Ö±¾ÓÖеķ½·¨*/
display: table-cell;
vertical-align: middle; /*ÉèÖÃˮƽ¾ÓÖÐ*/
text-align: center;

/* Õë¶ÔIEµÄHack */
*display:block;
......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ