Div+CSS 布局大全

??Div+CSS?甯?灞?澶у?ㄣ??

? ?寸????锛?Jesse?Zhao 缃?绔?锛?http://JesseZhao.cnblogs.com

绗??1?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

??褰?

div锛?css 甯?灞??ラ??................................................................................................................................. 4

XHTML 涓? css+div 甯?灞??荤?..................................................................................................................... 6?

缃?椤佃?捐??DIV+CSS????绗? 1 澶????╀?涔??风?? DOCTYPE ........................................................................... 9?

绗?涓?澶?............................................................................................................................................. 9

浠?涔??? DOCTYPE.............................................................................................................................. 10?

??浠????╀?涔??风?? DOCTYPE ........................................................................................................... 10

?琛ュ??............................................................................................................................................... 10?

缃?椤佃?捐??DIV+CSS????绗? 2 澶?浠?涔?????瀛?绌洪??................................................................................... 10?

缃?椤佃?捐??DIV+CSS????绗? 3 澶?瀹?涔?璇?瑷?缂???....................................................................................... 11?

缃?椤佃?捐??DIV+CSS????绗? 4 澶?璋??ㄦ?峰?琛?.......................................................................................... 11?

澶??ㄨ??ㄦ?峰?琛?............................................................................................................................ 11?

??琛ㄦ?璋??ㄦ?峰?琛?........................................................................................................................ 12?

缃?椤佃?捐??DIV+CSS????绗? 5 澶?head ?虹???朵?璁剧疆............................................................................... 12?

?惰??澶瑰??炬?? ................................................................................................................................ 12?

涓烘??绱㈠?????澶?????瀹?................................................................................................................. 12?

缃?椤佃?捐??DIV+CSS????绗? 6 澶?XHTML 浠ｇ??瑙??? .................................................................................... 12

1.????????璁伴?藉?椤昏???涓?涓??稿???缁?????璁?............................................................................?13

2.??????绛剧????绱???灞??х????瀛??藉?椤讳娇?ㄥ????.........................................................................?13

3.???????XML???璁伴?藉?椤诲????宓?濂??...............................................................................................?13

4.??????灞??у?椤荤?ㄥ???"??璧锋?ヂ?...............................................................................................?13

5.??????<??&?规??绗??风?ㄧ???琛ㄧず?...............................................................................................?13

6.缁?????灞??ц?涓?涓???.................................................................................................................?13

7.涓?瑕??ㄦ敞????瀹逛腑浣库??--??.......................................................................................................?13

? ? ? ? ?

? ?缃?椤佃?捐?÷?DIV+CSS????绗??7?澶?CSS??ラ???...............................................................................................?14

1.?烘??璇?娉?瑙???.............................................................................................................................?14

2.棰??插??.......................................................................................................................................?14

3.瀹?涔?瀛?浣?....................................................................................................................................?14

绗??2?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

4.缇ら???╁??...................................................................................................................................?14

5.娲剧?????╁???................................................................................................................................?14

6.id????╁??..................................................................................................................................?14

6.绫诲?????╁???................................................................................................................................?15

7.瀹?涔??炬?ョ???峰?.........................................................................................................................?15

? ?缃?椤佃?捐?÷?DIV+CSS????绗??8?澶?CSS?甯?灞??ラ??.......................................................................................?15

1.瀹?涔??DIV.....................................................................................................................................?15

2.CSS2???妯″???...............................................................................................................................?16

3.杈??╁?剧??涓?寰??ㄨ????澶????..........................................................................................................?17

? ?

? ?缃?椤佃?捐?÷?DIV+CSS????绗??9?澶?绗?涓?涓??CSS?甯?灞?瀹?渚?............................................................................?17

1.纭?瀹?甯?灞?....................................................................................................................................?18

2.瀹?涔??body??峰?...........................................................................................................................?18

3.瀹?涔?涓昏????div..........................................................................................................................?18

4.100%????搴?楂?搴?.......................................................................................................................?20?

缃?椤佃?捐?÷?DIV+CSS????绗??10?澶?????搴?楂?搴?........................................................................................?20?

缃?椤佃?捐??IV+CSS????绗??11?澶?涓??ㄨ〃?肩??????..................................................................................?21

1.涓??ㄨ〃?肩??????(绾靛??)..............................................................................................................?21

2.涓??ㄨ〃?肩??????(妯???)..............................................................................................................?22

? ?缃?椤佃?捐?÷?DIV+CSS????绗??12?澶??￠????甯歌???璇?..................................................................................?24

1.XHTML??￠???.................................................................................................................................?24

2.CSS2??￠??...................................................................................................................................?25

? ? ? CSS???????????宸?................................................................................................................................?25

? ? ? WEB????板??渚???绋?.................................................................................................................................?30

?Div+CSS?甯?灞??ラ?ㄦ??绋?...........................................................................................................................?37

绗??3?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

div锛?css?甯?灞??ラ??

浣?姝ｅ?ㄥ????CSS?甯?灞???锛???涓???杩?涓??藉???ㄦ???＄函?CSS?甯?灞?锛???甯告??涓ょ????甸?荤?浣???瀛??锛?

绗?涓?绉????芥??浣?杩?娌℃????瑙Ｂ?CSS?澶???椤甸?㈢?????????ㄤ?????浣???椤甸?㈡?翠?琛ㄧ?版??????锛?浣?搴?褰?????????瀹圭??璇?涔???缁???锛? ?跺??????瀵硅??涔???缁???娣诲???CSS??杩?绡???绔?灏???璇?浣?搴?璇ユ???锋???HTML?缁???????

???绉???????浣?瀵归?ｄ???甯哥??????琛ㄧ?板?灞???渚?濡?锛?cellpadding,??hspace[x1]???align="left"绛?绛?)??????绛?锛?涓??ラ??璇?杞??㈡??瀵瑰???浠?涔??CSS?璇??ャ??褰?浣?瑙ｅ?充?绗?涓?绉???棰?锛??ラ??浜?濡?浣?缁?????浣????HTML锛?????缁??轰?涓???琛??璇?????哄???ョ??琛??板??х?ㄤ?涔??CSS??ヤ唬?裤??

缁??????HTML

??浠??ㄥ??瀛??缃?椤靛?朵??讹??绘??????????涔?璁捐?★??????ｄ??剧????瀛?浣???棰??层??浠ュ??甯?灞??规????跺????浠????Photoshop

?????Fireworks??诲?烘?ャ?????叉??灏??俱??????????杩?缂?杈??HTML?灏?????璁捐?¤???琛ㄧ?板?ㄩ〉?????

濡???浣?甯???浣????HTML?椤甸?㈢???CSS?甯?灞?(???CSS-friendly???)锛?浣???瑕???澶撮???ワ???涓???????澶?瑙???锛?瑕???????浣???椤甸????瀹圭??璇?涔???缁?????

澶?瑙?骞朵???????瑕?????涓?涓?缁?????濂界???HTML?椤甸?㈠??浠ヤ互浠讳?澶?瑙?琛ㄧ?板?烘?ワ?CSS Zen Garden???涓?涓??稿????渚?瀛???CSS Zen

Garden?甯??╂??浠???缁?璁よ???奥?CSS???寮哄ぇ??????

HTML?涓?浠?浠????ㄧ?佃??灞?骞?涓???璇汇??浣????photoshop?绮惧?璁捐?＄???婚?㈠???戒??芥?剧ず???PDA??绉诲?ㄧ?佃????灞?骞???璇绘?轰???浣? ??涓?涓?缁?????濂界???HTML?椤甸?㈠??浠ラ??杩??CSS???涓???瀹?涔?锛??剧ず?ㄤ换浣??版?癸?浠讳?缃?缁?璁惧?涓???

寮?濮????? 棣???瑕?瀛??浠?涔???"缁???"锛?涓?浜?浣?瀹朵?绉颁?涓?璇?涔?"??杩?涓???璇?????????浣???瑕?????浣?????瀹瑰??锛?浠ュ??姣?????瀹规???＄??

????锛??跺?????规??杩?浜???瀹圭????寤虹??璧风?稿????HTML?缁????? 濡???浣???涓??ヤ?缁???????瑙???浣???椤甸?㈢???锛?浣????藉??扮被浼艰??风??????锛?

??蹇???绔??瑰??绉?涓婚〉?㈠??瀹?绔??瑰?艰??(涓昏????)?瀛?????

??绱㈡? ???藉??渚?濡?璐??╄溅???堕?跺??椤佃??(?????????虫?寰?澹版??)

??浠???甯搁?????DIV???绱??ュ?杩?浜?缁???瀹?涔??烘?ワ?绫讳技杩??凤?

杩?涓???甯?灞?锛???缁?????杩???涓?涓?瀵瑰??瀹瑰????璇?涔?璇存????褰?浣???瑙ｄ?浣???缁???锛?灏卞??浠ュ??瀵瑰????ID????DIV?涓???DIV?瀹瑰?ㄤ腑 ??浠ュ????浠讳???瀹瑰??锛?涔???浠ュ?濂????涓??DIV????瀹瑰????浠ュ????浠绘?????HTML???绱?---??棰???娈佃?姐???剧????琛ㄦ?笺????琛ㄧ??绛??? ?规??涓??㈣?茶堪??锛?浣?宸茬??ラ??濡?浣?缁??????HTML锛??板?ㄤ???浠ヨ?琛?甯?灞????峰?瀹?涔?浜???姣?涓?涓???瀹瑰???藉??浠ユ?惧?ㄩ〉???浠?

浣??版?癸?????瀹?杩?涓?????棰??层??瀛?浣???杈规???????浠ュ??瀵归?灞??х??绛???浣跨?ㄩ???╁?ㄦ??浠剁?濡???浜?

id?????绉版???у?舵??涓???瀹瑰??????娈???杩?缁?杩?涓???瀹瑰??濂?涓??DIV?骞跺??涓???涓????id,浣?灏卞??浠ョ???CSS????╁?ㄦ?ョ簿纭?瀹?涔?姣?涓?

涓?椤甸?㈠??绱???澶?瑙?琛ㄧ????????棰?????琛ㄣ???剧?????炬?ユ????娈佃?界??绛???渚?濡?浣?涓?header???涓?涓??CSS?瑙???锛?灏卞??浠ュ???ㄤ???浜?

#content??????剧??瑙?????

绗??4?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

???涓?涓?渚?瀛???锛?浣???浠ラ??杩?涓???瑙????ュ??涔?涓?????瀹瑰???????炬?ユ?峰???绫讳技杩??凤?#globalnav a:link??????#subnav

a:link?????#content a:link??浣?涔???浠ュ??涔?涓?????瀹瑰??涓??稿????绱????峰?涓?涓??枫??渚?濡?锛???杩?#content p???#footer p??? ??瀹?涔?#content???#footer?涓??p????峰???浠?缁???涓?璁诧?浣???椤甸?㈡???卞?剧?????炬?ャ????琛ㄣ??娈佃?界??缁?????锛?杩?浜???绱???韬?骞朵?浼?瀵规?剧ず?ㄤ?涔?缃?缁?璁惧?涓?(PDA?杩??????烘????缃?缁??佃?)??褰卞??锛?瀹?浠???浠ヨ?瀹?涔?涓轰换浣???琛ㄧ?板?瑙???

涓?涓?浠?缁?缁????????HTML?椤甸?㈤??甯哥????锛?姣?涓?涓???绱??借??ㄤ?缁?????????褰?浣??崇缉杩?涓?涓?娈佃?斤?涓???瑕?浣跨???blockquote???绛撅???瑕?浣跨???p???绛撅?骞跺?孤?p???涓?涓??CSS????margin?瑙???灏卞??浠ュ???扮缉杩???????p???缁???????绛撅?margin???琛ㄧ?板??э????? 灞?浜??HTML锛?????灞?浜??CSS??(杩?灏辨??缁???浜?琛ㄧ?扮???稿??绂?)

??濂界??????HTML?椤甸?㈠????涔?娌℃??琛ㄧ?板??х????绛俱??浠ｇ????甯稿共??绠?娲???渚?濡?锛???????浠ｇ??<table width="80%" cellpadding="3" align="left">锛??板?ㄥ??浠ュ?????HTML?涓???<table>锛??????у?惰〃?扮??涓?瑗块?藉???奥?CSS?涓??伙???缁????????HTML?涓?锛?table?灏辨??琛ㄦ?硷???涓????朵?浠?涔?(姣?濡?琚??ㄦ?ュ?灞???瀹?浣?)??

浜茶??瀹?璺典?涓?缁?????

涓??㈣?寸?????????烘????缁???锛?瀹???搴??ㄤ腑锛?浣???浠ユ?规????瑕??ヨ??村??瀹瑰????甯稿父浼??虹?奥?DIV?宓?濂??????碉?浣?浼?????

"Container"灞?涓??????跺??灞?锛?缁???绫讳技杩??凤?

</div>

<ul>another list</ul>

</div>

宓?濂????div???绱???璁镐?瀹?涔??村????CSS?瑙????ユ?у?惰〃?帮?渚?濡?锛?浣???浠ョ?#navcontainer?涓?涓?瑙???璁╁??琛ㄥ??筹???缁?

#globalnav?涓?涓?瑙???璁╁??琛ㄥ?宸????缁?#subnav????list????涓?瀹??ㄤ?????琛ㄧ?般?? ??SS??挎???缁??规?

涓??㈢????琛ㄥ?甯??╀????CSS??挎???缁??规?锛?

HTML?灞??т互???稿?瑰????CSS??规?

HTML?灞????CSS??规? 璇存??

align="left"

align="right" float: left;

float: right;?浣跨???CSS???浠ユ诞??浠讳???绱?:?剧????娈佃?姐??div????棰???琛ㄦ?笺????琛ㄧ??绛? 褰?浣?浣跨???float?灞??э?蹇?椤荤?杩?涓?娴??ㄥ??绱?瀹?涔?涓?涓?瀹藉害??

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0;?浣跨???CSS, margin???浠ヨ?剧疆?ㄤ换浣???

绱?涓?,?涓?浠?浠????body???绱?.?撮??瑕???锛?浣???浠ュ??????瀹???绱????top, right, bottom????left????margin??笺??

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339; a:hover: #999; a:active: #00f;

???HTML?涓?锛??炬?ョ??棰??蹭?涓郝?body???涓?涓?灞??у?煎??涔????翠釜椤甸?㈢???炬?ラ??奸?戒??枫??浣跨???CSS??????╁???椤甸??????ㄥ??

???炬?ユ?峰???浠ヤ?涓??枫??

bgcolor="#FFFFFF" background-color: #fff;????CSS?涓?锛?浠讳???绱??藉??浠ュ??涔?????棰??诧?涓?浠?浠?灞???浜??body????table

??绱???

bordercolor="#FFFFFF" border-color: #fff;?浠讳???绱??藉??浠ヨ?剧疆杈规?(boeder)锛?浣???浠ュ????瀹?涔??top, right, bottom

???left

绗??5?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

cellspacing="3" border-width: 3px;????CSS锛?浣???浠ュ??涔??table???杈规?涓虹?涓??峰?锛?涔???浠ュ????瀹?涔??top, right, bottom

and left?杈规???棰??层??灏哄?稿???峰???

浣???浠ヤ娇???table, td or th?杩?浜????╁??

濡???浣???瑕?璁剧疆??杈规?????锛???浠ヤ娇???CSS?瀹?涔?锛??border-collapse: collapse;

<br clear="all"> clear: left; clear: right; clear: both;

璁稿??2????????3???甯?灞??戒娇???float?灞??ф?ュ??浣???濡???浣??ㄦ诞?ㄥ?涓?瀹?涔?浜?????棰??叉?????????剧??锛?浣???浠ヤ娇???clear

灞??? cellpadding="3" vspace="3"

hspace="3" padding: 3px;????CSS锛?浠讳???绱??藉??浠ヨ?惧???padding?灞??э????凤?padding???浠ュ????璁剧疆?top, right, bottom

and left??padding????????????align="center" text-align: center; margin-right: auto; margin-left: auto;

Text-align??????ㄤ?????.

璞÷?div锛?p?杩??风????绾ф?ㄦ????浠ラ??杩??margin-right: auto;????margin-left: auto;?ユ按骞冲?涓? 涓?浜?浠や汉???剧????宸у??宸ヤ???澧?

?变?娴?瑙??ㄥ?孤?CSS???????涓?瀹???锛???浠????跺??涓?寰?涓?????涓?浜???宸?hacks)??寤虹??涓?绉???澧?(Workarounds)?ヨ?┞?CSS?瀹???浼?缁??规????风????????渚?濡???绾у??绱????朵警??瑕?浣跨?ㄦ按骞冲?涓?????宸э???妯″???bug?????宸х??绛???????杩?浜???宸ч?藉???Molly Holzschlag?????绔???Integrated Web Design: Strategies for Long-Term CSS Hack Management??涓???璇??璇存????

???涓?涓??充??CSS???宸х??璧?婧?绔??规???Big John????Holly Bergevin?????Position is Everything????

XHTML?涓??css+div?甯?灞??荤?

xml(extensible Markup Language)???虹?帮?缁???????妗ｅ???版????浜?涓?涓????ㄧ????绉???搴????煎?锛?涓?浠?浠?搴??ㄥ???web?涓?锛?涔??? 浠ュ??ㄥ?ㄤ换浣??版?广??????绉颁负???姐??

XHTML????The Extensible HyperText Markup Language????╁???璇?璇?瑷???缂╁???????HTML4.0????虹?涓?锛????XML???瑙???瀵瑰?惰? 琛??╁?锛?寰??颁??XHTML??瀹?瀹??奥?HTML????XML???杩?娓°??

