Div+CSS甯�灞��ラ�ㄦ��绋�(浜�) -- ���ユ�翠�灞�...
浜������ユ�翠�灞�缁���涓�CSS
HTML5�硅���烘��浠�缁�锛��ヤ��ユ��浠��ㄦ��㈡�板缓涓�涓���浠跺す锛��藉��涓衡��DIV+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����棰���妗�/title
link href="css.css" rel="stylesheet" type="text/css" /
/head
body
/body
/html
杩���XHTML���烘��缁���锛�灏��跺�藉��涓�index.htm锛���涓�涓�璁颁�����妗ｅ���藉��涓�css.css��
涓���锛���浠���body/body��绛惧�逛腑����DIV���烘��缁���锛�浠ｇ��濡�涓�锛�
div id="container"!--椤甸�㈠�瀹瑰��--
div id="Header"!--椤甸�㈠ご��--
/div
div id="PageBody"!--椤甸��涓讳�--
div id="Sidebar"!--渚ц竟��--
/div
div id="MainBody"!--涓讳���瀹�--
/div
/div
div id="Footer"!--椤甸�㈠���--
/div
/div
涓轰�浣夸互����璇讳唬���寸����锛���浠�搴�璇ユ坊���稿�虫敞��锛��ヤ��ユ��寮�css.css��浠讹�����CSS淇℃��锛�浠ｇ��濡�涓�锛�
/*�烘��淇℃��*/
body {font:12px Tahoma;margin:0px;text-align:center;background:FFF;}
/*椤甸�㈠�瀹瑰��*/
container {width:100%}
/*椤甸�㈠ご��*/
Header {width:800px;margin:0 auto;height:100px;background:FFCC99}
/*椤甸��涓讳�*/
PageBody {width:800px;margin:0 auto;height:400px;background:CCFF00}
/*椤甸�㈠���*/
Footer {width: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��绱�澶у�锛�瀛�浣�涓�Tahoma�煎�;
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�������ㄨ�绂汇��
text-align:center
��瀛�瀵归��瑰�锛���浠ヨ�剧疆涓哄乏���炽��涓�锛�杩�����灏�瀹�璁剧疆涓哄�涓�瀵归���
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杞村～����
height / width / color
����琛ㄧず楂�搴�(px)��瀹藉害(px)��瀛�浣�棰���(HTML�茬郴琛�)��
4��濡�浣�浣块〉�㈠�涓�?
澶у�跺�浠ｇ��淇�瀛�����浠ョ���帮��翠釜椤甸�㈡��灞�涓��剧ず��锛��ｄ�绌剁����浠�涔�����浣垮�椤甸�㈠�涓��剧ず��?
����涓烘��浠���container涓�浣跨�ㄤ�浠ヤ�灞��э�
margin:0 auto;
���у���㈢��璇存��锛���浠ョ�ラ��锛�琛ㄧず涓�涓�杈硅�涓�0锛�宸��充负����锛���姝よ�ュ�灏变����ㄥ�涓�浜���
濡���瑕�璁╅〉�㈠�宸�锛�����娑���auto�煎氨��浠ヤ�锛���涓洪�璁ゅ氨��灞�宸��剧ず����
��杩�margin:auto��浠�灏卞��浠ヨ交���颁娇灞����ㄥ�涓�浜���
5��杩�������浠�缁�杩�浜�甯哥�ㄧ��CSS灞��т�锛��朵���璇峰����CSS2.0涓���������