当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

初学者简单学习CSS网页布局(7)

时间:2009-10-02 21:47来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

     background-color:#ddd;}

#nav{height:25px;

     background-color:#fc0;}

#mid{height:300px;}

#left{width:98px;

      height:298px;

      border:1px solid #999;

      float:left;

      background-color:#ddd;}

#right{height:298px;

       background-color:#ccc;}

.content{width:98px;

         height:148px;

        background-color:#c00;

        border:1px solid #999;

        float:left;}

#content2{background-color:#f60;}

#footer{height:80px;

     background-color:#fc0;}

</style></head>

<body>

<div id="top">顶部广告区</div>

<div id="nav">导航区</div>

<div id="mid">

   <div id="left">纵向导航区</div>

   <div id="right">

       <div class="content">内容A</div>

       <div class="content" id="content2">内容B</div>

       <div class="content">内容C</div>

       <div class="content" id="content2">内容D</div>

       <div class="content" id="content2">内容E</div>

       <div class="content">内容F</div>

       <div class="content" id="content2">内容G</div>

       <div class="content">内容H</div>

   </div>

</div>

<div id="footer">底部版权区</div>

</body>

</html>

笔者稍微修改了XHTML部分的代码,选了4个具体内容区加上了id名称为content2的属性,这是为了使这4个区域有不同的背景色。在浏览器地址栏输入http://localhost/ div_page.htm,浏览效果如图11.13所示。

本例综合了前面的布局知识,如居中等。不过,而由CSS代码可得,主体内容区(id名称为mid)的宽度是500像素,高度是300像素。通过分析图可以观察得出以下关系公式:

主体内容区宽度=纵向导航区宽度+具体内容区宽度×4

主体内容区高度=纵向导航区高度=具体内容区高度×2

在CSS代码中,纵向导航区(id名称为left)的宽度只有98像素,高度为298像素。而右边具体内容区(class名称为content)的宽度也只有98像素,高度为148像素,可得:

纵向导航区宽度+具体内容区宽度×4=490(像素)

纵向导航区高度=298(像素)

具体内容区高度×2=296(像素)

主体内容区(id名称为mid)的宽度与高度为什么会与内含的div宽度有偏差?这涉及浏览器解析CSS时对宽度和高度的计算方法,IE7.0浏览器和FireFox浏览器解析div的宽度和高度设置值并不包括边框。由CSS代码可得,纵向导航区(id名称为left)和具体内容区(class名称为content)的边框为1像素粗,所以关系公式应该进一步修改为:

图11.14  网页布局实例

主体内容区宽度=纵向导航区宽度+纵向导航区边框×2+具体内容区宽度×4+具体内容区边框×8

主体内容区高度=纵向导航区高度+纵向导航区边框×2=具体内容区高度×2+具体内容区边框×4

宽度和高度的计算是合理布局页面的很重要的基础,一旦计算有误将导致页面布局混乱。并且针对不同浏览器有不同计算办法,本书示例使用IE7.0浏览器,本书后面章节将学习不同浏览器的兼容性解决办法。

 

—  注意:在宽度和高度的计算中,IE6.0以前版本的浏览器解析div的宽度和高度设置值包括边框,如果读者使用的是IE6.0以前版本的浏览器,尝试修改宽度值以达到图11.14的效果。

(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接