CSS????Cascading Style Sheets?灞????峰?琛ㄧ??缂╁????绾??CSS?甯?灞?涓?缁???寮??XHTML??哥????藉府?╄?捐?″???绂诲?瑙?涓?缁???锛?浣跨???圭??璁块????缁存?ゆ?村??瀹规????

1)涓洪〉?㈡坊??姝ｇ‘???DOCTYPE

DOCTYPE????document type???绠?????涓昏??ㄦ?ヨ?存??浣??ㄧ???XHTML??????HTML???浠?涔???????娴?瑙??ㄦ?规??浣??DOCTYPE?瀹?涔???

DTD(??妗ｇ被??瀹?涔?)?ヨВ??椤甸??唬????

XHTML1.0???渚?浜?涓?绉??DOCTYPE??????╋?

(1)杩?娓″??锛?Transitional?锛?--浣跨?ㄩ??甯告??????

<!DOCTYPE????????????????? html?????????????????????? PUBLIC????????????????????"-//W3C//DTD?????????????????????? XHTML?????????????????? 1.0

Transitional//EN"?????????????????? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)涓ユ?煎??锛?Strict?锛?

<!DOCTYPE??????????? html??????????????? PUBLIC??????????????"-//W3C//DTD??????????????? XHTML???????????? 1.0??????????????? Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1?????????? -strict.dtd">

绗??6?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

(3)妗??跺??锛?Frameset?锛?

<!DOCTYPE????????????????? html????????????????????? PUBLIC????????????????????"-//W3C//DTD?????????????????????? XHTML?????????????????? 1.0

Frameset//EN"?????????? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2)璁惧??涓?涓???瀛?绌洪?达?Namespace锛?

?存?ュ???DOCTYPE?澹版?????㈡坊??濡?涓?浠ｇ??锛?

涓?涓??namespace????堕????绱?绫诲????灞??у??瀛???涓?涓?璇?????DTD锛?namespace?澹版????璁镐???杩?涓?涓??ㄧ嚎?板???????ヨ????浣???

namespace????瑕??ф?疯??ヤ唬??灏卞??浠ャ??

3)澹版??浣???缂???璇?瑷?

涓轰?琚?娴?瑙??ㄦ?ｇ‘瑙ｉ??????杩???璇??￠??锛????????XHTML???妗ｉ?藉?椤诲０??瀹?浠???浣跨?ㄧ??缂???璇?瑷???浠ｇ??濡?涓?锛?

杩???澹版????缂???璇?瑷???绠?浣?涓????GB2312锛?浣?濡?????瑕??朵?绻?浣???瀹癸???浠ュ??涔?涓郝?BIG5??

4)?ㄥ???瀛?姣?涔???????????绛?

XML?瀵瑰ぇ灏???????????锛???浠ワ?XHTML?涔???澶у??????哄?????????????XHTML???绱???灞??х????瀛??藉?椤讳娇?ㄥ?????????浣??? ??妗ｅ?琚??W3C??￠??璁や负??????????渚?濡?涓??㈢??浠ｇ????涓?姝ｇ‘??锛?

5)涓哄?剧??娣诲???alt?灞???

涓烘?????剧??娣诲???alt?灞??с??alt?灞??ф??瀹?浜?褰??剧??涓??芥?剧ず???跺??灏辨?剧ず渚??挎?㈡????锛?杩??峰??瀵规?ｅ父?ㄦ?峰????????锛?浣?瀵?绾?????娴?瑙??ㄥ??浣跨?ㄥ?骞???璇绘?虹???ㄦ?锋?ヨ?存???冲?抽??瑕?????????娣诲??浜??alt?灞??э?浠ｇ????浼?琚??W3C?姝ｇ‘?ф?￠????杩???娉ㄦ???? ????浠?瑕?娣诲??????涔????alt?灞??э?璞′??㈣??风????娉?姣?????涔?锛?

姝ｇ‘????娉?锛?

6)缁?????灞??у?煎??寮???

???HTML?涓?锛?浣???浠ヤ???瑕?缁?灞??у?煎??寮??凤?浣??????XHTML?涓?锛?瀹?浠?蹇?椤昏???寮??枫??杩?蹇?椤荤?ㄧ┖?煎??寮?灞??с?? 渚?锛?<hr width="75%"size="7"/>?杩?涔???涓?姝ｇ‘??

7)?抽??????????绛?

???XHTML?涓?锛?姣?涓?涓???寮?????绛鹃?藉?椤诲?抽????绌烘??绛句?瑕??抽??锛??ㄦ??绛惧熬?ㄤ娇?ㄤ?涓?姝ｆ?????"/"?ュ?抽??瀹?浠???宸便??渚?濡?锛?

<br />

8)?惰??澶瑰??炬??

渚?濡?锛?棣????朵?涓?涓??16x16????icon??炬??锛??藉??涓郝?favicon.ico锛??惧?ㄦ?圭??褰?涓????跺??灏?涓??㈢??浠ｇ??宓??ヂ?head??猴?

9)???CSS?瀹?涔???绱?澶?瑙?

???css?甯?灞???涓?涓?濂藉?????浠ユ?归??瀵归〉?㈣?琛?淇??癸?瀹??藉???妗ｇ?????琛ㄧ?板???绂诲??ワ???杞诲伐浣????????″?ㄧ??璐??凤?澧???绔??圭???╁??藉????搴??ㄣ??

css???涓??哄??绌烘?煎??澶у?????锛?涓??㈡??涓?浜??虹???褰?绾?

(1)棰??插??

绗??7?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

棰??插?煎??浠ョ???RGB??煎??锛?渚?濡?锛?color : rgb(255,0,0)锛?涔???浠ョ?ㄥ????杩??跺??锛?灏辫薄涓????瀛??color:#FF0000??濡?????

??杩??跺?兼????瀵归??澶?????浠ョ????锛?????涓??枫??渚?濡?:#FF0000???浠ュ????#F00??浣?濡???涓???澶?灏变???浠ョ????锛?渚?濡?#FC1A1B?蹇?椤???婊″??浣???

(2)瀹?涔?瀛?浣?

web??????ㄨ??濡?涓?瀛?浣?瀹?涔??规?锛?

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica,?瀹?浣?,sans-serif; }

瀛?浣????ф?????虹??椤哄????ㄣ??濡????ㄦ?风??璁＄???哄?????Lucida Grande?瀛?浣?锛???妗ｅ?琚???瀹?涓郝?Lucida Grande??娌℃????璇?锛? 灏辫???瀹?涓郝?Verdana?瀛?浣?锛?濡???涔?娌℃???Verdana锛?灏辨??瀹?涓郝?Lucida?瀛?浣?锛?渚?姝ょ被???锛?

Lucida Grande?瀛?浣??????Mac OS X锛?

Verdana?瀛?浣????????????Windows?绯荤?锛?

Lucida??????UNIX??ㄦ??

"瀹?浣?"????涓???绠?浣??ㄦ??

濡????????虹??瀛?浣??戒??界?????榛?璁ょ???sans-serif?瀛?浣??戒?璇?璋???

(3)缇ら???╁??褰???涓???绱??峰?灞??т??锋?讹???浠ュ?卞??璋??ㄤ?涓?澹版??锛???绱?涔??寸?ㄩ???峰????锛?锛?

p, td, li { font-size : 12px ; }

(4)娲剧?????╁????浠ヤ娇?ㄦ淳?????╁?ㄧ?涓?涓???绱?????瀛???绱?瀹?涔??峰?锛?渚?濡?杩??凤?

li strong { font-style : italic; font-weight : normal锛?}

灏辨??缁??li?涓??㈢??瀛???绱??strong?瀹?涔?涓?涓???浣?涓???绮????峰???

(5)id????╁??

???CSS?甯?灞?涓昏??ㄥ?"div"?ュ???帮????div????峰???杩?"id????╁???ュ??涔???渚?濡???浠?棣???瀹?涔?涓?涓?灞?

?跺???ㄦ?峰?琛ㄩ??杩??峰??涔?锛?

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

?朵腑"menubar"??浣???宸卞??涔????id???绉般??娉ㄦ???ㄥ???㈠??"#"?枫??

id????╁?ㄤ????锋????娲剧??锛?渚?濡?锛?

#menubar p { text-align : right; margin-top : 10px; }

杩?涓??规?涓昏??ㄦ?ュ??涔?灞????ｄ?姣?杈?澶???锛???澶?涓?娲剧??????绱???

(6)绫诲?????╁??

???CSS????ㄤ?涓??瑰?澶磋〃绀虹被?????╁?ㄥ??涔?锛?渚?濡?锛?

.14px {color : #f60 ;font-size:14px ;}

?ㄩ〉??腑锛????class= "绫诲????"???规?璋????

杩?涓??规?姣?杈?绠????垫椿锛???浠ラ???舵?规??椤甸?㈤??瑕??板缓?????ゃ??

(7)瀹?涔??炬?ョ???峰?

CSS?涓??ㄥ??涓?浼?绫绘?ュ??涔??炬?ョ???峰?锛???????锛?a:link??a:visited??a:hover????a : active锛?渚?濡?锛?

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

浠ヤ?璇??ュ????瀹?涔?浜??"?炬?ャ??宸茶?块??杩????炬?ャ??榧??????ㄤ??规?躲???逛?榧????????峰???娉ㄦ??锛?蹇?椤绘??浠ヤ?椤哄???锛?????

?剧ず???藉??浣?棰??崇??涓?涓??枫??璁颁?瀹?浠???椤哄?????LVHA????

绗??8?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

(8)缁???浣跨?ㄩ???╁?ㄥ????绮捐?寸??璁捐?℃????

?ㄦ?浜????炬?浠ｆ?挎??????搴???琛ㄥ??娌??风??榛??广??绔??孤?http://marine.happycog.com/

?????css?瑙?????璇?绫诲??灞????inventory?????搴???琛ㄣ??

ul.inventory{

list-style:disc url(/images/common/lister2.gig) inside;}

瀹???璋??ㄦ??璁?

<li><a href="/angelfish" target="_blank" rel="external nofollow" >Angelfish</a>(67 items)</li>

<li><a href="/angeld" target="_blank" rel="external nofollow" >Angels/Frogfish</a>(35 items)</li>

<li><a href="/anthias" target="_blank" rel="external nofollow" >Angelfish</a>(5526 items)</li>

<li><a href="/basslets" target="_blank" rel="external nofollow" >Angelfish</a>(15 items)</li>

<ul>

(9)缂╁???????ч『?堕????椤哄?

margin:25px 0 25px 0;

(10)琛?楂?

line-height:150%?璇存??琛?璺?涓烘?ｅ父???150%

10)缁?????浠ｇ???div(division)??id??class

?ㄥ??浠??ヤ功??绱у?????xhtml锛??存???虹??浣跨???css.

(1)缁??????id???绛撅?涓??class??????哄??锛?

濡???浣???灞??ч〉?㈠????浜?涓?涓??div锛?瀹????id?涓?content",瀹?灏变????芥?????涓?涓??div??????朵???绱??ユ???稿??????瀛????稿??锛?

class?灞??у??浠ュ?ㄦ??涓?椤甸??腑涓?娆″??涓?娆″?颁娇?ㄣ??

(2)id???瑙???

涓?涓??id??煎?椤荤?ㄤ?涓?瀛?姣?????涓???绾垮?澶达?瀹?涓??界?ㄤ?涓??板??杩?琛?寮?澶达??跺??璺???瀛?姣????板????涓???绾裤??绌烘?煎??杩?瀛?

绗??芥??涓???璁哥????

11锛??朵?濂界??缃?绔???浠ュ?奥?w3c?杩?琛??????℃??ttp:validator.w3.org http://jigsaw.w3.org/css-validator/

缃?椤佃?捐?÷?DIV+CSS????绗??1?澶????╀?涔??风???DOCTYPE

??瑷?

澶у?跺ソ锛?杩?涓?绯诲????绔??????挎?疯??宸卞?朵?杩?涓?绔??圭??杩?绋?缂???????涔????挎?蜂?涓??存病???朵?杩?涓?涓???姝ｇ?????web???????缃?绔??? ?板?ㄨ竟?????藉?璧???杈瑰?朵?锛????舵??杩?绋?涓???蹇?寰???缁?楠?璁板?涓??ワ?甯???瀵瑰ぇ瀹舵???瑰府?┿??濂戒?锛?璁╂??浠?寮?濮???

绗?涓?澶?

寮?濮??朵?绗?????????绔??癸?绗?涓?浠朵???灏辨??澹版??绗?????宸遍??瑕????DOCTYPE?? ?ョ????绔?棣?椤靛??浠ｇ??锛???浠ョ???扮??涓?琛?灏辨??锛?

<!DOCTYPE???????????? html???????????????? PUBLIC???????????????"-//W3C//DTD???????????????? XHTML?????????????? 1.0???????????????? Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

??寮?涓?浜?绗?????????绔??癸?渚?濡??????web?璁捐?¤蒋浠跺??????Macromedia锛?璁捐?″ぇ甯??Zeldman???涓?浜虹?绔?锛?浼????板???风??浠ｇ???? ?????浜?绗?????????绔???渚?濡??k10k.net)??浠ｇ????濡?涓?锛?

绗??9?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<!DOCTYPE????????????? html?????????????????? PUBLIC????????????????"-//W3C//DTD?????????????????? XHTML??????????????? 1.0?????????????????? Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

?ｄ?杩?浜?浠ｇ????浠?涔???涔?锛?涓?瀹?瑕??剧疆??锛?

浠?涔????DOCTYPE

涓??㈣?浜?浠ｇ????浠?绉板???DOCTYPE?澹版????DOCTYPE????document type(??妗ｇ被??)??绠???锛??ㄦ?ヨ?存??浣??ㄧ???XHTML??????HTML???浠? 涔???????

?朵腑???DTD(渚?濡?涓?渚?涓????xhtml1-transitional.dtd)????妗ｇ被??瀹?涔?锛????㈠????浜???妗ｇ??瑙???锛?娴?瑙??ㄥ氨?规??浣?瀹?涔????DTD

?ヨВ??浣?椤甸?㈢????璇?锛?骞跺??板?烘?ャ??

瑕?寤虹??绗?????????缃?椤碉?DOCTYPE?澹版????蹇?涓???灏????抽??缁????ㄥ??锛??ら??浣????XHTML?纭?瀹?浜?涓?涓?姝ｇ‘???DOCTYPE锛?????浣????? 璇????CSS??戒?浼???????

XHTML 1.0???渚?浜?涓?绉??DTD?澹版????渚????╋?

路??????杩?娓＄??(Transitional):瑕?姹???甯稿?芥?剧???DTD锛?瀹???璁镐?缁х画浣跨???HTML4.01?????璇?(浣???瑕?绗????xhtml?????娉?)??瀹? ?翠唬??濡?涓?锛?

<!DOCTYPE???????????? html???????????????? PUBLIC???????????????"-//W3C//DTD???????????????? XHTML?????????????? 1.0???????????????? Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

路??????涓ユ?肩??(Strict):瑕?姹?涓ユ?肩???DTD锛?浣?涓??戒娇?ㄤ换浣?琛ㄧ?板?????璇???灞??э?渚?濡?<br>??瀹??翠唬??濡?涓?锛?

<!DOCTYPE html PUBLIC?"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

路??????妗??剁??(Frameset):涓??ㄩ??瀵规??堕〉?㈣?捐?′娇?ㄧ???DTD锛?濡???浣???椤甸??腑??????妗??讹???瑕????ㄨ?绉??DTD??瀹??翠唬?? 濡?涓?锛?

<!DOCTYPE????????????? html?????????????????? PUBLIC????????????????"-//W3C//DTD?????????????????? XHTML??????????????? 1.0?????????????????? Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

??浠????╀?涔??风???DOCTYPE

???虫???靛??舵??涓ユ?肩???DTD锛?浣?瀵逛???浠?澶у??板???ヨЕ?web???????璁捐?″??ヨ?达?杩?娓＄???DTD(XHTML 1.0 Transitional)?????? ???抽??????????绔?锛?浣跨?ㄧ??涔???杩?娓″???DTD)????涓鸿?绉??DTD?杩???璁告??浠?浣跨?ㄨ〃?板?????璇?????绱???灞??э?涔?姣?杈?瀹规????杩?

W3C???浠ｇ???￠????

娉??涓??㈣?寸??"琛ㄧ?板?????璇???灞????????ｄ?绾?绮圭?ㄦ?ユ?у?惰〃?扮???tag锛?渚?濡??ㄤ???????琛ㄦ?笺??????棰??叉??璇?绛??????XHTML?涓???璇????ㄦ?ヨ〃绀虹?????锛???涓????ㄦ?ュ???拌〃?板舰寮?锛???浠?杩?娓＄??????????缁?瀹??版?版????琛ㄧ?扮?稿??绂汇????涓?姣??癸?浜轰?妯＄?规?㈣。????妯＄?瑰氨濂芥???版??锛?琛ｆ??????琛ㄧ?板舰寮?锛?妯＄?瑰??琛ｆ??????绂荤??锛?杩??蜂?灏卞??浠ラ?????㈣。????????

?ヂ?HTML4?涓?锛??版????琛ㄧ?版??娣锋???ㄤ?璧风??锛?瑕?涓?娆℃?ф??釜琛ㄧ?板舰寮???甯稿?伴?俱???靛?碉????规?借薄浜?锛?杩?涓?姒?蹇甸??瑕???浠??ㄥ??ㄨ?绋?涓???姝ラ?浼???

琛ュ??

DOCTYPE?澹版??蹇?椤绘?惧?ㄦ??涓?涓??XHTML???妗ｆ??椤堕????ㄦ????浠ｇ??????璇?涔?涓???

缃?椤佃?捐?÷?DIV+CSS????绗??2?澶?浠?涔?????瀛?绌洪??

DOCTYPE?澹版??濂戒互??锛??ヤ??ョ??浠ｇ????锛?

