用css网站布局之十步实录～

http://www.52css.com/article.asp?id=179

用css网站布局之十步实录！

第五步：网页主要框架之外的附加结构的布局与表现

 

理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面： 

 

最后我们回到内容部分：
　　用<h2<>表现内容标题–"About","Contact us"；用<p>表现段落；用</br>断行。

刷新页面可以看到在Content层中又出现一些空白，这是由于<h2><p>标签的默认边距(margin)造成的，我们必须消除这些恼人的空白，当又不想把网页中所有的<h2><p>标签地边距都设为0，这就需要使用css的子选择器("child css selector"),在html的文件结构中，我们想控制的<h2><p>标签(child)是属于#content层(parent)的,因此在css文件中写入：

Example Source Code [www.52css.com]

#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}

 

 

 

 

然后需要让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;
}

 

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

 <h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>
 

 应该注意到图片的路径是相对于css的存放位置而言的，而不是html文件，因此有"../"。

 注意：细心的你可能会发现我们使用了padding-right而不是margin-right，这是因为IE的怪毛病不少，它会在不定的地方无法正确显示margin-right/left属性，所以使用了padding(间隙,Dreamweaver中又被称为填充)属性。
　　作者提示：希望大家在以后的css编写过程中，尽量使用padding属性，以免造成浏览器调试麻烦。

 

 

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

然后我们想给页脚加上灰色的上边框，在footer层的四周设置一些间隙，并加大文本的行距：

Example Source Code [www.52css.com]

#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，略宽于文本的长度(为了让副标题的文字显示完全)，然后让文本向右对齐：

Example Source Code [www.52css.com]

#footer #altnav {
width: 350px;
float: right;
text-align: right;
}

 

　根据先前的设计，导航条应该和左边有一定的距离，这就需要设置main-nav层的左边距(padding-left)为11px,但由于IE5和Mac浏览器的BUG，需要加入以下代码：

Example Source Code [www.52css.com]

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

 

 

第十步：解决IE浏览器的显示BUG

　　要继续此教程需要IE的以前的版本进行测试，绝大部分用户使用的是IE6.0，因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：