案例中使用设计简单网第一步:规划网站,以图示为例构建网站其基本布局见下图规划网站主要由五个部分构成1、MainNavigation导航条,具有按钮特效。Width:760pxHeight:50px2、Header网站头部图标,包含网站得logo和站名。Width:760pxHeight:150px3、Content网站得主要内容。Width:480pxHeight:Changesdependingoncontent4、Sidebar边框,一些附加信息。Width:280pxHeight:Changesdependingoncontent5、Footer网站底栏,包含版权信息等。Width:760pxHeight:66px。HTML+CSS+DIV建站----实例讲解第二步:创建html模板及文件目录等2、创建网站得大框,即建立一个宽760px得盒子,她将包含网站得所有元素。控制html得id为page-container得盒子得宽为760px,背景为红色:HTML+CSS+DIV建站----实例讲解第三步:将网站分为五个div,网页基本布局得基础大家学习辛苦了，还是要坚持2、为了将五个部分区分开来,我们将这五个部分用不同得背景颜色标示出来,在css文件写入表现如下HTML+CSS+DIV建站----实例讲解第四步:网页布局与div浮动等2、往主要内容得盒子中写入文字。在html文件中写入表现如下表现如下问题:网站得底框跑到边框得下边了。之前将边框向右浮动,浮动可以理解为她位于整个盒子之上得另一层。因此我们往css中写入:表现如下HTML+CSS+DIV建站----实例讲解第五步:网页主要框架之外得附加结构得布局与表现现在加入标题(heading)接下来就是导航条目前导航条得表现比较糟糕,以后将介绍其特殊表现,这里首先暂时隐藏导航条,加入:我们跳一步,先到页脚:理论上,我们可以控制源文件上得任意元素得浮动,但由于IE浏览器得BUG,被浮动层需要首先出现在源文件上,也就就是说我们把副标题放在版权和认证得前面:刷新页面,将看到如下所示最后我们回到内容部分:用<h2>表现内容标题–"About","Contactus";用<p>表现段落;用</br>断行。小技巧:刷新页面可以看到在Content层中又出现一些空白,这就是由于<h2><p>标签得默认边距(margin)造成得,必须消除空白,当又不想把网页中所有得<h2><p>标签地边距都设为0,这就需要使用css得子选择器("childcssselector"),在html得文件结构中,我们想控制得<h2><p>标签(child)就是属于#content层(parent)得,因此在css文件中写入:HTML+CSS+DIV建站----实例讲解第六步:页面内得基本文本得样式(css)设置可以看到内容(content)得各块(block)之间得间隙太小,在css中写入:然后需要让content层得四周都空出25px得间隙:方案一:可以在#content得css文件中加入padding:25px;方案二:需要填充得层中加入padding层,她得功能仅限于显示间隙:同样得,再往html文件得content层中加入padding层。然后在css中添加:接下来设置行距,content和sidebar-a得行距需要加宽,但在css中就是没有行距(leading)这种属性(attribute)得,但就是有行高(line-height)属性,因此往css中写入:<h2><imgsrc="images/headings/about、gif"width="54"height="14"alt="About"><h2><imgsrc="images/he/></h2adings/contact、gif"width="98"height="14"alt="ContactUs"/></h2>HTML+CSS+DIV建站----实例讲解第七步:网站头部图标与logo部分得设计首先给#header层添加背景图案接着替换掉<h1></h1>标签里得"EnlightenDesigns"这样我们使存在于<h1>层得图片向右浮动,并且上边距(margin-top)为57px,右间隙(padding-right)为31px,如下图所示HTML+CSS+DIV建站----实例讲解第八步:页脚信息(版权等)得表现设置如果想让存在链接得文本,在鼠标悬停在其上方时变色为#db6d16:如果想让副导航层(#altnav)向右浮动,需要设置#altnav得宽度并且想让文本向右对齐:HTML+CSS+DIV建站----实例讲解第九步:导航条得制作(较难)导航条得动态效果如下图所示接下来进入css代码部分,先往css