??甯告??浠??HTML4.0???浠ｇ??????<html>锛?杩?????"xmlns"??浠?涔????

杩?涓?"xmlns"???XHTML namespace???缂╁??锛?????"??瀛?绌洪??澹版??????瀛?绌洪?存??浠?涔?浣??ㄥ????挎?疯??宸辩????瑙ｆ??锛?

绗??10?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

?变??xml???璁镐???宸卞??涔???宸辩????璇?锛?浣?瀹?涔?????璇????朵?浜哄??涔?????璇??????界?稿??锛?浣?琛ㄧず涓???????涔???褰???浠朵氦?㈡????

?变韩???跺??灏卞?规??浜х????璇???涓轰??垮??杩?绉???璇?????锛?XML????ㄥ??瀛?绌洪?村０??锛???璁镐???杩?涓?涓?缃????????ヨ????浣?????璇???渚?濡?锛?

灏?????灏????藉??涔?浜?涓?涓??<book>???璇?锛?濡???灏???????瀛?绌洪?存???"http://www.xiaowang.com"?锛?灏???????瀛?绌洪?存??

"http://www.xiaoli.com"锛??ｄ?褰?涓や釜??妗ｄ氦?㈡?版???讹?涔?涓?浼?娣锋?<book>??璇?锛???涓哄??灞?浜?涓???????瀛?绌洪?淬?? ?撮??淇???瑙ｉ????锛???瀛?绌洪?村氨??缁???妗ｅ??涓?涓???璁帮???璇???浜猴?杩?涓???妗ｆ??灞?浜?璋???????涓?杩?杩?涓?"璋?"?ㄤ?涓?涓?缃????ヤ唬?裤???XHTML????HTML????XML杩?娓＄????璇?璇?瑷?锛?瀹???瑕?绗????XML???妗ｈ???锛???姝や???瑕?瀹?涔???瀛?绌洪?淬??????涓郝?XHTML1.0?涓??借??瀹?涔? ??璇?锛???浠ュ??????瀛?绌洪?撮?界?稿??锛?灏辨??"http://www.w3.org/1999/xhtml"??濡???浣?杩?涓?澶???瑙ｄ?涓?瑕?绱э??????舵?垫??浠???瑕??ф??浠ｇ??灏卞??浠ヤ???

???㈢???,??瀹?浣?????妗ｇ?ㄧ??浣?涓?????

缃?椤佃?捐?÷?DIV+CSS????绗??3?澶?瀹?涔?璇?瑷?缂???

绗?涓?姝ユ??瀹?涔?浣???璇?瑷?缂???锛?绫讳技杩??凤?

涓轰?琚?娴?瑙??ㄦ?ｇ‘瑙ｉ??????杩??W3C?浠ｇ???￠??锛????????XHTML???妗ｉ?藉?椤诲０??瀹?浠???浣跨?ㄧ??缂???璇?瑷?锛???浠?涓???浣跨???gb2312(绠? 浣?涓???)锛??朵?澶??借??瑷?椤甸????????界???Unicode??ISO-8859-1?绛?锛??规??浣?????瑕?瀹?涔??? ??甯歌??峰??涔?灏卞??浠ヤ???浣???瑕?琛ュ??璇存??????锛?XML???妗ｅ苟涓???杩??峰??涔?璇?瑷?缂?????锛?XML???瀹?涔??瑰?濡?涓?锛?

<?xml version="1.0" encoding="gb2312"?>

浣????Macromedia.com???棣?椤典唬??绗?涓?琛?灏卞??浠ョ??瑙?绫讳技??璇??ワ?杩?涔????W3C??ㄨ??浣跨?ㄧ??瀹?涔??规????ｄ负浠?涔???浠?涓??存?ラ????杩?绉??规??????????涓?浜?娴?瑙??ㄥ?规??????????涓?瀹???锛?涓??芥?ｇ‘??瑙ｈ??风??瀹?涔??规?锛?姣?濡??IE6/windows????浠ュ?ㄧ????杩?娓??规?涓?锛???浠?渚??舵?ㄨ??浣跨???meta??瑰???褰??讹?浣???浠ヤ袱绉??规??藉????

????绔?婧?浠ｇ??锛?浣?浼????拌??瑷?缂???瀹?涔????版?硅?澶?涓??ワ?

缃?椤佃?捐?÷?DIV+CSS????绗??4?澶?璋??ㄦ?峰?琛?

???web?????璁捐?＄?绔?锛?杩?娓＄???规?涓昏????????XHTML+CSS锛?css??峰?琛ㄦ??蹇?涓???灏?????杩?灏辫?姹?????缃?椤佃?捐?″?蹇?椤荤??缁?????SS锛?濡???浣?浠ュ??涓?甯哥????ｄ??板?ㄥ氨寮?濮?瀛???с??瑕??朵?绗????web???????缃?绔?锛?涓????CSS???璁捐?′??烘?浜???椤甸?㈢???? 浜?瀹?涓?锛?????琛ㄧ?扮???版?归?介??瑕????CSS??ュ???般????浠?浠ュ???戒??????table??ュ??浣???甯?灞?锛??板?ㄨ??圭???DIV??ュ??浣???甯?灞???杩? ????缁存?瑰???????锛?涓?寮?濮???浜?涓?涔??????靛?碉?浠讳????╅?戒????诲????锛?涓轰?浜???????甯??ョ??"??澶?"锛??惧?涓?浜?????浼?缁??? 娉????煎?????

澶??ㄨ??ㄦ?峰?琛?

?ㄤ互??锛???浠???甯搁?????2?绉??规?浣跨?ㄦ?峰?琛??

路??????椤甸?㈠??宓?娉?锛?灏辨??灏??峰?琛ㄧ?存?ュ???ㄩ〉??唬?????head??恒??绫讳技杩??凤?

路??????澶??ㄨ??ㄦ?锛?灏??峰?琛ㄥ???ㄤ?涓???绔???.css???浠朵腑锛??跺???ㄩ〉?⒙?head??虹?ㄧ被浼间互涓?浠ｇ??璋??ㄣ??

绗??11?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

?ㄧ?????web???????璁捐?′腑锛???浠?浣跨?ㄥ??ㄨ??ㄦ?锛?濂藉?涓?瑷????伙?浣???浠ヤ?淇??归〉?㈠??淇???css???浠惰???瑰??椤甸?㈢???峰???濡?

??????椤甸?㈤?借??ㄥ??涓?涓??峰?琛ㄦ??浠讹??ｄ??逛?涓??峰?琛ㄦ??浠讹???浠ユ?瑰????????浠剁???峰??????琛ㄦ?璋??ㄦ?峰?琛???ョ????浜?绗???????绔??圭????浠ｇ??锛?浣????界???帮??ㄨ??ㄦ?峰?琛ㄧ???版?规??濡?涓?2??ワ?

涓轰?涔?瑕???涓ゆ?″???

瀹???涓?涓??????典??ㄥ???娉?璋???灏辨??绗?涓???灏辫冻澶?浜?????杩???浣跨?ㄥ??琛ㄨ??ㄥ????涓?绉?绀轰????朵腑??"@import"?戒护?ㄤ?杈????峰?琛ㄣ????"@import"?戒护???netscape 4.0?????娴?瑙??ㄦ??????????涔?灏辨??璇达?褰?浣?甯?????浜????????netscape 4.0?娴?瑙??ㄤ腑?? ??锛???.0?浠ヤ????跺??娴?瑙??ㄤ腑???剧ず???跺??锛?浣???浠ラ????@import"?戒护?规?璋??ㄦ?峰?琛ㄣ??

缃?椤佃?捐?÷?DIV+CSS????绗??5?澶?head??虹???朵?璁剧疆

杩?浜???宸т富瑕?璁猜?meta???绛捐?剧疆??锛??跺??涓?绗????web??????崇郴涓?澶э???瑕?娉ㄦ???ㄦ??????"/"?抽????绛惧氨??浠ワ?浣????㈢?舵???ラ????绋?锛?灏卞??寰?璇??涓??瑰?с??

?惰??澶瑰??炬??

濡???浣?灏???绔????ユ?惰??澶癸???浠ョ???板?ㄦ?惰??澶圭???涔??????IE??炬??????浜???绔??瑰?????炬????瑕?瀹??拌??锋????寰?绠???锛?棣????朵? 涓?涓?16x16????icon??炬??锛??藉??涓郝?favicon.ico锛??惧?ㄦ?圭??褰?涓????跺??灏?涓??㈢??浠ｇ??宓??ヂ?head??猴?

路????????璁告??绱㈡?哄?ㄤ汉??绱㈢?????????炬?ャ??濡???浣??虫??浜?椤甸???琚???绱???ㄨ???????robots.txt??规?

路??????璁剧疆绔??逛???淇℃??

路??????璁剧疆绔??圭????淇℃??

路??????绔??圭??绠?瑕?浠?缁?(?ㄨ??)

路??????绔??圭???抽??璇?(?ㄨ??)

??浠?缁?杩?涔?澶???琛ュ??璇存??锛????㈣?变??5????芥??璁猜?head??虹??浠ｇ??锛?瀹???椤甸?㈠??瀹硅?涓?瀛?????锛??靛?碉?涓?瑕??ワ??跺???head??烘??

??甯搁??瑕???锛???涓?涓?椤甸?㈢???head???浠ｇ??灏卞??浠ョ?ラ??璁捐?″??????涓?涓???

缃?椤佃?捐?÷?DIV+CSS????绗??6?澶?XHTML?浠ｇ??瑙???

?ㄥ?濮?姝ｅ???瀹瑰?朵?涔???锛???浠?蹇?椤诲??浜?瑙ｄ?涓??web????????充唬????瑙?????浜?瑙ｈ?浜?瑙?????浠ュ府?╀?灏?璧板集璺?,灏藉揩??杩?浠ｇ?? ?￠????

绗??12?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

1.????????璁伴?藉?椤昏???涓?涓??稿???缁?????璁?

浠ュ?????HTML?涓?锛?浣???浠ユ??寮?璁稿???绛撅?渚?濡?<p>??<li>??涓?涓?瀹???瀵瑰???</p>??</li>?ュ?抽??瀹?浠???浣????XHTML?涓?杩???涓???娉? ????XHTML?瑕?姹???涓ヨ皑??缁???锛???????绛惧?椤诲?抽????濡?????????涓???瀵圭????绛撅??ㄦ??绛炬??????涓?涓?"/"?ュ?抽??瀹???渚?濡?:

2.??????绛剧????绱???灞??х????瀛??藉?椤讳娇?ㄥ???

涓??HTML?涓?涓??凤?XHTML?瀵瑰ぇ灏???????????锛?<title>??<TITLE>??涓???????绛俱??XHTML?瑕?姹?????????绛惧??灞??х????瀛??藉?椤讳娇?ㄥ?????渚?濡?锛?<BODY>蹇?椤诲????<body>???澶у???澶规??涔???涓?琚?璁ゅ????锛???甯嘎?dreamweaver????ㄧ??????灞??у??瀛?"onMouseOver"?涔?蹇?椤讳慨?规??"onmouseover"??

3.???????XML???璁伴?藉?椤诲????宓?濂?

???峰??涓郝?XHTML?瑕?姹???涓ヨ皑??缁???锛???姝ゆ??????宓?濂??藉?椤绘??椤哄?锛?浠ュ????浠?杩??峰????浠ｇ??锛?

蹇?椤讳慨?逛负锛?

灏辨??璇达?涓?灞?涓?灞???宓?濂?蹇?椤绘??涓ユ?煎?圭О??

4.??????灞??у?椤荤?ㄥ???"??璧锋??

???HTML?涓?锛?浣???浠ヤ???瑕?缁?灞??у?煎??寮??凤?浣??????XHTML?涓?锛?瀹?浠?蹇?椤昏???寮??枫??渚?濡?:

<height=80>

蹇?椤讳慨?逛负锛?

<height="80">

?规?????碉?浣???瑕??ㄥ??у?奸??浣跨?ㄥ??寮??凤?浣???浠ョ??锛???寮??峰??浠ヤ娇??amp;apos;锛?渚?濡?锛?

<alt="say'hello'">

5.??????<??&?规??绗??风?ㄧ???琛ㄧず

路??????浠讳?灏?浜??凤?<锛?锛?涓?????绛剧??涓??ㄥ??锛??藉?椤昏?缂???涓?amp; l t ;

路??????浠讳?澶т??凤?>锛?锛?涓?????绛剧??涓??ㄥ??锛??藉?椤昏?缂???涓?amp; g t ;

路??????浠讳?涓??凤?&锛?锛?涓???瀹?浣???涓??ㄥ????锛??藉?椤昏?缂???涓?amp; a m p;

娉??浠ヤ?瀛?绗???存??绌烘?笺??

6.缁?????灞??ц?涓?涓???

XHTML?瑙?瀹?????灞??ч?藉?椤绘??涓?涓??硷?娌℃???肩??灏遍??澶???韬???渚?濡?锛?

蹇?椤讳慨?逛负锛?

7.涓?瑕??ㄦ敞????瀹逛腑浣库??--??

??--?????藉???????XHTML?娉ㄩ????寮?澶村??缁???锛?涔?灏辨??璇达??ㄥ??瀹逛腑瀹?浠?涓?????????渚?濡?涓??㈢??浠ｇ??????????:

?ㄧ???锋????绌烘?兼?挎?㈠???ㄧ????绾裤??

浠ヤ?杩?浜?瑙?????????涓??绘??杈?濂???锛?浣?杩?涓????芥??涓轰?浣挎??浠???浠ｇ????涓?涓?缁?涓?????涓???????锛?渚夸?浠ュ?????版?????╃?ㄣ??

绗??13?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

缃?椤佃?捐?÷?DIV+CSS????绗??7?澶?CSS??ラ??

?ㄤ?瑙Ｂ?XHTML?浠ｇ??瑙?????锛???浠?灏辫?杩?琛??CSS?甯?灞???棣?????浠?缁?涓?浜??CSS????ラ?ㄧ?ヨ????濡???浣?宸茬?寰?????浜?锛???浠ヨ烦杩?杩?涓? ??锛??存?ヨ??ヤ?涓?????

CSS????Cascading Style Sheets(灞????峰?琛???缂╁??????涓?绉?瀵孤?web???妗ｆ坊???峰???绠????哄?讹?灞?浜?琛ㄧ?板???甯?灞?璇?瑷???

1.?烘??璇?娉?瑙???

????涓?涓??稿???CSS???璇??ワ?

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

路???????朵腑"p"??浠?绉颁负"???╁??(selectors)锛???????浠?瑕?缁?"p"瀹?涔??峰?锛?

路???????峰?澹版?????ㄤ?瀵瑰ぇ????{}"涓?锛?

路??????COLOR????BACKGROUND?绉颁负"灞???(property)锛?涓???灞??т??寸?ㄥ????;"????锛?

路??????"#FF0000"??"#FFFFFF"??灞??х????value)??

2.棰??插??

棰??插?煎??浠ョ???RGB??煎??锛?渚?濡?锛?color : rgb(255,0,0)锛?涔???浠ョ?ㄥ????杩??跺??锛?灏辫薄涓????瀛??color:#FF0000??濡???????杩? ?跺?兼????瀵归??澶?????浠ョ????锛?????涓??枫??渚?濡?:#FF0000???浠ュ????#F00??浣?濡???涓???澶?灏变???浠ョ????锛?渚?濡?#FC1A1B?蹇?椤诲??婊???浣???

3.瀹?涔?瀛?浣?

web??????ㄨ??濡?涓?瀛?浣?瀹?涔??规?锛?

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica,?瀹?浣?,sans-serif; }

路??????瀛?浣????ф?????虹??椤哄????ㄣ??濡????ㄦ?风??璁＄???哄?????Lucida Grande?瀛?浣?锛???妗ｅ?琚???瀹?涓郝?Lucida Grande??娌℃?? ??璇?锛?灏辫???瀹?涓郝?Verdana?瀛?浣?锛?濡???涔?娌℃???Verdana锛?灏辨??瀹?涓郝?Lucida?瀛?浣?锛?渚?姝ょ被???锛?

路??????Lucida Grande?瀛?浣??????Mac OS?X锛?

路??????Verdana?瀛?浣????????????Windows?绯荤?锛?

路??????Lucida??????UNIX??ㄦ??

路??????"瀹?浣?"????涓???绠?浣??ㄦ??

路??????濡????????虹??瀛?浣??戒??界?????榛?璁ょ???sans-serif?瀛?浣??戒?璇?璋???

4.缇ら???╁??

褰???涓???绱??峰?灞??т??锋?讹???浠ュ?卞??璋??ㄤ?涓?澹版??锛???绱?涔??寸?ㄩ???峰????锛?锛??p, td, li { font-size : 12px ; }

5.娲剧?????╁?????浠ヤ娇?ㄦ淳?????╁?ㄧ?涓?涓???绱?????瀛???绱?瀹?涔??峰?锛?渚?濡?杩??凤??li strong { font-style : italic; font-weight : normal锛?}?灏辨??缁??li?涓??㈢??瀛???绱??strong?瀹?涔?涓?涓???浣?涓???绮????峰???

6.id????╁??

???CSS?甯?灞?涓昏??ㄥ?"div"?ュ???帮????div????峰???杩?"id????╁???ュ??涔???渚?濡???浠?棣???瀹?涔?涓?涓?灞?

?跺???ㄦ?峰?琛ㄩ??杩??峰??涔?锛?

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

?朵腑"menubar"??浣???宸卞??涔????id???绉般??娉ㄦ???ㄥ???㈠??"#"?枫??

绗??14?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

id????╁?ㄤ????锋????娲剧??锛?渚?濡?锛?

#menubar p { text-align : right; margin-top : 10px; }

