Update: 本篇已得到原作者Steve Dennis的翻译准予，在此Jorux表示感谢！
本教程主要参考Creating a CSS Layout from scratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些多余的说明，请读者明鉴。
目录：
第一步：规划网站，本教程将以图示为例构建网站；
第二步：创建html模板及文件目录等；
第三步：将网站分为五个div，网页基本布局的基础；
第四步：网页布局与div浮动等；
第五步：网页主要框架之外的附加结构的布局与表现；
第六步：页面内的基本文本的样式(css)设置；
第七步：网站头部图标与logo部分的设计；
第八步：页脚信息(版权等)的表现设置；
第九步：导航条的制作(较难)；
第十步：解决IE浏览器的显示BUG；
第一步：规划网站，本教程将以图示为例构建网站
1.规划网站，本教程将以下图为例构建网站。
点击看大图
其基本布局见下图：
点击看大图
主要由五个部分构成：
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CompanyName - PageName 锟斤拷锟戒保锟斤拷为index.html,锟斤拷锟斤拷锟斤拷锟侥硷拷锟斤拷css锟斤拷images锟斤拷锟斤拷站锟结构锟斤拷锟铰ｏ拷
2.锟斤拷锟斤拷锟斤拷站锟侥达拷颍锟斤拷锟斤拷锟揭伙拷锟斤拷锟�760px锟侥猴拷锟接ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷站锟斤拷锟斤拷锟斤拷元锟截★拷
锟斤拷html锟侥硷拷锟斤拷
锟斤拷之锟斤拷写锟斤拷
Hello world.
锟斤拷锟斤拷css锟侥硷拷锟斤拷锟斤拷锟斤拷为master.css,锟斤拷锟斤拷锟斤拷/css/锟侥硷拷锟斤拷锟铰★拷写锟诫：
#page-container {
width: 760px;
background: red;
}
锟斤拷锟斤拷html锟斤拷id为page-container锟侥猴拷锟接的匡拷为760px锟斤拷锟斤拷锟斤拷为锟斤拷色锟斤拷锟斤拷锟斤拷锟斤拷锟铰ｏ拷
锟斤拷锟斤拷为锟斤拷锟矫猴拷锟接撅拷锟叫ｏ拷写锟斤拷margin: auto;锟斤拷使css锟侥硷拷为锟斤拷
#page-container {
width: 760px;
margin: auto;
background: red;
}
锟斤拷锟斤拷锟斤拷锟斤拷钥锟斤拷锟斤拷锟斤拷雍锟斤拷锟斤拷锟斤拷锟侥讹拷锟斤拷锟斤拷8px锟斤拷锟侥匡拷隙锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟侥拷系锟斤拷锟斤拷捅呓锟斤拷锟缴的★拷锟斤拷锟斤拷锟斤拷锟斤拷锟较讹拷锟斤拷锟斤拷锟揭拷锟絚ss锟侥硷拷锟斤拷写锟诫：
html, body {
margin: 0;
padding: 0;
}
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷站锟斤拷为锟斤拷锟絛iv锟斤拷锟斤拷页锟斤拷锟斤拷锟斤拷锟街的伙拷锟斤拷:
1.锟斤拷锟斤拷锟斤拷一锟斤拷锟斤拷锟结到锟斤拷锟斤拷锟斤拷锟斤拷侄锟斤拷锟斤拷锟斤拷锟斤拷锟叫ｏ拷锟斤拷html锟侥硷拷锟斤拷写锟诫：
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
2.为锟剿斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷挚锟斤拷锟斤拷锟斤拷锟斤拷墙锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟矫诧拷同锟侥憋拷锟斤拷锟斤拷色锟斤拷示锟斤拷锟斤拷锟斤拷锟斤拷css锟侥硷拷写锟诫：
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
锟斤拷锟侥诧拷锟斤拷锟斤拷页锟斤拷锟斤拷锟斤拷div锟斤拷锟斤拷锟饺ｏ拷
1.锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟矫边框浮讹拷锟斤拷锟斤拷要锟斤拷锟捷碉拷锟揭边★拷锟斤拷css锟斤拷锟狡革拷锟斤拷:
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
2.锟斤拷锟斤拷要锟斤拷锟捷的猴拷锟斤拷锟斤拷写锟斤拷一些锟斤拷锟街★拷锟斤拷html锟侥硷拷锟斤拷写锟诫：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
锟斤拷锟斤拷锟斤拷锟斤拷钥锟斤拷锟斤拷锟揭拷锟斤拷莸暮锟斤拷锟秸硷拷锟斤拷锟斤拷锟斤拷锟絧age-container锟侥匡拷锟饺ｏ拷锟斤拷锟斤拷锟斤拷要锟斤拷#content锟斤拷锟揭边斤拷锟斤拷为280px锟斤拷锟斤拷使锟戒不锟酵边匡拷锟斤拷锟斤拷突锟斤拷
css锟斤拷锟斤拷锟斤拷锟铰ｏ拷
#content {
margin-right: 280px;
background: green;
}
同时锟斤拷锟竭匡拷锟斤拷写锟斤拷一些锟斤拷锟街★拷锟斤拷html锟侥硷拷锟斤拷写锟诫：
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
锟斤拷也锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷要锟侥ｏ拷锟斤拷站锟侥底匡拷锟杰碉拷锟竭匡拷锟斤拷卤锟饺ワ拷恕锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷墙锟斤拷呖锟斤拷锟斤拷腋锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷歉锟斤拷锟斤拷锟斤拷锟斤拷钥锟斤拷锟斤拷锟斤拷锟轿拷锟轿伙拷锟斤拷锟斤拷锟斤拷锟斤拷锟街拷系锟斤拷锟揭伙拷恪ｏ拷锟剿ｏ拷锟阶匡拷锟斤拷锟斤拷莺锟斤拷佣锟斤拷锟斤拷恕锟�
锟斤拷锟斤拷锟斤拷锟斤拷锟絚ss锟斤拷写锟诫：
#footer {
clear: both;
background: orange;
height: 66px;
}
锟斤拷锟斤拷锟斤拷锟铰ｏ拷
锟斤拷锟藉步锟斤拷锟斤拷页锟斤拷要锟斤拷锟街拷锟侥革拷锟接结构锟侥诧拷锟斤拷锟斤拷锟斤拷郑锟�
锟斤拷锟藉步锟斤拷要锟斤拷锟杰筹拷锟斤拷页锟斤拷要锟斤拷锟街拷锟侥革拷锟接结构锟侥憋拷锟斤拷(Layout),锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷:
1.锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
2.锟斤拷锟斤拷(heading),锟斤拷锟斤拷锟斤拷站锟斤拷锟斤拷锟斤拷锟捷憋拷锟解；
3.锟斤拷锟捷ｏ拷
4.页锟斤拷锟斤拷息,锟斤拷锟斤拷锟斤拷权,锟斤拷证,锟斤拷锟斤拷锟斤拷锟斤拷(锟斤拷选)锟斤拷
锟斤拷锟斤拷锟斤拷些锟结构时锟斤拷为锟剿诧拷锟狡伙拷原锟叫匡拷埽锟斤拷锟斤拷锟斤拷锟揭拷锟絚ss锟侥硷拷"body"锟斤拷签(TAG)锟铰硷拷锟斤拷:
.hidden {
display: none;
}
".hidden"锟斤拷锟斤拷锟角硷拷锟斤拷锟斤拷锟�(class),锟斤拷锟斤拷锟斤拷锟斤拷使页锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷hidden锟斤拷锟皆拷锟�(element)锟斤拷锟斤拷示锟斤拷锟斤拷些锟斤拷锟斤拷锟皆猴拷使锟矫ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷时锟斤拷锟斤拷锟斤拷锟斤拷
锟斤拷锟斤拷锟斤拷锟角硷拷锟斤拷锟斤拷锟�(heading):
锟饺回碉拷HTML锟侥达拷锟诫，
锟斤拷锟斤拷锟斤拷锟角筹拷锟矫碉拷html锟斤拷锟斤拷锟斤拷搿ｏ拷锟斤拷锟斤拷锟斤拷锟揭伙拷锟斤拷锟�锟斤拷站锟斤拷
锟斤拷锟斤拷站锟斤拷锟斤拷锟斤拷
,锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
锟饺★拷锟斤拷锟斤拷锟斤拷html锟侥硷拷锟斤拷Header锟斤拷(Div)锟斤拷锟斤拷:
刷锟斤拷一锟斤拷页锟芥，锟斤拷涂锟斤拷钥锟斤拷锟斤拷薮锟侥憋拷锟解，锟酵憋拷锟斤拷锟斤拷围锟侥空白ｏ拷锟斤拷锟斤拷锟斤拷为
>锟斤拷签锟斤拷默锟较达拷小锟酵边撅拷(margin)锟斤拷傻模锟斤拷锟揭拷锟斤拷锟斤拷锟叫╋拷瞻锟�,锟斤拷要锟斤拷锟诫：
h1 {
margin: 0;
padding: 0;
}
锟斤拷锟斤拷锟斤拷锟角碉拷锟斤拷锟斤拷锟斤拷
锟斤拷锟狡碉拷锟斤拷锟斤拷锟斤拷锟街碉拷css锟斤拷锟斤拷锟斤拷员冉细锟斤拷樱锟斤拷锟斤拷墙锟斤拷诘诰挪锟斤拷锟斤拷堑锟绞拷锟斤拷锟斤拷锟较革拷锟斤拷堋锟斤拷锟斤拷锟絟tml锟侥硷拷锟斤拷锟诫导锟斤拷锟斤拷锟诫：
(注锟斤拷原锟教筹拷使锟斤拷锟斤拷dl锟斤拷dt锟斤拷jorux锟斤拷锟斤拷使锟斤拷锟剿革拷锟斤拷锟矫碉拷ul锟斤拷li锟斤拷签)
目前锟斤拷锟斤拷锟斤拷锟侥憋拷锟街比斤拷锟斤拷猓拷锟斤拷锟揭拷锟斤拷院锟侥教筹拷锟叫斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷郑锟斤拷锟斤拷锟揭拷锟绞憋拷锟斤拷氐锟斤拷锟斤拷锟�,锟斤拷锟角硷拷锟诫：
锟斤拷锟斤拷锟斤拷一锟斤拷锟斤拷锟饺碉拷页锟脚ｏ拷
页锟脚帮拷锟斤拷锟斤拷锟斤拷锟街ｏ拷锟斤拷叩陌锟饺�,锟斤拷证锟斤拷锟揭边的革拷锟斤拷锟斤拷锟斤拷锟斤拷
锟斤拷锟斤拷锟斤拷要锟矫革拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭革拷锟斤拷锟斤拷锟斤拷锟斤拷之前锟斤拷锟斤拷Sidebar锟斤拷Content锟斤拷系锟斤拷一锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷一锟斤拷锟铰的诧拷(div):
锟斤拷锟斤拷锟较ｏ拷锟斤拷锟角匡拷锟皆匡拷锟斤拷源锟侥硷拷锟较碉拷锟斤拷锟斤拷元锟截的革拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷IE锟斤拷锟斤拷锟斤拷锟紹UG锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷要锟斤拷锟饺筹拷锟斤拷锟斤拷源锟侥硷拷锟较ｏ拷也锟斤拷锟斤拷说锟斤拷锟角把革拷锟斤拷锟斤拷锟斤拷诎锟饺拷锟斤拷锟街わ拷锟角帮拷妫�
刷锟斤拷锟斤拷锟揭筹拷妫拷憬拷锟斤拷锟斤拷锟斤拷锟斤拷锟绞�(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
锟斤拷锟斤拷锟斤拷腔氐锟斤拷锟斤拷莶锟斤拷郑锟�锟斤拷锟斤拷锟斤拷锟斤拷锟捷憋拷锟斤拷C"About","Contact us"锟斤拷锟斤拷锟斤拷锟街讹拷锟戒；锟斤拷锟斤拷锟叫★拷
About
Enlighten Designs is an Internet solutions provider that specialises in
front and back end development. To view some of the web sites we have created view our
portfolio.
We are currently undergoing a 'face lift', so if you have any questions or would
like more information about the services we provide please feel free to contact us.
Contact Us
Phone: (07) 853 6060
Fax: (07) 853 6060
Email: [email protected]
P.O Box: 14159, Hamilton, New Zealand
More contact information锟斤拷
刷锟斤拷页锟斤拷锟斤拷钥锟斤拷锟斤拷锟紺ontent锟斤拷锟斤拷锟街筹拷锟斤拷一些锟秸白ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷
锟斤拷签锟斤拷默锟较边撅拷(margin)锟斤拷傻模锟斤拷锟斤拷潜锟斤拷锟斤拷锟斤拷锟斤拷锟叫╋拷锟斤拷说目瞻祝锟斤拷锟斤拷植锟斤拷锟斤拷锟斤拷页锟斤拷锟斤拷锟叫碉拷
锟斤拷签锟截边距都锟斤拷为0锟斤拷锟斤拷锟斤拷锟揭癸拷锟絚ss锟斤拷锟斤拷选锟斤拷锟斤拷("child css selector"),锟斤拷html锟斤拷锟侥硷拷锟结构锟叫ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷频锟�
锟斤拷签(child)锟斤拷锟斤拷锟斤拷#content锟斤拷(parent)锟斤拷,锟斤拷锟斤拷锟絚ss锟侥硷拷锟斤拷写锟诫：
#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}
锟斤拷锟斤拷锟斤拷锟角就革拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟絚ontent锟斤拷锟�
锟斤拷签锟斤拷margin锟斤拷padding锟斤拷值为0锟斤拷
锟斤拷锟斤拷锟斤拷锟斤拷页锟斤拷锟节的伙拷锟斤拷锟侥憋拷锟斤拷锟斤拷式(css)锟斤拷锟矫ｏ拷
锟斤拷锟角诧拷锟斤拷锟斤拷锟斤拷锟斤拷锟叫╋拷锟斤拷锟斤拷痰谋锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟饺ワ拷锟斤拷锟斤拷堑锟绞憋拷锟斤拷耍锟街伙拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷暮锟缴拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟轿拷锟斤拷锟饺伙拷芗锟斤拷学习锟斤拷锟教程碉拷锟剿ｏ拷锟杰好ｏ拷锟劫癸拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷芎芎锟斤拷私锟絚ss锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷页锟斤拷锟斤拷(Layout)锟斤拷锟斤拷锟斤拷锟斤拷
锟紺锟皆癸拷锟斤拷锟斤拷锟紺
锟斤拷锟斤拷锟斤拷全锟街碉拷锟侥憋拷锟斤拷式锟斤拷
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
一锟斤拷锟斤拷锟角帮拷body锟斤拷签锟斤拷锟斤拷css锟侥硷拷锟侥讹拷锟剿ｏ拷锟斤拷然锟斤拷要锟斤拷执锟斤拷要锟斤拷锟斤拷锟斤拷锟斤拷尾锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷平稀锟絝ont-family锟节碉拷顺锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟绞撅拷锟斤拷燃锟斤拷锟斤拷确锟斤拷锟斤拷锟斤拷锟节硷拷锟斤拷锟矫伙拷锟紸rial锟斤拷锟藉，锟斤拷锟斤拷锟斤拷突锟街革拷锟紿elvetica锟斤拷锟藉，锟斤拷锟斤拷锟斤拷锟狡ｏ拷color指锟斤拷锟斤拷锟斤拷色锟斤拷background指锟斤拷锟斤拷锟斤拷色锟斤拷
锟斤拷锟斤拷愣硷拷前锟斤拷锟斤拷坛痰牟锟斤拷锟斤拷锟接︼拷锟斤拷芸锟斤拷锟斤拷锟酵�(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
锟斤拷锟斤拷钥锟斤拷锟斤拷锟斤拷锟�(content)锟侥革拷锟斤拷(block)之锟斤拷募锟较短★拷耍锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷疲锟斤拷锟斤拷荼锟斤拷锟�(锟斤拷
)锟斤拷锟斤拷锟斤拷之锟斤拷募锟较讹拷锟斤拷锟斤拷15px锟斤拷每锟斤拷锟斤拷锟斤拷募锟斤拷也锟斤拷锟斤拷锟�15px锟斤拷锟斤拷锟斤拷锟斤拷css锟斤拷写锟诫：
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
然锟斤拷锟斤拷要锟斤拷content锟斤拷锟斤拷锟斤拷芏锟斤拷粘锟�25px锟侥硷拷隙锟斤拷锟解本锟斤拷锟角硷拷锟杰简单碉拷锟铰ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷只锟斤拷锟斤拷#content锟斤拷css锟侥硷拷锟叫硷拷锟斤拷padding: 25px;锟斤拷锟斤拷锟剿ｏ拷锟斤拷锟斤拷IE锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷"一锟斤拷",锟斤拷锟侥癸拷锟斤拷BUG锟斤拷锟斤拷锟斤拷锟杰帮拷锟斤拷锟角碉拷锟斤拷锟斤拷锟斤拷帧锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷职旆拷锟斤拷锟揭伙拷职旆拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷写锟斤拷锟斤拷锟街达拷锟斤拷(HACK IE),锟斤拷锟斤拷为锟斤拷隙(padding,锟斤拷Dreamweaver锟斤拷锟街斤拷锟斤拷锟�)使锟矫猴拷频锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷一锟街办法锟斤拷
锟斤拷锟斤拷锟斤拷锟斤拷要锟斤拷锟侥诧拷锟叫硷拷锟斤拷padding锟姐，锟斤拷锟侥癸拷锟杰斤拷锟斤拷锟斤拷锟斤拷示锟斤拷隙锟斤拷
同锟斤拷锟侥ｏ拷锟斤拷锟斤拷html锟侥硷拷锟斤拷content锟斤拷锟叫硷拷锟斤拷padding锟姐。
锟斤拷锟斤拷padding锟斤拷墓锟斤拷芙锟斤拷锟斤拷锟斤拷锟斤拷隙锟斤拷锟斤拷锟皆诧拷要锟斤拷锟斤拷锟斤拷锟侥匡拷锟饺ｏ拷只锟斤拷锟斤拷css锟斤拷锟斤拷锟斤拷:
#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}
锟斤拷锟斤拷锟斤拷锟斤拷之前锟矫的凤拷锟斤拷一锟斤拷锟斤拷锟斤拷锟斤拷只选锟斤拷锟斤拷锟斤拷(class)为padding锟斤拷锟揭革拷锟斤拷(parent)为#content锟斤拷#sidebar-a锟斤拷元锟斤拷(element)锟斤拷
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟叫距，content锟斤拷sidebar-a锟斤拷锟叫撅拷锟斤拷要锟接匡拷锟斤拷锟斤拷锟斤拷css锟斤拷锟斤拷没锟斤拷锟叫撅拷(leading)锟斤拷锟斤拷锟斤拷锟斤拷(attribute)锟侥ｏ拷锟斤拷锟斤拷锟斤拷锟叫革拷(line-height)锟斤拷锟皆ｏ拷锟斤拷锟斤拷锟絚ss锟斤拷写锟诫：
#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#content {
margin-right: 280px;
line-height: 18px;
}
锟斤拷锟节匡拷锟皆匡拷锟斤拷锟斤拷锟斤拷"about"锟斤拷"contact us"锟皆碉拷锟洁当突兀锟斤拷锟斤拷锟斤拷锟斤拷为锟斤拷锟斤拷使锟矫碉拷锟斤拷锟藉并锟斤拷锟斤拷一锟斤拷锟斤拷页锟斤拷锟藉，锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷锟芥换为锟斤拷锟斤拷图片锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷/images/headings/锟侥硷拷锟斤拷锟叫ｏ拷
锟芥换锟斤拷锟斤拷为锟斤拷锟斤拷html锟侥硷拷锟斤拷
锟斤拷签锟斤拷写锟诫：
锟斤拷锟角得碉拷锟斤拷图(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
锟斤拷锟竭诧拷锟斤拷锟斤拷站头锟斤拷图锟斤拷锟斤拷logo锟斤拷锟街碉拷锟斤拷疲锟�
为实锟斤拷锟斤拷锟绞憋拷锟斤拷锟揭惩凤拷锟叫э拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟斤拷锟斤拷锟酵硷拷锟�
/images/headers/about.jpg (锟斤拷锟斤拷锟斤拷锟酵�)
/images/general/logo_enlighten.gif (锟斤拷锟斤拷锟斤拷锟酵�)
锟斤拷锟斤拷锟斤拷锟角革拷#header锟斤拷锟斤拷锟接憋拷锟斤拷图锟斤拷锟斤拷
#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
锟斤拷锟斤拷使锟矫的憋拷锟斤拷锟斤拷锟斤拷为一些锟斤拷写锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟杰规定锟斤拷锟斤拷锟斤拷锟斤拷色锟斤拷图锟斤拷锟斤拷图锟斤拷锟斤拷位锟矫ｏ拷锟角凤拷锟截革拷锟皆硷拷锟斤拷锟斤拷馗锟斤拷锟街拷锟斤拷园驯锟斤拷锟缴拷锟轿拷刍锟缴拷锟斤拷锟斤拷锟轿拷锟斤拷没锟绞癸拷锟斤拷锟斤拷锟斤拷锟斤拷图片时锟斤拷锟斤拷站锟斤拷头锟斤拷锟斤拷锟斤拷锟斤拷一片锟秸白★拷应锟斤拷注锟解到图片锟斤拷路锟斤拷锟斤拷锟斤拷锟斤拷锟絚ss锟侥达拷锟轿伙拷枚锟斤拷缘模锟斤拷锟斤拷锟斤拷锟絟tml锟侥硷拷锟斤拷锟斤拷锟斤拷锟�"../"锟斤拷
锟斤拷锟斤拷锟芥换锟斤拷
锟斤拷签锟斤拷锟�"Enlighten Designs":
logo_enlighten图片锟斤拷锟斤拷头锟斤拷锟斤拷锟斤拷锟较凤拷锟斤拷锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷
锟斤拷锟斤拷锟斤拷值为锟斤拷
h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}
锟斤拷锟斤拷锟斤拷锟斤拷使锟斤拷锟斤拷锟斤拷
锟斤拷锟酵计拷锟斤拷腋锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷媳呔锟�(margin-top)为57px锟斤拷锟揭硷拷隙(padding-right)为31px锟斤拷锟斤拷锟斤拷图锟斤拷示(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
注锟解：细锟侥碉拷锟斤拷锟斤拷芑岱拷锟斤拷锟斤拷锟绞癸拷锟斤拷锟絧adding-right锟斤拷锟斤拷锟斤拷margin-right锟斤拷锟斤拷锟斤拷锟斤拷为IE锟侥癸拷毛锟斤拷锟斤拷锟劫ｏ拷锟斤拷锟斤拷锟节诧拷锟斤拷锟侥地凤拷锟睫凤拷锟斤拷确锟斤拷示margin-right/left锟斤拷锟皆ｏ拷锟斤拷锟斤拷使锟斤拷锟斤拷padding(锟斤拷隙,Dreamweaver锟斤拷锟街憋拷锟斤拷为锟斤拷锟�)锟斤拷锟皆★拷
Jorux锟斤拷示锟斤拷希锟斤拷锟斤拷锟斤拷锟斤拷院锟斤拷css锟斤拷写锟斤拷锟斤拷锟叫ｏ拷锟斤拷锟斤拷使锟斤拷padding锟斤拷锟皆ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟介烦锟斤拷
锟节八诧拷锟斤拷页锟斤拷锟斤拷息(锟斤拷权锟斤拷)锟侥憋拷锟斤拷锟斤拷锟矫ｏ拷
锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷页锟脚碉拷锟侥憋拷锟斤拷示锟斤拷
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷要锟斤拷锟矫达拷锟斤拷锟斤拷锟接碉拷锟侥憋拷锟斤拷锟斤拷示锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷没锟叫改憋拷锟侥憋拷锟斤拷锟斤拷色(锟斤拷然为#c9c9c9)锟斤拷锟斤拷只锟斤拷锟斤拷锟铰伙拷锟斤拷锟斤拷失锟斤拷
#footer a {
color: #c9c9c9;
text-decoration: none;
}
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷些锟斤拷锟斤拷锟斤拷锟接碉拷锟侥憋拷锟斤拷锟斤拷锟斤拷锟斤拷锟酵ｏ拷锟斤拷锟斤拷戏锟绞憋拷锟缴�#db6d16锟斤拷
#footer a:hover {
color: #db6d16;
}
然锟斤拷锟斤拷锟斤拷锟斤拷锟揭筹拷偶锟斤拷匣锟缴拷锟斤拷媳呖锟斤拷锟絝ooter锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭恍╋拷锟较讹拷锟斤拷锟斤拷哟锟斤拷谋锟斤拷锟斤拷芯啵�
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
锟斤拷锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷木锟斤拷锟斤拷酶锟斤拷锟斤拷锟斤拷锟�(#altnav)锟斤拷锟揭革拷锟斤拷锟斤拷锟斤拷要指锟斤拷锟斤拷锟角ｏ拷锟斤拷锟斤拷锟斤拷锟角憋拷锟斤拷锟斤拷锟矫匡拷锟斤拷(width)锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟侥ｏ拷锟斤拷锟斤拷锟斤拷锟角帮拷#altnav锟侥匡拷锟斤拷锟斤拷锟斤拷为350px锟斤拷锟皆匡拷锟斤拷锟侥憋拷锟侥筹拷锟斤拷(为锟斤拷锟矫革拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟绞撅拷锟饺�)锟斤拷然锟斤拷锟斤拷锟侥憋拷锟斤拷锟揭讹拷锟诫：
#footer #altnav {
width: 350px;
float: right;
text-align: right;
}
锟斤拷锟斤拷惆达拷锟斤拷锟斤拷戏锟斤拷锟斤拷锟斤拷锟斤拷玫锟斤拷锟斤拷锟酵硷拷锟绞撅拷锟揭筹拷锟斤拷锟绞�(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
锟节九诧拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷(锟斤拷锟斤拷)锟斤拷
Jorux注:锟斤拷锟斤拷锟斤拷之锟斤拷锟皆凤拷锟节第九诧拷锟斤拷锟斤拷锟斤拷锟斤拷为锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟角憋拷锟教筹拷锟斤拷锟斤拷锟窖的诧拷锟街ｏ拷锟斤拷然也锟角硷拷锟斤拷锟斤拷锟斤拷锟斤拷叩牡胤锟�.锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟阶匡拷锟窖ｏ拷锟斤拷锟斤拷锟斤拷锟斤拷艿锟斤拷锟皆斤拷锟窖ｏ拷锟斤拷锟杰硷拷值锟斤拷锟揭伙拷锟斤拷丫锟斤拷懿锟斤拷祝锟斤拷锟斤拷锟斤拷只锟斤拷锟叫革拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷幕锟斤拷锟斤拷锟轿匡拷锟节八诧拷锟侥革拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷
锟斤拷去锟斤拷锟斤拷锟斤拷锟斤拷锟侥猴拷色锟斤拷锟斤拷锟斤拷锟斤拷锟叫撅拷锟斤拷锟狡筹拷html锟侥硷拷锟斤拷main-nav锟斤拷锟�"class="hidden"",使锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷示锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷实锟街碉拷锟斤拷锟斤拷图片锟侥变换锟侥凤拷锟斤拷锟角达拷css锟斤拷锟斤拷模锟斤拷锟斤拷锟斤拷锟斤拷魏锟絡s锟斤拷锟斤拷flash锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷玫锟酵计拷锟�4锟斤拷锟街憋拷锟斤拷锟斤拷锟斤拷小图锟斤拷隙锟斤拷傻锟酵计拷锟斤拷锟斤拷锟斤拷锟绞撅拷锟斤拷锟斤拷锟斤拷锟�4锟斤拷图锟斤拷锟斤拷锟斤拷/images/nav/锟侥硷拷锟斤拷锟斤拷:
锟斤拷锟斤拷实锟街碉拷锟斤拷锟斤拷锟侥讹拷态效锟斤拷锟斤拷锟斤拷图锟斤拷示(锟斤拷锟斤拷锟斤拷锟酵�)锟斤拷
锟斤拷锟斤拷页锟斤拷示锟斤拷只锟斤拷图锟叫猴拷锟斤拷锟斤拷牟锟斤拷郑锟斤拷锟斤拷锟斤拷每锟斤拷图锟斤拷为锟较ｏ拷锟叫ｏ拷锟斤拷锟斤拷锟斤拷锟街的伙拷锟斤拷未锟斤拷锟斤拷锟斤拷锟斤拷时锟斤拷示锟较诧拷锟斤拷锟斤拷锟斤拷锟斤拷锟酵Ｊ憋拷锟斤拷锟绞撅拷锟斤拷锟斤拷胁锟斤拷锟斤拷锟窖★拷锟绞憋拷锟斤拷锟绞撅拷虏锟斤拷锟�
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷css锟斤拷锟诫部锟街ｏ拷锟斤拷锟斤拷css锟侥硷拷锟斤拷写锟诫：
/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { margin: 0; padding: 0; }
注锟解：/* Main Navigation */为锟斤拷锟斤拷css锟侥硷拷锟缴讹拷锟皆碉拷说锟斤拷锟斤拷锟斤拷锟斤拷影锟斤拷锟斤拷帧锟�
#main-nav锟斤拷height锟斤拷锟皆讹拷锟斤拷锟斤拷main-nav锟斤拷母叨龋锟�"#main-nav ul" 锟斤拷锟斤拷main-nav锟斤拷锟斤拷锟叫憋拷锟斤拷锟斤拷锟皆ｏ拷锟斤拷锟斤拷锟斤拷锟饺讹拷锟斤拷锟斤拷margin锟斤拷padding为0锟斤拷
锟斤拷锟斤拷锟斤拷前锟斤拷锟斤拷疲锟斤拷锟斤拷锟斤拷锟接︼拷煤锟斤拷锟斤拷锟斤拷一锟斤拷锟侥撅拷锟诫，锟斤拷锟斤拷锟揭拷锟斤拷锟絤ain-nav锟斤拷锟斤拷锟竭撅拷(padding-left)为11px,锟斤拷锟斤拷锟斤拷IE5锟斤拷Mac锟斤拷锟斤拷锟斤拷锟紹UG锟斤拷锟斤拷要锟斤拷锟斤拷锟斤拷锟铰达拷锟诫：
/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */
锟斤拷锟斤拷锟斤拷锟斤拷钥锟斤拷锟斤拷锟斤拷锟斤拷斜锟斤拷锟斤拷锟斤拷锟斤拷11px锟侥撅拷锟诫，锟斤拷锟斤拷锟叫憋拷锟斤拷目锟斤拷锟斤拷锟脚的ｏ拷锟斤拷
锟斤拷锟斤拷锟叫憋拷锟斤拷目锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷使锟斤拷锟斤拷锟斤拷液锟斤拷锟斤拷锟斤拷校锟�
#main-nav li { float: left; }
为锟斤拷使锟叫憋拷锟斤拷目锟侥尺达拷锟斤拷锟斤拷锟斤拷锟斤拷牟惚ｏ拷锟揭伙拷拢锟斤拷锟斤拷锟斤拷酶锟斤拷锟斤拷锟斤拷锟绞癸拷斜锟斤拷锟侥匡拷锟斤拷谋锟斤拷锟斤拷兀锟叫达拷耄�
#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}
锟斤拷锟脚ｏ拷要实锟街碉拷锟斤拷锟斤拷锟酵ｏ拷锟斤拷斜锟斤拷锟侥匡拷锟绞憋拷锟斤拷锟绞撅拷锟斤拷锟酵计拷锟斤拷胁锟斤拷锟斤拷锟斤拷锟斤拷要锟斤拷锟斤拷锟斤拷图片锟斤拷锟斤拷锟狡讹拷50px锟斤拷写锟诫：
#main-nav li a:hover {
background-position: 0 -50px;
}
锟斤拷锟斤拷锟斤拷锟叫憋拷锟斤拷目锟斤拷锟矫匡拷锟饺和憋拷锟斤拷图片锟斤拷路锟斤拷锟斤拷
#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷木锟斤拷牵锟斤拷锟斤拷斜锟斤拷锟侥匡拷锟窖∈憋拷锟斤拷锟绞撅拷锟斤拷锟酵计拷锟斤拷虏锟斤拷锟轿拷锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟揭恍ヽss锟斤拷锟斤拷锟皆拷械锟絚ss锟斤拷锟斤拷锟斤拷一些锟睫改ｏ拷
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}
锟斤拷锟较匡拷锟斤拷锟接达拷锟絚ss选锟斤拷锟斤拷锟斤拷锟斤拷识锟斤拷body锟斤拷签锟斤拷锟斤拷(class)锟斤拷锟斤拷html锟斤拷为锟斤拷
锟斤拷锟斤拷css选锟斤拷锟斤拷锟斤拷锟斤拷li#about,li#about a,锟侥憋拷锟斤拷锟斤拷锟斤拷锟狡讹拷100px锟斤拷使锟斤拷锟斤拷示锟斤拷锟斤拷图片锟斤拷锟铰诧拷锟斤拷
锟斤拷锟斤拷锟斤拷锟较ｏ拷锟斤拷锟秸就凤拷锟斤拷锟斤拷锟酵计诧拷锟斤拷锟絙ody锟斤拷签锟斤拷锟斤拷锟斤拷斜浠伙拷锟斤拷锟斤拷锟斤拷薷锟絚ss锟斤拷#header为锟斤拷
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
锟斤拷锟剿撅拷锟斤拷锟斤拷锟�"About"锟斤拷页锟斤拷锟斤拷锟斤拷,锟斤拷锟斤拷锟斤拷锟狡ｏ拷锟睫革拷html锟斤拷body锟斤拷锟斤拷为services/portfolio/contact锟斤拷锟斤拷锟斤拷应html锟侥硷拷锟斤拷锟街别保存。
锟斤拷css锟侥硷拷锟斤拷锟斤拷锟接革拷锟斤拷锟斤拷页锟斤拷应锟斤拷头锟斤拷锟斤拷锟斤拷图片路锟斤拷(锟斤拷services锟斤拷页锟斤拷头锟斤拷锟斤拷锟斤拷图片为services.jpg,锟斤拷css锟斤拷锟斤拷锟斤拷锟斤拷锟铰达拷锟斤拷)锟斤拷
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
然锟斤拷锟矫筹拷锟斤拷锟斤拷锟接斤拷锟斤拷些锟斤拷页锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭伙拷锟叫★拷锟秸撅拷恕锟�
锟斤拷十锟斤拷锟斤拷锟斤拷锟絀E锟斤拷锟斤拷锟斤拷锟斤拷锟绞綛UG锟斤拷
要锟斤拷锟斤拷锟剿教筹拷锟斤拷要IE锟斤拷锟斤拷前锟侥版本锟斤拷锟叫诧拷锟皆ｏ拷锟斤拷锟斤拷锟斤拷锟�锟斤拷锟斤拷锟斤拷锟截碉拷锟斤拷锟斤拷锟襟部凤拷锟叫癸拷锟矫伙拷使锟矫碉拷锟斤拷IE6.0锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟饺ワ拷恕锟�
IE锟斤拷锟斤拷要锟斤拷锟斤拷锟斤拷锟斤拷锟絀E5锟斤拷IE5.5,锟斤拷锟戒不锟斤拷识锟斤拷css锟斤拷margin值为auto锟斤拷要实锟街诧拷锟斤拷屑锟斤拷锟诫，锟斤拷锟斤拷耄�
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}
锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷之锟斤拷锟斤拷站锟斤拷content锟斤拷锟斤拷谋锟揭诧拷锟斤拷锟叫硷拷锟斤拷锟斤拷耍锟斤拷锟斤拷锟斤拷锟揭拷锟斤拷锟斤拷锟斤拷锟斤拷锟诫，锟斤拷锟诫：
#page-container {
width: 760px;
margin: auto;
text-align: left;}
锟斤拷锟斤拷页锟脚碉拷BUG锟斤拷锟斤拷锟斤拷权锟斤拷锟捷硷拷锟斤拷锟铰碉拷#copyright锟斤拷锟叫ｏ拷锟斤拷html锟叫硷拷锟诫：
锟斤拷css锟侥硷拷锟叫硷拷锟诫，锟斤拷锟斤拷#footer锟斤拷padding-top: 13px;锟狡筹拷锟斤拷
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}
锟斤拷锟揭拷锟斤拷锟斤拷BUG锟角碉拷锟斤拷锟斤拷诘锟斤拷锟斤拷锟斤拷谋锟窖★拷斜锟斤拷锟侥匡拷锟斤拷锟斤拷锟斤拷锟酵Ｊ�(锟斤拷锟斤拷about锟斤拷锟斤拷页锟斤拷body锟斤拷锟斤拷为about锟斤拷锟斤拷锟斤拷锟角斤拷锟斤拷锟斤拷频锟斤拷锟斤拷锟斤拷锟斤拷锟絘bout图片锟斤拷时)锟斤拷锟斤拷锟斤拷图片锟斤拷失锟剿ｏ拷锟斤拷锟斤拷锟揭拷锟斤拷耄�
body.about li#about,
body.about li#about a,
body.about dt#about a:hover,
body.services li#services,
body.services li#services a,
body.services li#services a:hover,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.portfolio li#portfolio a:hover,
body.contact li#contact,
body.contact li#contact a,
body.contact li#contact a:hover {
background-position: 0 -100px;
}
锟斤拷锟教程碉拷锟剿斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷貌锟斤拷锟斤拷锟�锟斤拷锟斤拷锟斤拷支锟斤拷Jorux锟斤拷
锟斤拷然锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟絁orux锟侥凤拷锟斤拷锟斤拷锟斤拷锟斤拷锟�(锟斤拷锟斤拷说锟角凤拷锟诫，锟斤拷锟斤拷锟斤拷说锟斤拷Jorux锟斤拷原锟侥碉拷锟斤拷锟解，锟斤拷锟斤拷锟斤拷锟叫很讹拷锟皆拷锟斤拷叩幕锟�)锟斤拷锟斤拷榭丛拷摹锟�
width="236" height="36" alt="Enlighten Designs" border="0" />
Love thias website
free casino games