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

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

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

图11.11  右边div元素宽度自适应

 

代码11.12  div内容居中:div_demo2.htm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>div内容居中</title>

<style type="text/css">

*{margin:0px;

  padding:0px;

  }

 body,html{height:100%;}

.center{width:300px;

     height:250px;

     text-align:center;

     line-height:250px;

     background-color:#eee;

     border:1px solid #000;

     float:left;

     }

</style></head>

<body>

<div class="center">

   我在中间

</div>

<div class="center">

   <img src="img/cs.jpg" width="120" height="120" />

</div>

</body>

</html>

为了更方便看到div的表现,笔者给div设置了浅灰色背景色和黑色边框。在浏览器地址栏输入http://localhost/div_demo2.htm,浏览效果如图11.12所示。

图11.12  div内容居中

笔者在这里用了text-align属性,即内含内容水平居中,也用了line-height属性,这是行距属性,当设置为div的高度时,其所含内容就垂直居中了。

 11.1.9  一个典型的网页布局实例

本节综合前面学习的布局知识,制作比较典型的网页布局实例,先分析这个例子布局的要求。这个例子要求页面有上下4行区域,分别用作广告区、导航区、主体区和版权信息区。而主体区又分为左右2个大区,左区域用于文章列表,右区域用于8个主体内容区。看上去布局区域比较多,用表格布局需要很多行代码才能完成。利用div和CSS可以很好地完成,并且代码比较简练。

根据实例要求作图,并分析布局的结构,从而方便编写div布局的结构代码,笔者做分析图如图11.13所示,并在每个区域做了id命名(#符号开头),以方便div编写。

图11.13  网页布局结构分析

从分析图可以看出整个页面的结构,其中,#top代表广告区、#nav代表导航区、#mid代表主体区、#left代表#mid所包含的左区域、#right代表#mid所包含的右边区域、#bt代表版权信息区。

#right区域包含8个具体内容区,由于这些内容区的尺寸相同,所以在实例中将会使用class选择符作为统一样式,对这个8个区域进行CSS样式指定。根据结构分析图可以编写XHTML部分的结构代码,编写如下:

<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">内容B</div>

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

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

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

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

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

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

   </div>

</div>

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

笔者在8个具体内容区用了同一个class名称的选择符,用于在CSS中指定统一的样式。在D:\web\目录下创建网页文件(XHTML1.0),命名为div_page.htm,编写div_page.htm文件代码如代码11.13所示。

 

代码11.13  div网页布局:div_page.htm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>网页布局实例</title>

<style type="text/css">

* {margin:0px;

   padding:0px;

  }

#top,#nav,#mid,#footer{width:500px;

         margin:0px auto;}

#top{height:80px;(责任编辑:大宝库)



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