杩?涓??规?涓昏??ㄦ?ュ??涔?灞????ｄ?姣?杈?澶???锛???澶?涓?娲剧??????绱???

6.绫诲?????╁??

???CSS????ㄤ?涓??瑰?澶磋〃绀虹被?????╁?ㄥ??涔?锛?渚?濡?锛?

.14px {color : #f60 ;font-size:14px ;}

?ㄩ〉??腑锛????class="绫诲????"???规?璋????

杩?涓??规?姣?杈?绠????垫椿锛???浠ラ???舵?规??椤甸?㈤??瑕??板缓?????ゃ??

7.瀹?涔??炬?ョ???峰?

CSS?涓??ㄥ??涓?浼?绫绘?ュ??涔??炬?ョ???峰?锛???????锛?a:link??a:visited??a:hover????a : active锛?渚?濡?锛?

浠ヤ?璇??ュ????瀹?涔?浜?"?炬?ャ??宸茶?块??杩????炬?ャ??榧??????ㄤ??规?躲???逛?榧????????峰???娉ㄦ??锛?蹇?椤绘??浠ヤ?椤哄???锛??????剧ず

???藉??浣?棰??崇??涓?涓??枫??璁颁?瀹?浠???椤哄?????LVHA????

?靛?碉???浜?杩?涔?澶?锛????瑰ご???э?瀹???涓??CSS???璇?娉?瑙???杩???寰?澶?锛?杩???????????涓?浜?甯哥?ㄧ??锛?姣?绔???浠???寰?搴?娓?杩?锛?涓????戒??ｅ??????瀛?:)

缃?椤佃?捐?÷?DIV+CSS????绗??8?澶?CSS?甯?灞??ラ??

CSS?甯?灞?涓?浼?缁?琛ㄦ??table)甯?灞???澶х???哄???ㄤ?锛????ョ??瀹?浣??芥?????ㄨ〃?硷???杩?琛ㄦ?肩???磋??????ㄦ???查???????GIF??剧?????у?舵??甯?灞????????磋?锛????板?ㄥ?????ㄥ?(div)?ュ??浣?锛???杩?灞????margin,padding,border?绛?灞??ф?ユ?у?剁???????磋???

1.瀹?涔??DIV

????涓?涓??稿????瀹?涔??div?渚?瀛?锛?

#sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px;

BORDER-TOP: #CCC 2px solid;

BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid;

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666;

TEXT-ALIGN: center;

LINE-HEIGHT: 150%; WIDTH:60%; }

璇存??濡?涓?锛?

路??????灞?????绉颁负?sample锛??ㄩ〉??腑??灏卞??浠ヨ??ㄨ?涓??峰???

路??????MARGIN?????灞???杈规?浠ュ?????绌虹?斤??ㄤ?椤佃竟璺?????涓??跺??灞??堕??涓?涓??磋???"10px 10px 10px 10px"????浠ｈ〃"涓? ?充?宸?(椤烘?堕???瑰??)??涓?杈硅?锛?濡????戒??凤???浠ョ缉????"MARGIN: 10px;"??濡???杈硅?涓洪?讹?瑕?????"MARGIN: 0px;"??

绗??15?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

娉ㄦ??锛?褰??兼???舵?讹??や??RGB?棰??插?悸?0%蹇?椤昏??惧???凤??朵????靛???㈠??浠ヤ?璺???浣?"px"??MARGIN?????????绱?锛?涓???

瀹?涔?棰??层??

路??????PADDING?????灞???杈规??板?????瀹逛??寸??绌虹?姐?????margin?涓??凤???????瀹?涓??充?宸?竟妗??板??瀹圭??璺?绂汇??濡????戒??凤? ??浠ョ缉????"PADDING:0px"????????瀹?宸?竟??浠ュ????"PADDING-LEFT: 0px;"??PADDING?????????绱?锛?涓??藉??涔?棰??层??

路??????BORDER?????灞???杈规?锛?"BORDER-RIGHT: #CCC 2px solid;"??瀹?涔?灞????宠竟妗?棰??蹭负"#CCC"锛?瀹藉害涓?2px"锛??峰?涓?

"solid"?寸嚎??濡???瑕???绾挎?峰???浠ョ??dotted"??

路??????BACKGROUND???瀹?涔?灞????????????2?绾у??涔?锛???瀹?涔??剧??????锛?????url(../images/bg_logo.gif)"?ユ??瀹??????剧?? 璺?寰?锛??舵?″??涔???????#FEFEFE"??"no-repeat"???????剧??涓???瑕???澶?锛?濡?????瑕?妯?????澶???repeat-x",绾靛????澶? ??repeat-y",??澶??烘弧?翠釜??????repeat"?????㈢??"right bottom;"?????????剧??浠??充?瑙?寮?濮???濡???娌℃??????

?剧????浠ュ??瀹?涔??????猜?BACKGROUND: #FEFEFE

路??????COLOR??ㄤ?瀹?涔?瀛?浣?棰??诧?涓?涓???宸茬?浠?缁?杩???

路??????TEXT-ALIGN??ㄦ?ュ??涔?灞?涓?????瀹规?????瑰?锛?center?灞?涓?,left?灞?宸?right?灞??炽??

路??????LINE-HEIGHT?瀹?涔?琛?楂?锛?150%????楂?搴?负????楂?搴????150%锛?涔???浠ュ??浣?锛?LINE-HEIGHT:1.5??????LINE-HEIGHT:1.5em锛? ?芥??涓??风????????

路??????WIDTH???瀹?涔?灞???瀹藉害锛???浠ラ???ㄥ?哄???硷?渚?濡??500px锛?涔???浠ラ???ㄧ?惧??姣?锛?璞¤?????"60%"??瑕?娉ㄦ??????:杩?涓?瀹藉害浠?浠???浣???瀹圭??瀹藉害锛?涓??????margin,border????padding??浣??ㄦ??浜?娴?瑙??ㄤ腑涓???杩?涔?瀹?涔???锛???瑕?浣?澶?璇?璇???

涓??㈡??杩?涓?灞???瀹???琛ㄧ???杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄?? 瀹癸?杩?????婕?绀哄??瀹癸?

杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸?杩?????婕?绀哄??瀹癸? 杩?????婕?绀哄??瀹?..

??浠???浠ョ???拌竟妗????2px????拌?诧??????剧???ㄥ?充?娌℃????澶?锛???瀹硅?绂讳???宸?竟妗??20px锛???瀹瑰?涓?锛?涓?????棰??崇??涓??枫??hoho锛? ?界?朵?濂界??锛?浣?瀹??????烘????锛????′?瀹?锛?浣?灏卞凡缁?瀛??涓??????CSS?甯?灞?????浜???灏辨??杩??凤?涓?绠??惧?э?(???????浠?涔?锛???涓?????灞?涓?灞?涔??寸??瀹?浣?????浼??ㄥ???㈤??姝ヨ?茶В??)

2.CSS2???妯″??

??浠??1996?骞绰?CSS1????ㄥ?猴?W3C?缁?缁?灏卞缓璁???????缃?椤典???瀵瑰???芥?惧?ㄤ?涓???(box)涓?锛?璁捐?″???浠ラ??杩???寤哄??涔??ユ?у?惰?涓? ????灞??э?杩?浜?瀵瑰??????娈佃?姐????琛ㄣ????棰????剧??浠ュ??灞?

????妯″??涓昏?瀹?涔???涓??哄??锛???瀹?content)??杈规?璺?(padding)??杈圭??(border)??杈硅?(margin)??涓??㈡??浠?璁茬???sample?灞?灏???涓?涓??稿????????瀵逛???瀛???锛?缁?甯镐???涓?娓?妤??margin锛?background-color锛?background-image锛?padding锛?content锛?border涔??寸??灞?娆°???崇郴???镐?褰卞????杩?????渚?涓?寮???妯″?????3D?绀烘???撅?甯???渚夸?浣?????瑙ｅ??璁板???

绗??16?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

3.杈??╁?剧??涓?寰??ㄨ????澶???

???XHTML+CSS?甯?灞?锛???涓?涓?????涓?寮?濮?璁╀?涓?涔???锛?搴?璇ヨ?存??涓?绉???缁存?瑰?涓?浼?缁?琛ㄦ?煎?灞?涓?涓??凤??ｅ氨??锛?????杈??╁?剧???界?ㄨ?????ュ???般??绫讳技杩??凤?

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

灏界?″??浠ョ????????存?ユ???ㄥ??瀹逛腑锛?浣?杩???涓??ㄨ??????杩?????"杈??╁?剧??"?????ｄ?涓???浣?涓洪〉?㈣?琛ㄨ揪????瀹圭??涓??ㄥ??锛???浠?浠??ㄤ?淇?楗般???撮???????????剧????渚?濡?锛??稿??涓????剧?????剧???伴?讳腑???剧??锛?涓??㈢???3d???妯″???剧???藉?浜???瀹圭??涓??ㄥ??锛?

瀹?浠???浠ョ?????????绱??存?ユ???ㄩ〉?㈤??锛????跺????绫讳技?logo锛???棰??剧??锛???琛ㄥ??缂??剧???藉?椤婚???ㄨ?????瑰??????朵??CSS???寮??剧ず??

杩??峰???????????2??癸?

路??????灏?琛ㄧ?颁?缁???褰诲??稿??绂???????璇诲???绡???绔?锛?????瑙ｈ〃?颁?缁????稿??绂汇??)锛????CSS??у?舵??????澶?瑙?琛ㄧ?帮?渚夸???????

路??????浣块〉?㈡?村?锋?????ㄦ?э??存??浜插??????渚?濡?锛??蹭汉浣跨?ㄥ?骞???璇绘?猴??ㄨ????????瀹??扮???剧??灏变?浼?琚???璇诲?烘?ャ??

缃?椤佃?捐?÷?DIV+CSS????绗??9?澶?绗?涓?涓??CSS?甯?灞?瀹?渚?

?ヤ??ュ?濮?瑕???姝ｈ?捐?″?灞?浜?????浼?缁????规?涓??凤?浣?棣???瑕??ㄨ??娴烽????澶ц?寸??杞?寤????筹??跺?????photoshop???瀹??诲?烘?ャ?? 浣????界???版???陈?web???????绔??瑰ぇ?藉??寸?锛???涓郝?web??????村?虫敞缁???????瀹癸?瀹???涓?瀹?涓?缃?椤电??缇?瑙?娌℃???规???茬??锛?浣?????涔?璁捐?″氨??涔?璁捐?★??ㄤ?缁?琛ㄦ?兼?规?瀹??扮??甯?灞?锛????DIV?涔???浠ュ???般????????涓?涓???????杩?绋?锛????DIV????????TABLE?涓?????宸ュ?凤?濡?浣?杩??ㄥ氨??浣????宠薄??浜???

绗??17?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

娉???ㄥ????搴??ㄨ?绋?涓?锛?DIV??ㄦ??浜??版?圭??纭?涓?濡?琛ㄦ?兼?逛究锛?姣?濡??????茬??瀹?涔???浣?浠讳?浜????芥??寰???澶憋??????ㄤ?浣???浠?

?煎?ゆ????濂斤?涓?缃????锛???浠?寮?濮?锛?

1.纭?瀹?甯?灞?

w3cn???????璁捐?¤???惧?涓?锛?

灞?

?ㄨ〃?肩??璁捐?℃?规???璇?锛?涓????芥??涓?涓?涓?涓?琛?甯??????? DIV? ??璇?锛???????浣跨?ㄤ????ュ?灞? , ??涓鸿????

2.瀹?涔??body??峰????瀹?涔??翠釜椤甸?㈢??body????峰?,浠ｇ??濡?涓?锛??body { MARGIN: 0px;

PADDING: 0px;

BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;

FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','瀹?浣?','?板??浣?',arial,verdana,sans-serif; COLOR: #666;

FONT-SIZE:12px;

LINE-HEIGHT:150%; }

浠ヤ?浠ｇ????浣??ㄥ?ㄤ?涓?澶╃????绋???璇??璇存??锛?澶у?跺?璇ヤ???灏辨???姐??瀹?涔?浜?杈规?杈硅?涓郝?0锛?????棰??蹭负#FEFEFE锛??????剧??涓?

bg_logo.gif锛??剧??浣?浜?椤甸?㈠?充?瑙?锛?涓???澶?锛?瀹?涔?浜?瀛?浣?灏哄?镐负?12px锛?瀛?浣?棰??蹭负#666;琛?楂??150%??

3.瀹?涔?涓昏????div

??娆′娇???CSS?甯?灞?锛????冲?????ㄥ?哄??瀹藉害??涓???甯?灞?(姣?????搴???杈ㄧ????璁捐?＄????,hoho锛???璇存???锋??锛???瀹??扮??????锛?澧????逛俊蹇???锛?)??????瀹?涔?宸?腑?崇??瀹藉害涓郝?200:300:280锛????CSS?涓?濡?涓?瀹?涔?:

#left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #CDCDCD;

}

#middle{ POSITION: absolute; LEFT:200px;

绗??18?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

TOP:0px;

WIDTH:300px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #DADADA;

}

#right{ POSITION: absolute; LEFT:500px;

TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #FFF; }

娉ㄦ??锛?瀹?涔?涓??????冲???div????介???ㄤ??POSITION: absolute;锛??跺??????瀹?涔?浜??LEFT:200px;TOP:0px;???LEFT:500px;TOP:0px;

杩???杩?涓?甯?灞????抽??锛??????ㄤ?灞???缁?瀵瑰??浣???瀹?涔?涓??村??璺?绂婚〉?㈠乏杈规??200px锛?璺?绂婚《???0px锛?瀹?涔??冲??璺?绂婚〉?㈠乏杈规?

500px锛?璺?绂婚《???0px锛??? 杩??跺???翠釜椤甸?㈢??浠ｇ????锛?

<!DOCTYPE???????????? html???????????????? PUBLIC???????????????"-//W3C//DTD???????????????? XHTML?????????????? 1.0???????????????? Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

</body>

</html>

杩??跺??椤甸?㈢??????浠?浠???浠ョ???颁?涓?骞跺?????拌?茬?╁舰锛???涓?涓??????俱??浣?????甯???楂?搴???婊″???锛???涔??????

绗??19?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

4.100%????搴?楂?搴?

涓轰?淇???涓????????风??楂?搴????灏?璇???left??#middle???#right?涓?璁剧疆"height:100%;"锛?浣????板???ㄦ病??棰??崇??????搴?楂?搴???????缁?杩?涓???灏?璇???锛?????濂界?姣?涓??div?涓?涓?缁?瀵归??搴?"height:1000px;"锛?骞朵???????瀹圭??澧???锛???瑕?涓???淇?姝ｈ?涓??笺???鹃??娌℃????娉?????搴?楂?搴????锛??????挎?疯??宸卞?????娣卞?ワ????颁?涓???????瑙ｅ?冲??娉?锛?瀹???涓??规??涓???瑕?璁剧疆?100%锛???浠?宸?缁?琚??table??缁寸??㈠お娣变?锛?杩?涓???娉??ㄤ?涓?????瀛??涓?璇??浠?缁???

缃?椤佃?捐?÷?DIV+CSS????绗??10?澶?????搴?楂?搴?

濡?????浠??冲???3???甯?灞?????????涓?琛?椤佃??锛??剧????涔?绫荤??淇℃????灏遍???板?椤诲?归??3???搴??ㄧ????棰??????table?甯?灞?涓?锛???浠???澶ц〃?煎?濂?灏?琛ㄦ?肩???规?锛???浠ュ??逛究瀵归?涓???锛??????div?甯?灞?锛?涓?????绔????ｏ???瀹归??浣?涓???锛?灏卞??惧?归????跺????浠?瀹? ?ㄥ??浠ュ?濂??div锛???涓????捐?涓?涓??DIV?涓?锛?灏卞???颁?搴??ㄥ?归???涓??㈡??瀹??颁?瀛?(?借?茶????妗?妯℃??涓?涓?椤甸??锛?

Body

杩?????#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}

杩?????#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF;?}????浜?#menu,#sidebar???#content

杩?????#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }

杩?????#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }锛???

??棰??茬?ㄧ????#main?????????

杩?????#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

杩?????涓昏???瀹癸??规????瀹硅???ㄩ??搴?楂?搴?

杩?????#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px;

WIDTH: 580px;?}?? 杩?涓?渚?瀛???椤甸??富瑕?浠ｇ??濡?涓?锛?

</div>

?蜂??峰?琛ㄩ?藉???ㄧ?稿???????浜??????瑰?ㄤ?#mainbox?灞?宓?濂?浜?#menu,#sidebar???#content?涓?涓?灞???褰?#content?????瀹瑰???锛?

#content???楂?搴?氨浼?澧?楂?锛?????mainbox???楂?搴??浼???寮?锛?#footer?灞?灏辫???ㄤ?绉汇??杩??峰氨瀹??颁?楂?搴???????搴??? ????煎?娉ㄦ??????锛?#menu???#content??芥??娴??ㄥ?ㄩ〉?㈠?抽??FLOAT: right;",#sidebar???娴??ㄥ??menu?灞???宸???FLOAT: left;"锛?杩???娴??ㄦ?瀹?浣?锛?杩???浠ラ???ㄧ?瀵瑰??浣??ュ???拌??风????????

杩?涓??规?瀛??ㄥ???涓???棰?锛?灏辨??渚у??#sidebar?????????娉??惧??涔??俱??涓?????瑙ｅ?冲??娉?灏辨?????body????????叉?ュ～??婊°??(涓???浣跨??mainbox????????诧???涓哄???Mozilla?绛?娴?瑙??ㄤ腑#mainbox????????插け????)?濂戒?锛?涓昏???妗??跺凡缁???寤哄??姣?,?╀???宸ヤ?????寰????㈡坊????????濡???浣?甯???灏?璇??朵?甯?灞?锛??ㄨ??????浠ヤ???绔?:

