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

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

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

 

—  说明:margin属性和padding属性类似于表格单元格的cellspacing属性和cellpadding属性,不过margin属性和padding属性作用于所有块状元素。

 

使div元素水平居中的方法有多种,常用的方法是用CSS设置div的左右边距,即margin-left属性和margin-right属性。当设置div左外边距和右外边距的值为auto,即自动时,左外边距和右外边距将相等,即达到了div水平居中的效果。在D:\web\目录下创建网页文件(XHTML1.0),命名为div_align.htm,编写div_align.htm文件代码如代码11.5所示。

 

代码11.5  设置div水平居中:div_align.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;

 }

#all{width:75%;

   height:200px;

   background-color:#eee;

   border:1px solid #000;

   margin-left:auto;

   margin-right:auto;

   }

</style>

</head>

<body>

   <div id="all">布局页面内容</div>

</body>

</html>

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

是不是很简单?设置外边距的CSS代码可以进一步简化,使用margin属性,编写方法为:

margin:0px auto;

图11.5  设置div水平居中

margin属性值前面的0代表上边距和下边距为0像素,auto代表左边距和右边距为auto,即自动设置。读者注意,0px和auto之间使用空格符号分隔,而不是逗号。还有一种方法是使用html或body的text-align属性,设置其值为center,即所有对象将居中。这样将导致页面文本居中,所以不作推荐,其编写方法为:

html,body{text-align:center;}

 11.1.6  div元素的嵌套

类似于表格布局页面,为了实现复杂的布局结构,div元素也需要互相嵌套。不过在布局页面时尽量少嵌套,因为XHTML元素多重嵌套将影响浏览器对代码的解析速度。在D:\web\目录下创建网页文件(XHTML1.0),命名为div_div.htm,编写div_div.htm文件代码如代码11.6所示。

 

代码11.6  div嵌套:div_div.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;

  }

#all{width:400px;

     height:300px;

     background-color:#600;

     margin:0px auto;

     }

#one{width:300px;

     height:120px;

     background-color:#eee;

     border:1px solid #000;

     margin:0px auto;

     }

#two{width:300px;

       height:120px;

       background-color:#eee;

       border:1px solid #000;

       margin:0px auto;

       }

</style></head>

<body>

<div id="all">

  <div id="one">顶部</div>

  <div id="two">底部</div>

</div>

</body>

</html>

为了更方便看到div的表现,笔者给内部div设置了浅灰色背景色和黑色边框,而外部的div为深红色背景色。本示例综合了div居中的知识,内部的2个div水平居中在其父容器(外部div)中。在浏览器地址栏输入http://localhost/div_div.htm,浏览效果如图11.6所示。

图11.6  div嵌套

 11.1.7  div元素的浮动

作为块状元素,通过div布局网页,CSS设置其属性,完全符合内容与表现分离。不过一个div标签占据一行,怎样实现布局中并列的2块区域呢?块状元素有一个很重要的“float”属性,可以使多个块状元素并列于一行。

float属性也被称为浮动属性,这个词非常形象。对前面的div元素设置浮动属性后,当前面的div元素留有足够的空白宽度时,后面的div元素将自动浮上来,和前面的div元素并列于一行。float属性的值有left、right、none和inherit。很多对象都有inherit属性,这是继承属性,代表继承父容器的属性。float属性值为none时,块状元素不会浮动,这也是块状元素的默认值。float属性值为left时,块状元素将向左浮动;float属性值为right时,块状元素将向右浮动。(责任编辑:大宝库)



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