ÓÐÀûÓÚSEOµÄDIV+CSSµÄÃüÃû¹æÔòÊÕ¼¯
Ò»¡¢CSSÎļþ¼°ÑùʽÃüÃû
1¡¢CSSÎļþÃüÃû¹æ·¶
È«¾ÖÑùʽ£ºglobal.css£»
¿ò¼Ü²¼¾Ö£ºlayout.css£»
×ÖÌåÑùʽ£ºfont.css£»
Á´½ÓÑùʽ£ºlink.css£»
´òÓ¡Ñùʽ£ºprint.css£»
2¡¢CSSÑùʽÃüÃû¹æ·¶
±¾È˽¨Ò飺ÓÃ×Öĸ¡¢_ºÅ¹¤¡¢-ºÅ¡¢Êý×Ö×é³É£¬±ØÐëÒÔ×Öĸ¿ªÍ·£¬²»ÄÜΪ´¿Êý×Ö¡£ÎªÁË¿ª·¢ºóÑùʽÃû¹ÜÀí·½±ã£¬´ó¼ÒÇëÓÃÓÐÒâÒåµÄµ¥´Ê»òËõд×éºÏÀ´ÃüÃû£¬ÈÃͬÊÂÒ»¿´¾ÍÃ÷°×ÕâÑùʽ´ó¸ÅÊÇÄÄÒ»¿éµÄ£¬ÕâÑù¾Í½ÚÊ¡Á˲éÕÒÑùʽµÄʱ¼ä£¬ÀýÈ磺
Í·²¿ÑùʽÓÃheader£¬Í·²¿×ó±ß£¬¿ÉÒÔÓÃheader_left»òheader_l,»¹ÓÐÈç¹ûÊÇÁнṹµÄ¿ÉÒÔÕâÑù——box _1of3 (ÈýÁÐÖеĵÚÒ»ÁÐ)£¬box_2of3 (ÈýÁÐÖеĵڶþÁÐ)¡¢box _3of3 (ÈýÁÐÖеĵÚÈýÁÐ)£¬ÆäËüµÄÎҾͲ»Ò»Ò»¾ÙÀýÁË£¬´ó¼Ò°´ÒÔÉϹæÂÉÈ¥ÃüÃû¾ÍºÃ¡£
ÏÂÃæÁгöһЩ³£ÓõÄÃüÃûµ¥´Ê·½±ã´ó¼ÒʹÓ㺣¨ÒÔºó´ó¼Ò¹¤×÷¹ý³ÌÖÐÂýÂý°Ñ×Ô¼º»ýÀ۵ĵ¥´Ê¶¼¹²Ïí³öÀ´£¬ÄÇ´ó¼ÒµÄÃü¾Í»á¸ü¼ÓͳһÁË£¬¾Í²»»áÓÐÒ»Òå¶à´ÊµÄÇé¿öÁË¡££©
ÈÝ Æ÷£ºcontainer/box
Í· ²¿£ºheader
Ö÷ µ¼ º½£ºmainNav
×Ó µ¼ º½£ºsubNav
¶¥ µ¼ º½£ºtopNav
ÍøÕ¾±êÖ¾£ºlogo
´ó ¹ã ¸æ£ºbanner
Ò³ÃæÖв¿£ºmainBody
µ× ²¿£ºfooter
²Ë µ¥£ºmenu
²Ëµ¥ÄÚÈÝ£ºmenuContent
×Ó ²Ë µ¥£ºsubMenu
×Ӳ˵¥ÄÚÈÝ£ºsubMenuContent
ËÑ Ë÷£ºsearch
ËÑË÷¹Ø¼ü×Ö£ºkeyword
ËÑË÷·¶Î§£ºrange
±êÇ©ÎÄ×Ö£ºtagTitle
±êÇ©ÄÚÈÝ£ºtagContent
µ±Ç°±êÇ©£ºtagCurrent/currentTag
±ê¡¡ Ì⣺title
ÄÚ ÈÝ£ºcontent
ÁÐ ±í£ºlist
µ±Ç°Î»ÖãºcurrentPath
²à ±ß À¸£ºsidebar
ͼ ±ê£ºicon
×¢ ÊÍ£ºnote
µÇ ¼£ºlogin
×¢ ²á£ºregister
ÁÐ ¶¨ Ò壺column_1of3 (ÈýÁÐÖеĵÚÒ»ÁÐ)
column_2of3 (ÈýÁÐÖеĵڶþÁÐ)
column_3of3 (ÈýÁÐÖеĵÚÈýÁÐ)
¶þ¡¢idºÍclassµÄʹÓü°Çø±ð
ÎÒÃÇÖªµÀÔÚÑùʽ±í¶¨ÒåÒ»¸öÑùʽµÄʱºò£¬¿ÉÒÔ¶¨ÒåidÒ²¿ÉÒÔ¶¨Òåclass£¬ÀýÈ磺
ID·½·¨£º#test{color:#333333}£¬ÔÚÒ³ÃæÖе÷ÓÃ<div>ÄÚÈÝ<div>
CLASS·½·¨£º.test{color:#333333}£¬ÔÚÒ³ÃæÖе÷ÓÃ<div class="test">ÄÚÈÝ<div>
idÒ»¸öÒ³ÃæÖ»¿ÉÒÔʹÓÃÒ»´Î£¬class¿ÉÒÔ¶à´ÎÒýÓá£
ÎÒÔÚÒ³ÃæÖÐÓÃÁ˶à¸öÏàͬidÔÚIEÖÐÏÔʾҲÕý³££¬idºÍclassºÃÏóÃ»Ê²Ã´Çø±ð£¬Óöà¸öÏàͬidÓÐʲôӰÏìÂð£¿
Ò³Ãæ´æÔÚ¶à¸öÏàͬµÄIDÓ°Ïì¾ÍÊDz»ÄÜͨ¹ýW3µÄУÑé¡£
ÔÚÒ³ÃæÏÔʾÉÏ£¬Ä¿Ç°µÄä¯ÀÀÆ÷»¹¶¼ÔÊÐíÄã·¸Õâ¸ö´íÎó£¬Óöà¸öÏàͬID“Ò»°ãÇé¿öÏ”ҲÄÜÕý³£ÏÔʾ¡£µ«Êǵ±ÄãÐèÒªÓÃJavaScriptͨ¹ý
Ïà¹ØÎĵµ£º
ID.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="ID.css"?>
<bookdetail>
<book class="A" id="B1">
<author>²ÜÑ©ÇÛ</author>
<title>ºìÂ¥ÃÎ</title>
<price>60.00</price>
</book>
<book class="A ......
ÎÄÕÂÀ´×Ô£ºhttp://mayer.vokaa.com/archives/16
¶ÔÓÚÒ»¸öǰ¶Ë¹¤×÷Õߣ¬¶¼ÖªµÀ·ûºÏW3C¹æ·¶¶ÔÓÚÍøÒ³µÄ¿çä¯ÀÀÆ÷¹¤×÷´øÀ´ºÃ´¦£¬²¢ÄÜÊ¹ÍøÒ³ÔÚ²»Í¬µÄä¯ÀÀÆ÷Ö®¼ä»¥Ïà¼æÈÝ¡£
ÔÚÕâÀïÎÒÃÇÒ»Ò»Áоٻ¥ÁªÍøÉÏËùÌṩµÄ½â¾ö°ì·¨¼°Ò»Ð©ÎÒ¸öÈ˵Ľ¨Ò鼰ʵ¼ù°¸Àý¡£
Æäʵ£¬ÏÖÔÚ¶àÊýÈ˶¼»áʹÓÃHackµÄ·½·¨½â¾ö£¬µ«Èç¹ûDIVºÍCSSµÄ½á¹¹ÇåÎú¡¢ºÏÀí£ ......
The Lovely CSS Framework is a simple and straight forward way to easily
deploy an XHTML/CSS site.
Based on a simple 960px wide grid system, featuring multiple column layouts,
and various pluggable add-ons.
Õâ¸öÓÉ Constantinos Demetriadis ´´½¨µÄÏîÄ¿ÊÇÒ»¸ö CSS ¿ò¼Ü£¬»ùÓÚ 960.gs£¬»¹ÓµÓÐÒ»¸ö²å¼þ ......
×÷ÕߣºIIduce À´Ô´£ºcss9 ʱ¼ä£º2009-12-21 ÔĶÁ£º601 ´Î ÔÎÄÁ´½Ó [ÊÕ²Ø]
×î½ü²úÆ·ÖÐÐèÒª¼ÓÈë“Ò»¸öÁбíÏÔʾÑùʽ¿ìËÙÇл»”µÄ¹¦ÄÜ£¬ÕýºÃÔÚÕâÆªÎÄÕÂÖп´µ½ÁËËüµÄʵÏÖ·½Ê½£¬¸Ð¾õºÜ²»´í¡£
ÕâÆªÎÄÕ½²ÊöµÄÊÇÈçºÎͨ¹ýCSSºÍJQueryÀ´ÊµÏÖÔ ......