路??????CSS?甯?灞??16?渚?

路??????onestab:涓???澶???甯?灞?婕?绀?

路??????onestab:???变几灞???涓???寮?????

Tips:[onestab???"P.I.E"涓?棰?]?杩????村?绮惧僵浠?缁?锛??ㄨ???荤??????

绗??20?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

缃?椤佃?捐?÷?DIV+CSS????绗??11?澶?涓??ㄨ〃?肩??????

甯?灞???姝ユ??寤鸿捣?ワ???寮?濮?濉??????㈢????瀹广??棣?????瀹?涔??logo??剧??锛? ?峰?琛??#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

椤甸??唬??锛?<div id="logo"><a title="缃?椤佃?捐?″?" href="http://www.w3cn.org/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img height="80" alt="?炬?ュ??3cn.org

棣?椤? src="images/logo_w3cn_200x80.gif" width="200" /></a></div>

浠ヤ?浠ｇ???板?ㄥ?璇ュ?规????瑙ｃ???????CSS?瀹?涔?浜?涓?涓??logo???灞?锛??跺???ㄩ〉??腑璋??ㄥ??????瑕?璇存??????锛?涓轰?浣跨?椤垫???村ソ???? ?ㄦ?э?web?????瑕?姹?澶у?剁?????????灞?浜?姝ｅ???瀹圭???剧??锛???涓?涓??alt?灞??с??杩?涓??alt?灞??ф???ㄦ?ヨ?存???剧????浣???褰??剧??涓? ?芥?剧ず???跺??灏辨?剧ず?挎?㈡??瀛?)锛???浠ヤ?瑕???????????涔????剧????绉般??

?ヤ??ユ??瀹?涔???????

1.涓??ㄨ〃?肩??????(绾靛??)

??浠????ョ??????????缁?????锛?

路??????????????????????浠?涔???缃?绔?????

路??????????????????????浣跨?ㄦ??????濂藉?

路?????????????????????????疯?娓?

路???????????????????????稿?虫??绋?

路??????????????????????宸ュ??

路??????????????????????璧?婧????炬??

??甯告?规???浠??冲?宓?濂??2?灞?琛ㄦ?兼?ュ???拌??风??????锛??撮??绾块???ㄥ???td?涓?璁剧疆?????插苟???ヂ?1px?楂????????GIF??剧??瀹??帮????? ?茬??浜ゆ?挎?????????td????onmouseover?浜?浠跺???般??浣??ョ??????????椤甸??唬??锛?浣?浼????板????濡?涓????ワ?

<ul>

</ul>

</div>

娌℃???ㄤ换浣??table,???ㄧ??????搴???<li>锛??翠釜??????????瀹??扮??绉?瀵?瀹??ㄥ?ㄤ??id="menu"锛???浠????ョ???CSS?涓??充??menu???瀹? 涔?锛?

(1)棣???瀹?涔?浜??menu?灞???涓昏??峰?:

#menu {

MARGIN: 15px 20px 0px 15px;?? PADDING:15px;??? BACKGROUND: #dfdfdf;????????????????????????????????? /*瀹?涔?????棰???/

COLOR: #666;???? /*瀹?涔?瀛?浣?棰???/

BORDER:#fff 2px solid;??/*瀹?涔?杈规?涓郝?2px??借?茬嚎??/ WIDTH:160px;??????????????????????????????? /*瀹?涔???瀹圭??瀹藉害涓?60px*/

}

(2)?舵?″??涔???搴???琛ㄧ???峰?锛?

#menu ul {

绗??21?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

MARGIN: 0px;

PADDING: 0px;

BORDER: medium none; /*涓??剧ず杈规?*/ LINE-HEIGHT: normal;

LIST-STYLE-TYPE: none;

}

#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

璇存??锛?杩????ㄧ?????id????╁?ㄧ??娲剧???规?瀹?涔?(????绗??7?澶╋?CSS??ラ?ㄧ??浠?缁?)浜????menu?灞?涓???瀛???绱?<ul>??<li>???峰???

LIST-STYLE-TYPE: none?涓??ヨ〃绀轰????ㄦ??搴???琛ㄧ??榛?璁ゆ?峰?锛??筹?涓??剧ず灏????癸???浠????㈢?ㄨ??宸辩???炬???ヤ唬?垮????癸???

BORDER-TOP: #FFF 1px solid;??瀹?涔?浜?????涔??寸???1px??撮??绾裤??

(3)瀹?涔??onmouseover?????

#menu li a {

PADDING:5px 0px 5px 15px; DISPLAY: block;

FONT-WEIGHT: bold;

BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; WIDTH: 100%;

COLOR: #444;

TEXT-DECORATION: none;

}

#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }

瑙ｉ??濡?涓?锛?

路??????"display:block;"琛ㄧず灏???绛韭?a?褰?浣???绾у??绱??ユ?剧ず锛?浣垮??炬?ュ????涓?涓?????锛?

路??????"BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"杩?涓??ュ??涔?浜??夸唬?li???灏??? ?圭???炬????"transparent"??????涓洪????锛?"2px 8px"??瀹??炬????浣?缃???璺?宸?竟?2px锛?璺?涓?杈孤?8px??杩?涓??ヤ???浠ユ????

??????????ヂ?锛??"BACKGROUND-IMAGE:??url(images/icon_dot_lmenu.gif);??BACKGROUND-POSITION:??2px??8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"

路??????"#menu li a:hover"瀹?涔?浜?褰?榧???绉诲?ㄥ?伴?炬?ヤ?浠ュ????棰??插??????灏??炬????????

ok锛?涓??ㄨ〃?肩??????灏辫??峰???颁???澶у?跺??浠ユ???炬??瑙??帮????ュ?????HTML?????琛ㄧ?版?峰??ㄩ?ㄥ?ョ??惧?奥?CSS???浠堕???讳???椤甸??浠ｇ????绾??澶у??????杩??CSS?瑕?淇??硅?????峰?灏卞?绠???浜???

2.涓??ㄨ〃?肩??????(妯???)

涓??㈡??绾靛????????,濡???瑕??剧ず妯???????锛????li?涔???浠ュ??锛?褰??舵????浠ョ??锛?涓??㈢??轰唬??锛?????灏卞?ㄦ??椤甸《??

椤甸??唬??

<ul>

绗??22?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

</ul>

</div>

?峰?琛ㄤ唬??

#submenu {

MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666;

HEIGHT:25px; }

#submenu ul { CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px;

LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline;

}

#submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px;

TEXT-ALIGN: center}

#submenu li a { DISPLAY: block;

PADDING:2px 3px 2px 3px;

BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT:?bold;

WIDTH: 100%;

COLOR: #444;

TEXT-DECORATION: none;

}

#submenu li a:hover {

BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }

绗??23?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

#submenu ul li#one A { WIDTH: 60px}

#submenu ul li#two A { WIDTH: 80px}

#submenu ul li#three A { WIDTH: 80px}

#submenu ul li#four A { WIDTH: 90px}

#submenu ul li#five A { WIDTH: 80px}

#submenu ul li#six A { WIDTH: 80px}

#submenu ul li#seven A { WIDTH: 60px}

#submenu ul li#eight A { WIDTH: 90px}

#submenu ul li#nine A { WIDTH: 80px}

浠ヤ?浠ｇ??涓???涓?????浜???妯??????????抽???ㄤ?锛?瀹?涔?<li>?峰??剁??"FLOAT: left;"璇??ャ?????娉ㄦ???UL?瀹?涔?涓????DISPLAY:inline;?涓??ヨ〃绀哄??li?寮哄?朵?涓哄????瀵硅薄????锛?浠?瀵硅薄涓????よ?锛???淇?璁插氨???li?涓??㈣???瀹??版í????????浣?涔???浠ヨ薄渚?瀛?涓?瀹?涔?姣?涓?瀛???????瀹藉害锛??у?惰???????撮????濂戒?锛?浣?涔???浠ュ?ㄦ??璇?璇?锛????li?瀹??板??绉????风???????峰????Tips:濡???浣?瀛???????瀹藉害?诲??澶т?灞???瀹藉害锛?????浼????ㄦ??琛?锛??╃?ㄨ?涓???????浠ュ???板??涓???搴???琛ㄧ???2????????3???????锛? 杩??????ヂ?HTML?寰??惧???扮????

??璋⒙?zhuweiwei????烘í?????????bug锛??????7????6??ヤ慨姝ｃ??

缃?椤佃?捐?÷?DIV+CSS????绗??12?澶??￠????甯歌???璇?

杈????濂藉?澶╋???浠?????瀛??浣跨???XHTML+CSS??ラ???拌?捐?℃??浠???缃?绔????ｄ???浠?濡?浣??ラ????宸卞?朵???椤甸?㈢????绗????web?????锛?

W3C???涓?浜?蹇??胯??缃?绔???渚?浜??ㄧ嚎?￠??绋?搴?锛??ュ府?╂??浠?妫??ラ〉?㈡????????????锛?骞舵??渚?浜?淇?姝ｉ??璇???甯??╀俊????杩?浜??￠?? ??甯告?????????璋?璇?椤甸?㈢??涓?姝ヨ?????浜?????

1.XHTML??￠??

路???????￠??缃???锛?http://validator.w3.org/

路???????￠???瑰?:缃????￠??????浠朵?浼??￠??

?￠??????锛?浼??剧ず"This Page Is Valid XHTML 1.0 Transitional!",濡??撅?

?￠??澶辫触锛?浼??剧ず?村??￠????椤瑰????璇?淇℃??锛?濡??撅?

涓???????Show Source"??"Verbose Output"??浠ュ府?╀??惧?伴??璇?浠ｇ?????ㄨ?????璇???????

绗??24?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

XHTML??￠??甯歌???璇?????瀵圭?ц〃

路??????No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--??瀹?涔??DOCTYPE??

路??????No Character Encoding Found! Falling back to UTF-8.--??瀹?涔?璇?瑷?缂?????

路??????end tag for "img" omitted, but OMITTAG NO was specified--?剧????绛炬病????"/"?抽????

路??????an attribute value?specification must be an attribute value literal unless SHORTTAG YES is specified--

灞??у?煎?椤诲??寮??枫??

路??????element "DIV" undefined---DIV???绛句??界?ㄥぇ??锛?瑕??规??灏????div??

路??????required attribute "alt" not specified---?剧????瑕????alt?灞??с??

路??????required attribute "type" not specified---js??????CSS?璋??ㄧ????绛炬?浜??type?灞??с?? ?朵腑????甯歌?????璇?灏辨????绛剧??澶у?????棰?浜?????甯歌?浜???璇??芥???宠????锛?姣?濡?蹇?璁颁?涓?涓?</li>?朵?<li>??绛鹃?戒??ラ??锛???浠ヤ?瑕????颁???????璇?瀹虫??锛???甯歌В?充?涓?涓???璇?锛??朵?????璇?涔??芥病??浜???濡???浣???椤甸?㈤??杩??XHTML1.0??￠??锛???浠ュ?ㄩ〉??

涓??剧疆杩?涔?涓?涓??炬??锛??浠ｇ??濡?涓?锛?

<p>????? <a?????? href="http://validator.w3.org/check/referer" target="_blank" rel="external nofollow" ><img?????????????????? src="http://www.w3.org/Icons/valid-xhtml10"

alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>

2.CSS2??￠??

路???????￠??缃???锛?http://jigsaw.w3.org/css-validator/

路???????￠???瑰?:缃????￠??????浠朵?浼??￠?????存?ヨ创?ヤ唬???￠???￠??????锛?浼??剧ず"????????锛?姝ゆ??妗ｅ凡缁???杩??峰?琛ㄦ?￠??! ",hoho,?￠??淇℃??????涓???????濡??撅?

?￠??澶辫触锛?浼??剧ず涓ょ被??璇?锛???璇???璀???????璇?琛ㄧず涓?瀹?瑕?淇?姝ｏ???????娉???杩??￠??锛?璀???琛ㄧず??浠ｇ??涓?琚?? W3C? ?ㄨ?? , 寤鸿??淇? ?广??

CSS2??￠??甯歌???璇?????瀵圭?ц〃

路??????(??璇?)?????板???: color909090?涓???涓?涓??color??悸?: 909090 ---????杩??堕??插?煎?椤诲??"#"?凤???909090

路??????(??璇?)?????板???: margin-topUnknown dimension : 6pixels ---pixels?涓???涓?涓???浣??硷?姝ｇ‘??娉??6px

路??????(??璇?)灞????scrollbar-face-color?涓?瀛????: #eeeeee ---?瀹?涔?婊??ㄦ?￠??叉??????????灞???

路??????(??璇?)?悸?cursorhand?涓?瀛????: hand?????????灞??у?硷?淇??逛负?cursor:pointer

路??????(璀???)Line : 0 font-family:?寤鸿??浣???瀹?涓?涓?绉?绫绘??绉?浣?涓烘?????????┞?--W3C?寤鸿??瀛?浣?瀹?涔????跺??锛?????浠ヤ?涓? 绫诲????瀛?浣?缁???锛?渚?濡?"sans-serif"锛?浠ヤ?璇??ㄤ?????浣?绯荤?涓?锛?缃?椤靛??浣??借?借??剧ず??

路??????(璀???)Line : 0 can't find the warning message for otherprofile --琛ㄧず?ㄤ唬??涓?????????灞??ф???硷??￠??绋? 搴???娉??ゆ??????渚??稿???璀???淇℃????

???凤???杩?妫?楠???锛???浠ユ?剧疆涓?涓??CSS??￠????杩??炬??锛?浠ｇ??濡?涓?锛?

<p>??????? <a??????? href="http://jigsaw.w3.org/css-validator/" target="_blank" rel="external nofollow" >??????????????????? <img??????? style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>

CSS???????????宸?

??杩?,缁?甯告??????????涓?浜?宸ヤ?涓????扮???CSS???棰???浠?浠??绘??涓??藉?濂界???у?堵?CSS锛?褰卞???CSS??????????ャ?????ュ?????荤?涓?涓? ??璇??????甯??╁ぇ瀹舵?村??瀹规??浣跨???CSS??

绗??25?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

?????荤?浜???寮?濮?浣跨???CSS?甯?灞??规?浠ユ?ユ????????宸у???煎?规?规?锛????挎????杩?浜?涓?浣???浜?锛???浼????硅В??涓?浜??版??瀹规??????

??璇?(????????宸变???杩???)锛?濡???浣?宸茬????CSS?楂???锛?杩?浜?缁?楠???宸у???藉凡缁??界?ラ??锛?濡???浣????村???锛?甯?????浠ュ府??琛ュ????

涓?.浣跨???css?缂╁??

浣跨?ㄧ缉????浠ュ府?╁??灏?浣??CSS???浠剁??澶у?锛??村??瀹规????璇汇??css?缂╁????涓昏?瑙???璇峰??????甯哥???css?缂╁??璇?娉??荤???锛?杩???灏?涓?灞?寮???杩般??

浜?.??纭?瀹?涔???浣?锛??ら???间负?0

蹇?璁板??涔?灏哄?哥????浣????CSS??版??????????璇??????HTML?涓?浣???浠ュ?????width="100"锛?浣??????CSS?涓?锛?浣?蹇?椤荤?涓?涓???纭?????浣?锛? 姣?濡?锛?width:100px width:100em??????涓や釜渚?澶????靛??浠ヤ?瀹?涔???浣?锛?琛?楂????0??笺???ゆ?や互澶?锛??朵??奸?藉?椤荤揣璺???浣?锛?娉ㄦ??锛?涓?瑕??ㄦ?板?煎????浣?涔??村??绌烘?笺??

涓?.?哄??澶у???

褰????XHTML?涓?浣跨???CSS锛?CSS???瀹?涔?????绱???绉版???哄??澶у???????涓轰??垮??杩?绉???璇?锛???寤鸿????????瀹?涔???绉伴?介???ㄥ??????class???id????煎???HTML????XHTML?涓?涔????哄??澶у?????锛?濡???浣?涓?瀹?瑕?澶у???娣峰????锛?璇蜂?缁?纭?璁や????CSS???瀹?涔????XHTML???????绛炬??涓??寸????

??.??娑??class????id???????绱???瀹?

褰?浣???缁?涓?涓???绱?瀹?涔??class??????id锛?浣???浠ョ???ュ???㈢????绱???瀹?锛???涓郝?ID??ㄤ?涓?椤甸?㈤??????涓???锛????clas s???浠ュ?ㄩ〉??涓?澶?娆′娇?ㄣ??浣???瀹???涓???绱?姣?????涔???渚?濡?锛?

div#content { }

fieldset.details { }

??浠ュ????

#content { }

.details { }

杩??峰??浠ヨ????涓?浜?瀛?????

浜?.榛?璁ゅ??

??甯嘎?padding???榛?璁ゅ?间负?0锛?background-color???榛?璁ゅ?兼???transparent??浣????ㄤ?????娴?瑙??ㄩ?璁ゅ?煎???戒?????濡??????? ?茬??锛???浠ュ?ㄦ?峰?琛ㄤ?寮?濮?灏卞??瀹?涔???????绱????margin????padding??奸?戒负?0锛?璞¤??凤?

* { margin:0; padding:0;

}

??.涓???瑕???澶?瀹?涔???缁ф?跨????

CSS?涓?锛?瀛???绱????ㄧ户?跨?跺??绱???灞??у?硷?璞￠??层??瀛?浣?绛?锛?宸茬??ㄧ?跺??绱?涓?瀹?涔?杩???锛??ㄥ????绱?涓???浠ョ?存?ョ户?匡?涓???瑕? ??澶?瀹?涔???浣???瑕?娉ㄦ??锛?娴?瑙??ㄥ???界?ㄤ?浜?榛?璁ゅ?艰???浣???瀹?涔???

