用css布局网之十步教程.docVIP

用css布局网站之十步教程 第一步：规划网站，本教程将以图示为例构建网站首先需要规划网站，本教程将以下图为例构建网站。?　　其基本布局见下图：主要由五个部分构成：??Example Source Code?[] 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模板及文件目录等创建html模板。　　代码如下： ?Example Source Code?[] !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlheadmeta?http-equiv=Content-type?content=text/html;?charset=UTF-8?/titleCompanyName?-?PageName/titlemeta?http-equiv=Content-Language?content=en-us?/?meta?http-equiv=imagetoolbar?content=no?/meta?name=MSSmartTagsPreventParsing?content=true?/?meta?name=description?content=Description?/meta?name=keywords?content=Keywords?/?meta?name=author?content=Enlighten?Designs?/style?type=text/css?media=all@import?css/master.css;/style/headbody/body/html 　　将其保存为index.html,并创建文件夹css，images，网站结构如下： 2.创建网站的大框：　　建立一个宽760px的盒子，它将包含网站的所有元素。　　在html文件的body和/body之间写入?Example Source Code?[] div?id=containerHello?world./div 　　创建css文件，命名为master.css,保存在/css/文件夹下。写入：?Example Source Code?[] #container?{width:?760px;background:?red;} 　　控制html的id为container的盒子的宽为760px，背景为红色。　　现在为了让盒子居中，写入margin:?auto;，使css文件为：?Example Source Code?[] #container?{width:?760px;margin:?auto;background:?red;} 　　现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入： ?Example Source Code?[] html,?body?{margin:?0;padding:?0;} 第三步：将网站分为五个div，网页基本布局的基础：1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：?Example Source Code?[] div?id=containerdiv?id=main-navMain?Nav/div?div?id=headerHeader/div?div?id=sidebar-aSidebar?A/div?div?id=contentContent/div?div?id=footerFooter/div/div 2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入： ?Example Source Code?[] #main-nav?{background:?red;height:?50px;}#header?{background:?blue;height:?150px;}