涓?.??杩?浼????????濡???瀵瑰??涓?涓???绱???瀹?涔???澶?绉?锛?浠ユ???ヨ?(??灏?涓?绾???瀹?涔?涓烘??浼???锛?渚?濡???杩?涔?涓?娈典唬???Update: Lorem ipsum dolor set

???CSS???浠朵腑锛?浣?宸茬?瀹?涔?浜???绱??p锛???瀹?涔?浜?涓?涓??class"update"

p {

绗??26?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

杩?涓や釜瀹?涔?涓?锛?class="update"灏?琚?浣跨?????涓郝?class?姣??p??磋???浣???浠ユ?ラ???W3C????? Calculating a selector??s specificity?? 浜?瑙ｆ?村???

??.澶????class?瀹?涔?

涓?涓???绛惧??浠ュ???跺??涔?澶?涓??class??渚?濡?锛???浠???瀹?涔?涓や釜?峰?锛?绗?涓?涓??峰?????涓?666锛?绗?浜?涓??峰????10 px???杈规???

.one{width:200px;background:#666;}

.two{border:10px solid #F00;}

?ㄩ〉??唬??涓?锛???浠???浠ヨ??疯???

杩??锋??缁????剧ず??????杩?涓??div??㈡??#666???????锛?涔????10px???杈规???????锛?杩??峰??????浠ョ??锛?浣???浠ュ?璇?涓?涓???

涔?.浣跨?ㄥ?????╁??descendant?selectors)

CSS???瀛???涓??ラ??浣跨?ㄥ?????╁?ㄦ??褰卞??浠?浠???????????涔?涓???瀛????╁?ㄥ??浠ュ府?╀???绾?ぇ?????class?瀹?涔?????浠??ョ??涓??㈣? 娈典唬??锛?

<ul>

</ul>

</div>

杩?娈典唬?????CSS?瀹?涔???锛?

div#subnav ul { }

div#subnav ul li.subnavitem { }

div#subnav ul li.subnavitem a.subnavitem { }

div#subnav ul li.subnavitemselected { }

div#subnav ul li.subnavitemselected a.subnavitemselected { }

浣???浠ョ?ㄤ??㈢???规??夸唬涓??㈢??浠ｇ??

</ul>

?峰?瀹?涔???锛?

#subnav { }

#subnav li { }

#subnav .sel { }

#subnav .sel a { }

?ㄥ?????╁?ㄥ??浠ヤ娇浣???浠ｇ?????CSS??村??绠?娲????村??瀹规????璇汇?????.涓???瑕?缁??????剧??璺?寰???寮??仿?涓轰?????瀛???锛???寤鸿??涓?瑕?缁??????剧??璺?寰???寮??凤???涓哄??蜂???蹇?椤荤????渚?濡?锛??background:url("images

margin:0?auto;

}

浣????IE5/Win?涓??芥?ｇ‘?剧ず杩?涓?瀹?涔?锛???浠????ㄤ?涓???甯告???ㄧ????宸ф?ヨВ?筹????text-align?灞??с??灏辫薄杩??凤?

body {

text-align:center;

}

#wrap {

width:760px;

margin:0?auto;

text-align:left;

}

绗?涓?涓??body????text-align:center;?瑙???瀹?涔??IE5/Win?涓??body?????????绱?灞?涓?(?朵?娴?瑙??ㄥ????灏???瀛?灞?涓?)?锛?绗?浜?涓?

text-align:left;??灏?#warp?涓?????瀛?灞?宸???

??浜?.瀵煎??Import)???????CSS

??涓鸿??????娴?瑙??ㄤ??????CSS锛?涓?涓???甯哥????娉???浣跨??import???宸ф?ユ???CSS?????璧锋?ャ??渚?濡?锛?

@import url("main.css");

?惰??锛?杩?涓??规?瀵孤?IE4?涓?璧蜂????杩?璁╂??寰???澶寸?间?涓??靛???????ユ???ㄨ??风????娉?锛?

@import "main.css";

杩??峰氨??浠ュ???IE4?涓?涔??????CSS?浜?锛??靛?碉?杩?????浜??5?涓?瀛????????充?瑙?import?璇?娉???璇??璇存??锛???浠ョ??杩?????centricle??s

css filter chart??

????.??瀵孤?IE???浼???

??浜??跺??锛?浣???瑕?瀵孤?IE?娴?瑙??ㄧ???bug?瀹?涔?涓?浜??瑰????瑙???锛?杩?????澶?澶????CSS???宸?hacks)锛?????浣跨?ㄥ?朵腑??涓ょ??规?锛?涓? 绠″井杞??ㄥ?冲???甯????IE7 beta??????????村ソ???????CSS锛?杩?涓ょ??规??芥????瀹??ㄧ????

路??????1.娉ㄩ?????规?

o?????(a)???IE?涓?????涓?涓??CSS?瀹?涔?锛?浣???浠ヤ娇?ㄥ?????╁??child selector):

html>body p {

}

o?????(b)涓??㈣?涓???娉??????IE?娴?瑙??ㄥ??浠ョ??瑙?瀵瑰?朵?娴?瑙??ㄩ?介????)

* html p {

}

o?????(c)杩???浜??跺??锛?浣?甯????IE/Win????????IE/Mac?????锛?浣???浠ヤ娇??????绾???宸э?

* html p {

绗??29?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

declarations

}

路??????2.?′欢娉ㄩ??(conditional comments)???规?

???涓?绉??规?锛???璁や负姣??CSS?Hacks??村??缁?寰?璧疯??楠?灏辨?????ㄥ井杞???绉???灞??ф?′欢娉ㄩ??(conditional comments)?? ?ㄨ?涓??规?浣???浠ョ??IE?????瀹?涔?涓?浜??峰?锛???涓?褰卞??涓绘?峰?琛ㄧ??瀹?涔???灏辫薄杩??凤?

<!--[if IE]>

<![endif]-->

??涓?.璋?璇???宸э?灞???澶?澶э?

褰?璋?璇??CSS???????璇?锛?浣?灏辫?璞℃????宸ヤ汉锛???琛??????CSS?浠ｇ????????甯稿?ㄥ?洪??棰???灞?涓?瀹?涔?涓?涓?????棰??诧?杩??峰氨?藉????????板?????澶?澶х┖?淬????浜?浜哄缓璁????border锛?涓??????典?????浠ョ??锛?浣???棰???锛????跺???border?浼?澧?????绱???灏哄?革?border-top

???boeder-bottom?浼??村??绾靛???margin????硷???浠ヤ娇???background??村??瀹??ㄤ???

???涓?涓?缁?甯稿?洪??棰???灞??ф???outline??outline???璧锋?ヨ薄?boeder锛?浣?涓?浼?褰卞????绱???灏哄?告????浣?缃???????灏??版?瑙??ㄦ????

outline?灞??э??????ラ?????????Safari??OmniWeb?????Opera??

????.CSS?浠ｇ??涔????峰?

?ㄥ???CSS?浠ｇ?????跺??锛?瀵逛?缂╄?????琛???绌烘?硷?姣?涓?浜烘??姣?涓?浜虹??涔???涔??????ㄧ?杩?涓???瀹?璺靛??锛????冲?????ㄤ??㈣??风??涔????峰?锛?

selector1, selector2 { property:value;

}

褰?浣跨?ㄨ????瀹?涔??讹?????甯稿?姣?涓????╁?ㄥ??????涓?琛?锛?杩??锋?逛究???CSS???浠朵腑?惧?板??浠????ㄦ????涓?涓????╁?ㄥ??澶ф????涔??村?? 涓?涓?绌烘?硷?姣?涓?瀹?涔?涔???????涓?琛?锛????风?存?ュ?ㄥ??у?煎??锛?涓?瑕???绌烘?笺?? ??涔????ㄦ??涓?灞??у?煎???㈤?藉?????凤??界?惰???涓???璁告????涓?涓?灞??у?煎???㈠??浠ヤ??????凤?浣???濡???浣?瑕????版?峰??跺?规??蹇?璁?琛ヤ????疯??浜х????璇?锛???浠ヨ????藉??姣?杈?濂姐??

????锛??抽????澶ф??????????涓?琛???

WEB????板??渚???绋?

???Web?寮?????浜哄??涓?瀹??戒???复涓?涓??卞?????鹃?锛??ｅ氨?????般????纭?锛??稿?逛??Windows?妗??㈠??ㄧ?搴??ヨ?诧?Web?搴??ㄧ?搴? ?????版??绉?绉????讹?????浜哄???ㄩ」??寮???杩?绋?涓?缁?甯镐????扮?ㄦ?疯??锋???ｆ?风????姹?.???杩?妗??㈠??ㄥ?????浜洪?戒???甯哥????姘??舵?ヨ〃??Active Report?涔?绫荤???ヨ〃?т欢锛?瀹?浠?涓?浠???绠????垫椿??璁捐?＄??????村?锋????甯稿己澶х???ヨ〃???斤??芥弧瓒冲??绉??ヨ〃 ?????伴??姹??????Web?搴??ㄥ????涓哄?剁?规???????版?瑰?锛????藉?绘??朵???瑙ｅ?虫?规????板?ㄦ??浠??ュ????涓?涓?????宸茬???褰㈢???Web??? ?版?规?锛?

?版?????Web????版?у?舵??????????绉??规?锛? 涓?锛???瀹?涔??т欢瀹???????

?╃???IE???甯????WebBrowser??т欢瀹??版????

?╃?ㄧ??涓??规?т欢瀹??版????

1????瀹?涔??т欢?瑰?

??瀹?涔??т欢?瑰?灏辨???╃???VB????VC?绛?宸ュ?风?????COM?缁?浠讹??ㄥ??涔?濂界?????版?煎??ュ???????版???浠朵???瀹??版???般?????? 灏???????缁?浠朵?杞藉苟娉ㄥ???板?㈡?锋?轰?锛????藉???板?ㄥ?㈡?风????

绗??30?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

???般??

?剧?逛富瑕???瀹?涔????版?煎???濡?浣??ュ???????版???浠躲???版????姣?杈?濂界???规????╃???XML??????ュ?ㄩ?㈢??瑙ｅ?抽??棰?锛??╃???XML??? 浠ラ??甯稿?规???板??涔????扮????????????琛ㄦ?肩????瀹圭???煎???

浣?瀵圭?搴?????寮???瑕?姹?楂?锛??惧害姣?杈?澶с??

2???╃???WebBrowser?瀹??奥?Web?????

WebBrowser????IE???缃???娴?瑙??ㄦ?т欢锛??????ㄦ?蜂?杞姐??????妗ｆ??璁ㄨ?虹???????陈?IE6.0????? ???WebBrowser??т欢??????瀹广?? 涓??剁?稿?崇??????瑕?姹???锛????版??妗ｇ????????椤甸?㈣?剧疆?????版??浣???瀹??扮????涓???????

锛?涓?锛??????版??妗ｇ??????

1??瀹㈡?风???????瑰?

瀹㈡?风????????涓郝?VBScript??JavaScript??JScript???绉?????璇?瑷??????IE?涓?寮???搴??ㄤ娇?ㄧ??璇?娉?涓郝?JScript???璇?娉?锛???浜?瀹???JavaScript???涔?娌℃??浠?涔??哄??锛???浠ヤ???浠ョО?朵负?JavaScript锛?涓??㈢????涓郝?JS锛???涓??????典?锛?涓昏?浣跨???JS??ュ??

?奥?DOM???妗ｇ??????锛?DOM?涓哄井杞????虹??涓?绉??Web???妗ｆā??锛?涓昏??ㄦ?ュ???奥?Web?????缂?绋???

?╃???JS???浠ュ????婧?椤甸?㈢????瀹癸?灏?娆叉???扮??椤甸?㈠??绱??????烘?ワ?瀹??版???般????杩?????婧???妗ｇ????瀹癸???浠ョ???????扮?? ????妗ｃ??

浼??癸?瀹㈡?风????绔?瀹??????扮??????妗ｇ??????锛???杞绘???″?ㄨ??凤?缂虹?癸?婧???妗ｇ????????浣?澶???锛?骞朵?婧???妗ｄ腑?????板??瀹硅???绾???锛?

2?????″?ㄧ??绋?搴??瑰? ???″?ㄧ??绋?搴??瑰?锛?涓昏????╃?ㄥ???颁唬??浠??版??搴?涓?璇诲?????版?锛????????扮??????妗ｃ??褰???椤甸?㈢?????讹?杩?搴???褰?????

浣跨???CSS??ュ???板己?跺??椤垫?у?躲??

浼??癸???浠ョ??????瀹归??甯哥??涓板???????扮??????妗ｏ???????妗ｇ????瀹圭?????ф?у己???变????板??瀹规??浠??版??搴?涓??峰????锛??? 浠ョ??????浣??稿?圭????锛?

缂虹?癸????″?ㄧ??璐?杞芥??杈?澶э?

锛?浜?锛???椤甸?㈣?剧疆椤甸?㈣?剧疆涓昏?????璁剧疆???版??妗ｇ??椤佃竟璺???椤电????椤佃????绾稿?绛???瀹广??椤甸?㈣?剧疆灏??存?ュ奖???版???版??妗ｇ???㈢??????????锛?

??浠ュ???????版??妗ｇ??????????瀵??????崇郴??姣?濡?锛?琛ㄦ?肩?? 琛??般??澶у???浣?缃???瀛?浣???澶у?绛???

?版???????????╃???IE6.0???缃??????版ā?挎?瑰??ユ?у?堕〉?㈣?剧疆锛??跺??浠ュ?规???扮??????妗ｄ骇????甯稿ぇ??褰卞???????版ā?垮??浠ユ?у?堕〉杈硅???椤电????椤佃????濂??堕〉绛???瀹癸?骞跺??浠ュ??ㄦ?风??璁剧疆??寰?锛?杩???浠ュ?璁剧疆?????版???″?ㄧ????

???版ā?挎??????浠ヨ??瀹?棰?瑙?绐??ｅ?????版?煎?锛???澶ч??搴??板奖????????妗ｅ?????版??????

锛?涓?锛??????版??浣???瀹???

姝ゅ???界??瀹??颁富瑕????╃???WebBrowser??т欢???芥?版?ュ?ｆ?ュ???版???般?????伴?瑙?锛?榛?璁ょ??锛???椤甸?㈣?剧疆锛?榛?璁ょ??锛???

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>

//????

WebBrowser1.ExecWB(6,1);

//???拌?剧疆

WebBrowser1.ExecWB(8,1);

//???伴?瑙?

WebBrowser1.ExecWB(7,1);

3??涓?涓?瀹?渚?椤圭?????ㄧ?????版?规? ???″?ㄧ??绋?搴??瑰??????伴?瑙??ュ?ｈ????涓???负渚?锛? 涓昏?????椤圭??涓???锛??pageErrorPrint.aspx.vb???浠?

涓昏??ㄩ〉

绗??31?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

function PrintPage(iPageIndex,strQuery)

{

var strURL;

strURL = "PageErrorPrint.aspx?PageIndex=" + iPageIndex + "&QueryString=" +

strQuery;

winPrint=window.open(strURL,"","left=2000,top=2000,fullscreen=3");

}

???伴〉?HTML?婧?涓???棰?瑙??у??

document.write("<object ID='WebBrowser' WIDTH=0 HEIGHT=0

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>"); WebBrowser.ExecWB(7,1);

window.opener=null;

window.close();

</SCRIPT>

绋?搴?澶?

'棣???澹版??琛ㄦ?煎?瑰??

Protected WithEvents phContainer As System.Web.UI.WebControls.PlaceHolder

'姣?涓?琛ㄦ?间腑??璁板??伴??

Private Const ItemPerTable As Integer = 20

?抽????瀹??伴?ㄥ??

'??寤轰?涓?绗??????拌?姹???琛ㄦ??

tabPagePrint = NewPrintTable()

'灏?琛ㄥご娣诲???版?よ〃?间腑

Call AddTableTitle(tabPagePrint)

'??濮???璁板???

i = 0

iItemIndex = iStartPoint

For Each clsItem In clsAllData.ErrorCollection

If i > 0 And i Mod ItemPerTable = 0 Then

'娣诲??琛ㄦ?兼?т欢?伴〉??腑

phContainer.Controls.Add(tabPagePrint)

'?ㄩ〉??腑娣诲??涓?涓??㈣?绗?

Call AddPageBreak()

'??寤烘?颁?杞???琛ㄦ??

tabPagePrint = NewPrintTable() Call AddTableTitle(tabPagePrint) End If

'灏?璁板?娣诲???拌〃?间腑

Call AddItemToTable(iItemIndex, tabPagePrint, clsItem)

iItemIndex = iItemIndex + 1

i = i + 1

'娣诲??琛ㄦ?兼?т欢?伴〉??腑

绗??32?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

phContainer.Controls.Add(tabPagePrint)

?????芥??

'????娣诲??椤电???㈣?绗?

Private Sub AddPageBreak()

Dim ltBreak As LiteralControl

ltBreak = New LiteralControl("<p style='page-break-before:always'>")

phContainer.Controls.Add(ltBreak) End Sub

浜????╃???IE???韬?????

杩?绉??瑰?姣?杈?绠???锛?涔?甯哥?ㄧ?????版?瑰?锛?????瑕?灏??ヨ〃椤甸?㈣?捐?″ソ锛??ㄦ?烽??杩??IE?????涓??????板???藉???????般??浼??规??绠? ??锛?瀹规??瀹??帮?缂虹?规??涓??垫椿锛?涓??芥?у?跺??椤碉?涓??芥?у?跺ソ椤电????椤佃????

涓???灏??ヨ〃瀵煎?烘???Word,Excel????PDF?褰㈠?????

杩?绉??瑰???瑕?灏?椤甸?㈠?煎?烘???Office???妗ｆ???pdf,??浣???瑕?姹???瀹㈡?风??宸茬?瀹?瑁??ㄤ互??寮??Word??Excel????Pdf???妗ｇ??杞?浠躲?? 杩?绉??瑰???浠ラ??杩?姘存?舵?ヨ〃缁?浠舵???朵?涓?浜?绗?涓??规?т欢??甯稿?规???板???般??瀵煎?烘???Pdf?褰㈠??????拌川?????????藉?濂斤?瀵煎?烘??

Word????Excel????ㄦ?峰??浠ヨ??瀹?涔????扮????瀹瑰???煎??? ?讳?锛??版???????版?规????????匡??ㄥ???杩?绋?涓?搴??规???ㄦ?风????姹?浣????╋??╃???IE????扮????锛?瀹规??瀹??帮??ㄧ?ㄦ?烽??姹?绠?

???????板??瀹硅?灏??????典????ㄦ?ゆ?规?姣?杈???瀹????╃?ㄨ??瀹?涔??т欢???板??浠ュ???板???ㄨ??瀹?涔?锛?浣???瑕?杈?楂???????瑕?姹???寮????ㄦ?????╃?ㄥ?煎?虹???瑰?????浠ユ弧瓒崇?ㄦ?烽??瑕?涓??硅??瀹?涔??????板??瀹规??澶?椤电????姹???

-------------------------------------------------------------

1???у??绾垫??"??妯?????????椤甸?㈢??杈硅???

锛?1锛?<script defer>

function SetPrintSettings() {

// -- advanced features

factory.printing.SetMarginMeasure(2) // measure margins in inches factory.SetPageRange(false, 1, 3) // need pages from 1 to 3 factory.printing.printer = "HP DeskJet 870C" factory.printing.copies = 2

factory.printing.collate = true

factory.printing.paperSize = "A4"

factory.printing.paperSource = "Manual feed"

// -- basic features factory.printing.header = "This is MeadCo"

factory.printing.footer = "Advanced Printing by ScriptX" factory.printing.portrait = false factory.printing.leftMargin = 1.0 factory.printing.topMargin = 1.0 factory.printing.rightMargin = 1.0 factory.printing.bottomMargin = 1.0

}

</script>

锛?2锛?

function printsetup(){

//????伴〉?㈣?剧疆

绗??33?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

wb.execwb(8,1);

}

function printpreview(){

//????伴〉?㈤?瑙?

wb.execwb(7,1);

}

function printit()

{

if (confirm('纭?瀹????板??锛?')) {

wb.execwb(6,6)

}

</script>

</head>

<body>

<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"

height=0 id=wb name=wb?width=0></OBJECT>

<input type=button name=button_print value="????

慰nclick="javascript:printit()">

<input type=button??name=button_setup value="???伴〉?㈣?剧疆"

慰nclick="javascript:printsetup();">

<input type=button??name=button_show value="???伴?瑙?"

慰nclick="javascript:printpreview();">

<input type=button name=button_fh value="?抽??"

慰nclick="javascript:window.close();">

------------------------------------------------??充?杩?涓?缁?浠惰????朵????ㄦ?锛???涓惧?涓?锛??WebBrowser.ExecWB(1,1)???寮?

Web.ExecWB(2,1)??抽???板?ㄦ???????IE?绐??ｏ?骞舵??寮?涓?涓??扮????

Web.ExecWB(4,1)?淇?瀛?缃?椤?eb.ExecWB(6,1)????奥?Web.ExecWB(7,1)???伴?瑙??Web.ExecWB(8,1)????伴〉?㈣?剧疆Web.ExecWB(10,1)??ョ??椤甸?㈠???

Web.ExecWB(15,1)?濂藉?????ら??锛???寰?纭?璁?

Web.ExecWB(17,1)??ㄩ???Web.ExecWB(22,1)?锋?奥?Web.ExecWB(45,1)??抽??绐?浣?????绀?

2????椤垫????

<HTML>

<HEAD>

绗??34?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<STYLE>

P {page-break-after: always}

</STYLE>

</HEAD>

<BODY>

<%while not rs.eof%>

<%rs.movenext%>

<%wend%>

</BODY>

</HTML>

3??ASP?椤甸?㈡???版?跺?浣??绘??椤甸?㈠??ㄧ??璺?寰???椤剁????椤电??缂???

锛?1锛?ie?????浠???椤甸?㈣?剧疆-??璁查???㈢??椤电????椤佃?????㈢??涓?瑗块?藉?绘??锛????板氨涓??烘?ヤ???

锛?2锛?<HTML>

<HEAD>

<TITLE> New Document </TITLE>

dim hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\Software\Microsoft\Internet Explorer\PageSetup"

'//璁剧疆缃?椤垫???扮??椤电??椤佃??涓虹┖

function pagesetup_null()

on error resume next

Set RegWsh = CreateObject("WScript.Shell")

hkey_key="\header"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""

hkey_key="\footer"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""

end function

'//璁剧疆缃?椤垫???扮??椤电??椤佃??涓洪?璁ゅ??

function pagesetup_default()

on error resume next

Set RegWsh = CreateObject("WScript.Shell")

hkey_key="\header"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b?椤电??锛?&p/&P"

hkey_key="\footer"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d"

end function

</script>

</HEAD>

<BODY>

<br/>

绗??35?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<br/>

<input type="button" value="?娓? 绌?椤????" 慰nclick=pagesetup_null()>?<input type="button" value="???澶? 椤????"

慰nclick=pagesetup_default()><br/>

</p>

</BODY>

</HTML>

4??娴??ㄥ抚????

function button1_onclick() {

var odoc=window.iframe1.document; var r=odoc.body.createTextRange(); var stxt=r.htmlText;

alert(stxt)

var pwin=window.open("","print"); pwin.document.write(stxt); pwin.print();

}

</SCRIPT>

4?????FileSystem?缁?浠跺???奥?WEB?搴??ㄤ腑?????扮?瑰??????

function print_onclick //???板?芥??

dim label

label=document.printinfo.label.value //?峰??HTML?椤甸?㈢???版??

set objfs=CreateObject("Scripting.FileSystemObject") //??寤郝?FileSystem?缁?浠跺?硅薄??瀹?渚??set objprinter=objfs.CreateTextFile ("LPT1:",true) //寤虹??涓????版?虹??杩???bjprinter.Writeline("__________________________________") //杈??烘???扮????瀹?

objprinter.Writeline("| |")

objprinter.close //??寮?涓????版?虹??杩???

set objprinter=nothing

set objfs=nothing //??抽???FileSystem?缁?浠跺?硅薄

end function

</script>

???″?ㄧ??????锛?

<%??????

set conn=server.CreateObject ("adodb.connection")

conn.Open "DSN=name;UID=XXXX;PWD=XXXX;"

set rs=server.CreateObject("adodb.recordset")

绗??36?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

rs.Open(??select ??????),conn,1,1

??????.%>?//涓??版??搴?杩?琛?浜や?

HTML?椤甸?㈢???锛?

<HTML>

??????

<INPUT type="button" value="????gt;>" id=print name=print > //璋??ㄦ???板?芥??

<INPUT type=hidden id=text1 name=label value=<%=??????%>>?//淇?瀛????″?ㄧ??浼??ョ???版??

??????

</HTML>

Div+CSS?甯?灞??ラ?ㄦ??绋? ?ㄧ?椤靛?朵?涓?锛???璁稿?????璇?锛?渚?濡?锛?CSS??HTML??DHTML??XHTML??绛?绛????ㄤ??㈢????绔?涓???浠?

灏?浼??ㄥ?颁?浜????充??HTML????烘???ヨ??锛????ㄤ?瀛??杩?绡??ラ?ㄦ??绋?涔???锛?璇风‘瀹?浣?宸茬??锋??浜?涓?瀹???

HTML??虹???涓??㈡??浠?灏卞?濮?涓?姝ヤ?姝ヤ娇???DIV+CSS?杩?琛?缃?椤靛?灞?璁捐?″?с??

??????璁捐?＄??涓?姝ュ氨??????锛?????濂戒?锛?涓????ヨ?磋???瑕???hotoShop????FireWorks(浠ヤ?绠?绉奥?PS????FW)

绛??剧??澶???杞?浠跺???瑕??朵??????㈠?灞?绠????????诲?烘?ワ?浠ヤ?????????濂界?????㈠?灞??俱??

绗??37?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

涓??????浠???瑕??规???????炬?ヨ???涓?涓?椤甸?㈢??甯?灞?锛?浠?缁?????涓?涓?璇ュ?撅???浠?涓??惧???帮??剧??澶ц?村??

涓轰互涓???涓??ㄥ??锛?

1??椤堕?ㄩ?ㄥ??锛??朵腑??????浜??LOGO??MENU???涓?骞??Banner??剧??锛?

2????瀹归?ㄥ????????涓轰晶杈规????涓讳???瀹癸?

3??搴????????涓?浜?????淇℃??????浜?浠ヤ???????锛???浠?灏卞??浠ュ?瀹规????甯?灞?浜?锛???浠?璁捐?″?濡?涓???

?规??涓??撅??????讳?涓?涓?瀹?????椤甸?㈠?灞??撅?璇存??涓?涓?灞???宓?濂??崇郴锛?杩??风??瑙ｈ捣?ュ氨浼??寸????浜???

绗??38?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

DIV?缁???濡?涓?锛?

??body?{}????/*杩???涓?涓??HTML???绱?锛??蜂???灏变?璇存??浜?*/

??#Container?{}????/*椤甸?㈠?瀹瑰??/

??#Header?{}????/*椤甸?㈠ご??/

??#PageBody?{}????/*椤甸??富浣?*/

???????#Sidebar?{}????/*渚ц竟??*/

???????#MainBody?{}????/*涓讳???瀹?/

??#Footer?{}????/*椤甸?㈠???/

?虫?わ?椤甸?㈠?灞?涓?瑙???宸茬?瀹???锛??ヤ??ユ??浠?瑕?????灏辨??寮?濮?涔????HTML?浠ｇ?????CSS???ヤ??ユ??浠??ㄦ??㈡?板缓涓?涓???浠跺す锛??藉??涓衡??DIV+CSS?甯?灞?缁?涔???锛??ㄦ??浠跺す涓??板缓涓や釜绌虹??璁颁?????

妗ｏ?杈??ヤ互涓???瀹癸?

<!DOCTYPE?????????html??????????PUBLIC?????????"-//W?3C//DTD?????????XHTML??????????1.0??????????Transitional//EN"

"http://www?.w?3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html?xmlns="http://www?.w?3.org/1999/xhtml">

<head>

绗??39?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<title>????棰???妗?lt;/title>

</head>

<body>

</body>

</html>

杩????XHTML????烘??缁???锛?灏??跺?藉??涓郝?index.htm锛????涓?璁颁?????妗ｅ???藉??涓郝?css.css??

涓??????浠???lt;body></body>??绛惧?逛腑???ヂ?DIV????烘??缁???锛?浠ｇ??濡?涓?锛?

<div?id?="container">[color=#aaaaaa]<!--椤甸?㈠?瀹瑰??->[/color]

<div?id?="Header">[color=#aaaaaa]<!--椤甸?㈠ご??->[/color]

</div>

<div?id?="PageBody">[color=#aaaaaa][/color]

<div?id?="Sidebar">[color=#aaaaaa][/color]

</div>

<div?id?="MainBody">[color=#aaaaaa]<!--涓讳???瀹?->[/color]

</div>

<div?id?="Footer">[color=#aaaaaa]<!--椤甸?㈠???->[/color]

</div>

绗??40?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

涓轰?浣夸互????璇讳唬???寸????锛???浠?搴?璇ユ坊???稿?虫敞??锛??ヤ??ユ??寮??css.css???浠讹????ヂ?CSS?淇℃??锛?浠ｇ??

濡?涓?锛?

/*?烘??淇℃??*/

body?{font:12px?Tahoma;margin:0px;text-align:center;background:#FFF;}

/*椤甸?㈠?瀹瑰??/

#container?{w?idth:100%}

/*椤甸?㈠ご??/

#Header?{w?idth:800px;margin:0?auto;height:100px;background:#FFCC99}

/*椤甸??富浣?*/

#PageBody?{w?idth:800px;margin:0?auto;height:400px;background:#CCFF00}

/*椤甸?㈠???/

#Footer?{w?idth:800px;margin:0?auto;height:50px;background:#00FFFF}

??浠ヤ???浠朵?瀛?锛??ㄦ?瑙??ㄦ??寮?锛?杩??舵??浠?宸茬???浠ョ???板?虹?缁???浜?锛?杩?涓?灏辨??椤甸?㈢??妗??朵???

?充?浠ヤ??CSS???璇存??锛?璇??璇峰?????CSS2.0?涓???????锛?缃?涓???涓?杞斤?锛?

1??璇峰?绘????濂界??娉ㄩ??涔???锛?杩?????甯搁??瑕???锛?

2??body???涓?涓??HTML???绱?锛?椤甸??腑????????瀹归?藉?璇ュ???ㄨ???绛惧?逛???锛???灏变?澶?璇翠?锛?

3??璁茶В涓?浜?甯哥?ㄧ???CSS?浠ｇ??????涔?锛?

font:12px?Tahoma锛?

杩???浣跨?ㄤ?缂╁??锛?瀹??寸??浠ｇ??搴?璇ユ??锛?font-size:12px;font-family:Tahoma锛?璇存??瀛?浣?涓郝?12???绱?澶у?锛?瀛??浣?涓?ahoma??煎?锛?

绗??41?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

margin:0px锛?

涔?浣跨?ㄤ?缂╁??锛?瀹??寸??搴?璇ユ??锛?

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

margin:0px?0px?0px?0px

椤哄????涓??/???陈?/??涓??/??宸??浣?涔???浠ヤ功??涓郝?margin:0(缂╁??)锛?

浠ヤ??峰?璇存???body??ㄥ??瀵逛??充?宸?竟璺?涓郝?0???绱?锛?濡???浣跨???auto????????ㄨ??磋竟璺?锛?

???杩???浠ヤ???绉???娉?锛?

margin:0px?auto锛?

璇存??涓?涓?杈硅?涓郝?0px锛?宸??充负???ㄨ??达?

??浠?浠ュ??灏?浣跨?ㄥ?扮???padding?灞??у???margin???璁稿??镐技涔?澶?锛?浠?浠??????版??涓??风??锛???涓?杩?????琛ㄧず????涔?涓??稿??锛?margin???澶??ㄨ?绂伙????padding????????ㄨ?绂汇??

te?xt-align:ce?nte?r

??瀛?瀵归??瑰?锛???浠ヨ?剧疆涓哄乏???炽??涓?锛?杩?????灏?瀹?璁剧疆涓哄?涓?瀵归???

background:#FFF

璁剧疆?????蹭负?借?诧?杩???棰??蹭娇?ㄤ?缂╁??锛?瀹??寸??搴?璇ユ???background:#FFFFFF???background???浠ョ?ㄦ?ョ???瀹???灞?濉????????层???????剧??锛?浠ュ????浠?灏??ㄥ?板?涓??煎?锛??background:#ccc?url('bg.gif')top?left?no?-repeat锛??琛ㄧず锛?浣跨??CCC(?板害??濉????翠釜灞?锛?浣跨???bg.gif???涓鸿?????剧??锛?

top?left

琛ㄧず?剧??浣?浜?褰???灞???宸??绔?锛?no-repeat?琛ㄧず浠??剧ず?剧??澶у???涓?濉???婊℃?翠釜灞???

top/right/left/bottom/center

?ㄤ?瀹?浣??????剧??锛?????琛ㄧず?涓??/???陈?/??涓??/??宸β?/??涓?锛?杩???浠ヤ娇??

background:url('bg.gif')?20px?100px;

琛ㄧず?X?搴ф??涓郝?20???绱?锛?Y?搴ф??涓郝?100???绱???绮剧‘瀹?浣?锛?

repeat/no-repeat/repeat-x/repeat-y

????琛ㄧず?濉???婊℃?翠釜灞??/??涓?濉????/??娌柯?X?杞村～???/??娌柯?Y?杞村～????

绗??42?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

he?ight?/?width?/?color

????琛ㄧず楂?搴?px)??瀹藉害(px)??瀛?浣?棰???HTML??茬郴琛???

4??濡?浣?浣块〉?㈠?涓?锛?澶у?跺?浠ｇ??淇?瀛?????浠ョ???帮??翠釜椤甸?㈡??灞?涓??剧ず??锛??ｄ?绌剁????浠?涔?????浣垮?椤甸?㈠?涓??剧ず???

????涓烘??浠???container?涓?浣跨?ㄤ?浠ヤ?灞??э?

margin:0?auto;

???у???㈢??璇存??锛???浠ョ?ラ??锛?琛ㄧず涓?涓?杈硅?涓郝?0锛?宸??充负???????姝よ?ュ?灏变????ㄥ?涓?浜??? 濡???瑕?璁╅〉?㈠?宸??????娑????auto??煎氨??浠ヤ?锛???涓洪?璁ゅ氨??灞?宸??剧ず????

??杩??margin:auto???浠?灏卞??浠ヨ交???颁娇灞????ㄥ?涓?浜???

5??杩???????浠?缁?杩?浜?甯哥?ㄧ???CSS?灞??т?锛??朵???璇峰?????CSS2.0?涓????????? 褰???浠???濂戒?椤甸?㈠ぇ?寸???DIV?缁?????锛???浠?灏卞??浠ュ?濮?缁??村?板?规??涓?涓??ㄥ??杩?琛??朵?浜???

?ㄤ?涓?绔?涓???浠????ヤ?涓?浜??峰?锛??ｄ??峰???涓轰?棰?瑙?缁????????ョ??锛???浠????css.css?涓????峰??ㄩ?ㄦ??ゆ??锛????板???ヤ互涓??峰?浠ｇ??锛?

/*?烘??淇℃??*/

body?{font:12px?Tahoma;margin:0px;text-align:center;background:#FFF;}

a:link,a:visited?{font-size:12px;text-decoration:none;}

a:hover{}

/*椤甸?㈠?瀹瑰??/

#container?{w?idth:800px;margin:10px?auto}

?峰?璇存??锛?

a:link,a:visited?{font-size:12px;text-decoration:none;}

a:hover?{}

杩?涓ら」???????у?堕〉??腑瓒??炬?ョ???峰?锛??蜂???灏变?璇存??浜?锛?璇峰ぇ瀹跺??????????

绗??43?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

#container?{width:800px;margin:10px?auto}

??瀹??翠釜椤甸?㈢???剧ず?哄????

width:800px???瀹?瀹藉害涓郝?800???绱?锛?杩????规??瀹???????璁惧????

margin:10px?auto锛?????椤甸?????涓?杈硅?涓郝?10?涓???绱?锛?骞朵?灞?涓??剧ず?? 涓?涓?绔?涓???浠?璁茶?锛?瀵瑰????margin?灞??х??宸??宠竟璺?璁剧疆涓郝?auto???浠ヨ?╁?灞?涓??剧ず??

?ヤ??ワ???浠?寮?濮??朵??TOP??ㄥ??锛?TOP??ㄥ??????浜??LOGO?????????Banne?r锛?棣?????浠?瑕?????灏辨??瀵硅?捐?″ソ???剧??杩?琛?????锛?浠ヤ??????FW?涓?瀹?????????锛?

??灏??TOP???ㄥ??????涓轰袱?ㄥ??锛?绗?涓??ㄥ??????浜??LOGO???涓??℃í绾裤???变??LOGO??剧??骞舵病??澶?澶???棰? ?诧?杩?????浜???灏?杩?涓??ㄥ??淇?瀛?涓郝?GIF??煎?锛?璋??叉?块???╀负绮剧‘锛????┞?Alpha?????搴???茬??涓虹?借??姝?澶?棰??插?涓??????茬?稿??)锛?瀵煎?轰负?logo.gif锛??惧??瀹藉害涓郝?800px??

?拌???锛?????????灏辫?翠?锛?*??涓轰?涔?瑕?浣跨???GIF??煎?锛?浣跨???JPEG?涓????村ソ??锛?

??涓郝?GIF??煎????剧????浠舵?村?锛?杩??疯?戒娇椤甸?㈣浇?ョ????搴??村揩锛?褰??朵娇?ㄦ?ゆ?煎?涔???蹇?椤荤‘瀹??剧??骞?娌℃??浣跨?ㄥお澶???棰??诧?褰???浠?浣跨?ㄤ??GIF??煎??讹?浠????间?骞朵??界???哄?剧????浠?涔?澶?澶х??????锛???姝よ?????琛?????

绗??44?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

*???ヤ??ョ???Banne?r??ㄥ??杩??戒娇???GIF??煎???锛?

绛?妗???涓??斤???涓郝?Banner??ㄥ????涓?涓?缁??寸???剧??锛?濡???浣跨???GIF??煎?棰??蹭???澶?澶х????澶憋???浠ュ?椤宦?浣跨??PEG??煎?锛?灏???浠跺?煎?轰负?banner.jpg??

*????????????????甯镐???瑕???锛???涓哄???????规?姝ｇ‘涓????冲??浜??CSS?涔?????绠???绋?搴?互??椤甸?㈣浇?ラ???搴???

??濂界????锛???浠?杩???瑕?瀵孤?TOP??ㄥ??杩?琛?????骞跺??DIV?缁??????ヂ?Header?涓?浠ｇ??濡?涓?锛?

<div?id?="menu">

<ul>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

</ul>

</div>

绗??45?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<div?id?="banner">

</div>

涓轰?涔?瑕?杩?涔????????涓哄?硅????浣跨?ㄥ??琛?lt;li>褰㈠?锛???浠ュ?ㄤ互???逛究瀵硅????瀹??舵?峰???

??涓轰?涔?瑕?娣诲??浠ヤ?浠ｇ?????

<li?class="menuDiv"></li>

???ヨ?涓?娈典唬??????浠ユ?逛究?板?硅??????椤逛??存???ヤ?浜??????峰?锛?渚?濡?棰?瑙??句腑??绔?绾垮???????跺????浠????css.css?涓??????ヤ互涓??峰?锛?

/*椤甸?㈠ご??/

#header?{background:url(logo.gif)?no-repeat}

?峰?璇存??锛?

#header?{background:url(logo.gif)?no?-repeat}

缁?椤甸?㈠ご?ㄥ?????ヤ?涓??????剧???LOGO锛?骞朵?涓?浣?濉?????杩???锛???浠?娌℃????瀹??he?ade?r?灞???楂?搴??涓轰?涔?涓???瀹????

??涓郝?header?灞?涓?杩??????????banner?椤癸???浠ュ???楂?搴????舵?????ョ??锛???灞???灞??у????浠ヨ?╁??规????瀹????ㄨ?惧??璋??达???姝ゆ??浠?骞朵???瑕???瀹?楂?搴???

浣跨?ㄥ??琛?lt;li>?朵?????

寮?濮?姝よ????瀛????锛?璇风‘璁や?宸茬????т???????????瀹瑰???ヤ??DIV??CSS??奥?index.htm????css.css???浠朵腑??杩?涓?????灏???璇?澶у?跺?浣??ㄥ??琛?lt;li>?ュ?朵???????

<div?id="menu">

<ul>

绗??46?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

<li?class="menuDiv"></li>

</ul>

</div>

浠ヤ???杩??ㄥ????缁???锛????充?<ul></ul>??<li></li>杩?涓や釜?HTML???绱?澶у?惰??宸卞?诲?????稿?崇????瀹瑰?э?

瀹?浠???涓昏???浣??ㄥ氨?????HTML?涓?浠ュ??琛ㄧ??褰㈠??ユ?剧ず涓?浜?淇℃????

杩???涓??归??瑕?澶у?朵?瀹?瑕???娓?妤???锛?褰????HTML?涓?瀹?涔?涓郝?id="divID"?讹????CSS?瀵瑰???璁剧疆璇?娉?????

#divID{}??锛?濡??????HTML?涓?瀹?涔?涓郝?class="divID"?讹??????CSS?涓?瀵瑰???璁剧疆璇?娉???.divID??

濡????id="divID"杩?涓?灞?涓?????浜?涓?涓?<img></img>锛???杩?涓??img????CSS?涓?瀵瑰???璁剧疆璇?娉?搴?璇ユ??#divID

img?{}锛????凤?濡????????????class="divID"杩?涓?灞?涓??讹???璁剧疆璇?娉?搴?璇ユ??.divID?img?{}锛?杩?涓??瑰???澶у?惰???娓?妤?浜???

???锛?HTML?涓???涓?????绱??芥????浠ュ??涔???锛?渚?濡??table??tr??td??th??form??img??input...绛?绛?锛?濡???浣??瑕???SS?涓?璁剧疆瀹?浠?锛????存?ュ???ュ??绱?????绉板??涓?涓?瀵瑰ぇ????}灏卞??浠ヤ??????????CSS?浠ｇ???藉?璇ュ????ㄥぇ????}涓???

???т??㈢??浠?缁?锛???浠??????css.css?涓????ヤ互涓?浠ｇ??锛?

绗??47?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

#menu?ul?{list-style:none;margin:0px;}

#menu?ul?li?{float:left;}

瑙ｉ??涓?涓?锛?

#menu?ul?{list-style:none;margin:0px;}

list-style?:none锛?杩?涓??ユ????娑???琛ㄥ???癸???涓烘??浠?涓???瑕?杩?浜??广??

margin:0px锛?杩?涓??ユ?????ぢ?UL???缂╄?锛?杩??峰????浠ヤ娇????????琛ㄥ??瀹归?戒?缂╄???

#menu?ul?li?{float:left;}

杩??????float:left????宸??虫??璁╁??瀹归?藉?ㄥ??涓?琛??剧ず锛???姝や娇?ㄤ?娴??ㄥ???float)?? ?拌?涓?姝ワ?寤鸿??澶у?跺??淇?瀛?棰?瑙?涓?涓?????锛???浠???娣诲??涓??㈢????瀹癸?????濡?涓?锛?

杩??讹???琛ㄥ??瀹规???????ㄤ?琛?锛???浠???menu?ul?li?{}?????ヤ唬???margin:0?10px

#menu?ul?{list-style:none;margin:0px;}

#menu?ul?li?{float:left;margin:0?10px}

margin:0?10px???浣??ㄥ氨??璁╁??琛ㄥ??瀹逛??翠骇??涓?涓??20???绱???璺?绂?宸??10px锛??筹?10px)锛?棰?瑙???????

濡?涓?锛?

?板?????褰㈠凡缁??烘?ヤ?锛???浠????ュ?哄????????浣?缃?锛???浠ｇ???规??濡?涓?锛?

#menu?{padding:20px?20px 0?0}

/*?╃???padding:20px?20px 0 0??ュ?哄??????浣?缃?*/

#menu?ul?{float:right;list-style:none;margin:0px;}

绗??48?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

/*娣诲??浜??float:right?浣垮?????浣?浜?椤甸?㈠?充晶*/

#menu?ul?li?{float:left;margin:0?10px}

杩??讹?浣?缃?宸茬?纭?瀹?浜?锛??????????句腑锛???????椤逛??磋???涓??＄??绾匡???涔??????

??蹇?浜?锛???浠??╁氨宸茬???濂戒?涓?涓?绌虹??<li?class="menuD?iv"></li>锛?瑕??冲???ョ??绾垮氨浣跨?ㄥ??浜??? ???т??㈣?寸???规?锛???浠???娣诲??浠ヤ?浠ｇ??锛?

.menuDiv?{w?idth:1px;height:28px;background:#999}

淇?瀛?棰?瑙?涓?涓?锛?绔?绾挎????凡缁??烘?ヤ?锛??充?杩?娈典唬??灏变?澶?璁蹭?锛?搴?璇ユ??寰?瀹规????瑙ｇ????

涓?杩?锛???????椤圭????瀛??村?ㄩ《?????浠???淇??规??浠ヤ?浠ｇ??锛?

#menu?ul?li?{float:left;margin:0?10px;display:block;line?-height:28px}

?充??dis?play:block;line?-height:28px?澶у?跺??浠ュ?诲????涓?涓?????锛???灏变?澶?璁蹭???

?????烘??涓?宸茬?瀹??颁?锛??╀???灏辨??淇??硅??????瓒??炬?ユ?峰?锛????css.css?涓?娣诲??浠ヤ?浠ｇ??锛?

#menu?ul?li?a:link,#menu?ul?li?a:visited?{font-weight:bold;color:#666}

#menu?ul?li?a:hover{}

杩?涓?涔?涓?澶?璇翠?锛?娌′?涔?濂借?寸??浜?锛???????????濡?涓?锛?

杩?涓????拌???灏卞??姣?浜?

绗??49?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

杩?涓????????涓昏?灏辨???冲??璇?澶у?跺?浣?浣跨?ㄥソ?borde?r????cle?ar?杩?涓や釜灞??с??

棣???锛?濡???浣??剧?ㄨ??table??朵?缃?椤碉?浣?灏卞?璇ョ?ラ??锛?濡???瑕??ㄨ〃?间腑缁??朵??¤??绾胯?ュ?浣???锛??ｉ??瑕? ?朵?涓?涓?寰?灏????剧???ュ～??锛??跺????浠?杩????寸????????娉?锛???瑕???lt;td></td>涓????ヨ?涔?涓?娈靛氨??浠ヤ?锛??浣???浠ヨ??璇?锛?

<div?style="border-bottom:1px?dashed?#ccc"></div>

澶у?跺??浠ュ??娆″????????锛??跺??浣?灏辫?芥???铰?dashed??solid??dotted...绛???浣?????╃?ㄥ??浠?浣???浠ュ?朵??鸿??澶??????ワ?瀹?绾裤????绾裤????绾裤???村奖绾跨??绛???

<div?id?="banner"></div>

浠ヤ?浠ｇ??渚垮??浠ュ???拌?捐?¤???句腑???banner锛????css.css?涓????ヤ互涓??峰?锛?

#banner {

background:url(banner.jpg) 0?30px?no-repeat;?/*???ヨ?????剧??*/

w?idth:730px;?/*璁惧??灞???瀹藉害*/

margin:auto;?/*灞?灞?涓?*/

height:240px;?/*璁惧??楂?搴?/

border-bottom:5px?solid?#EFEFEF;?/*?讳??℃??拌?插??绾?/

clear:both?/*娓??ゆ诞??/

}

??杩??border?寰?瀹规??灏辩??跺?轰??″??绾夸?锛?骞朵???灏?浜??剧??涓?杞芥?????ㄧ??缃?缁?璧?婧?锛?浣垮?椤甸?㈣浇?ラ??搴?

??寰??村揩??

???涓?瑕?璇存????灏辨???clear:both锛?琛ㄧず娓??ゅ乏???虫??????娴?????ㄦ?ヤ??ョ??甯?灞?涓???浠?杩?浼??ㄨ?涓?灞??э?clear:left/right???ㄨ???娣诲???clear:both????变?涔??????ul??li???绱?璁剧疆浜?娴????濡???涓?娓??ゅ??浼?褰卞???banner?灞?浣?缃???璁惧????

绗??50?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

<div?id?="pagebody">

<div?id?="sidebar">

</div>

<div?id?="mainbody"><!--涓讳???瀹?->

</div>

浠ヤ???椤甸??富浣??ㄥ??锛???浠????css.css?涓?娣诲??浠ヤ??峰?锛?

#pagebody {

w?idth:730px;?/*璁惧??瀹藉害*/

margin:8px?auto;?/*灞?涓?*/

}

#sidebar {

w?idth:160px;?/*璁惧??瀹藉害*/

text-align:left;?/*??瀛?宸??归?*/

float:left;?/*娴??ㄥ?宸?/

clear:left;?/*涓???璁稿乏渚у???ㄦ诞??/

overflow?:hidden;?/*瓒??哄?藉害?ㄥ??????*/

}

#mainbody {

w?idth:570px;

text-align:left;

绗??51?椤?

??Div +?CSS??甯?灞?澶у?ㄣ??????瀹㈠???Jesse?Zhao???寸???http?://jessezhao.cnblo?gs.com???? M?SN/M?ail:p rolibertine@?gmail.co m

float:right;?/*娴??ㄥ???/

clear:right;?/*涓???璁稿?充晶瀛??ㄦ诞??/

overflow?:hidden

}

涓轰???浠ユ?ョ???版????锛?寤鸿????sidebar???#mainbody?涓????ヤ互涓?浠ｇ??锛?棰?瑙?瀹???????浠ュ???よ?娈典唬??锛?

border:1px?solid?#E00;

height:200px

淇?瀛?棰?瑙?????锛???浠ュ???拌?涓や釜灞?瀹?缇???娴?????ㄨ揪?颁???浠?甯?灞???瑕?姹?锛???涓や釜灞???瀹???瀹藉害搴?璇?

160+2(border)+570+2=734px锛?宸茬?瓒??轰??跺???瀹藉害锛??变??clear???????锛?杩?涓や釜灞???涓?浼??虹?伴??浣??????碉?杩??峰??浠ヤ娇??浠?甯?灞???椤甸???浼???涓哄??瀹瑰お?匡?渚?濡??剧??锛???瀵艰?撮??浣???

??涔???娣诲?????overflow:hidden?????浠ヤ娇??瀹瑰お?匡?渚?濡??剧??锛????ㄤ唤???ㄨ?????????甯告??浠?浼????颁?

浜?缃?椤靛?ㄨ浇?ユ?讹??变??剧??澶?澶э?瀵艰?村?灞?琚???寮?锛??村?伴〉???杞藉???????㈠?姝ｅ父锛???杩?娣诲??

overflow?:hidden?灏卞??浠ヨВ?宠?涓???棰???

CSS??涓?姣?涓?涓?灞??ц??ㄥ?褰?锛?灏卞??浠ヨВ?宠?稿???棰?锛???璁稿??浠?涓?浣??ㄥ?灞???椤靛苟娌℃??澶?澶х???崇郴锛?浣? ??浣?蹇?椤荤?ラ??杩?浜?灞??х??浣?????ㄩ???伴?鹃????跺??锛???浠ュ?璇?浣跨?ㄨ?浜?灞??у?昏В?抽??棰???

绗??52?椤?

?[x1]hspace?灞??у??璁剧疆??杩????惧????宸?竟缂????宠竟缂???绌虹?姐??

hspace????vspace?灞??у??涓??align?涓???浣跨????ヨ?剧疆?惧??涓??ㄥ?存??????璺?绂汇??

Div+CSS 布局大全

继续阅读

Android———Layout:LinearLayout前言：

android ERR：stack=java.lang.StackOverflowError:stack size 8MB

解决DIV+CSS设计在IE6/IE7/IE8/火狐-兼容性问题

Android优化程序性能的小技巧

Android性能优化—布局优化技巧

实用css技巧——清除浮动方法总结

Android——布局文件复用 include merge

Android中几种图像特效处理

Android FrameLayout的:layout_marginTop属性失效的问题

表格布局(TableLayout)及重要属性

Android 时间轴的实现

android xml中include标签的使用

Android中 xml 属性 fill_parent、warp_content、match_parent区别

Vertical-Align的理解

超强PCB布局经验谈

布局传输延迟该怎么计算？PCB中布线的传播延时公式