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

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

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

 

—  注意:使2个div并列于一行的前提是:这一行有足够的宽度容纳2个div的宽度。

 

(1)在D:\web\目录下创建网页文件(XHTML1.0),命名为div_float.htm,编写div_float.htm文件代码如代码11.7所示。

 

代码11.7  设置div浮动:div_float.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;

  }

#one{width:125px;

     height:120px;

     background-color:#eee;

     border:1px solid #000;

     float:left;

     }

#two{width:200px;

     height:120px;

     background-color:#eee;

     border:1px solid #000;

    }

</style></head>

<body>

<div id="one">第1个div</div>

<div id="two">第2个div</div>

</body>

</html>

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

(3)笔者只设置了第1个div元素向左浮动,第2个div元素“流”上来了,并紧挨着第1个div元素。设置第2个div向右浮动如代码11.8所示。

 

代码11.8  设置div浮动:div_float.htm

 

#two{width:200px;

       height:120px;

       background-color:#eee;

       border:1px solid #000;

       float:right;

       }

(4)在浏览器地址栏输入http://localhost/div_float.htm,浏览效果如图11.8所示。

       

          图11.7  设置div向左浮动                           图11.8  div左浮动和右浮动

(5)这时,第2个div紧挨着其父容器(浏览器)的右边框,当然,这2个div元素也可以换个位置,即设置CSS如代码11.9所示。

 

代码11.9  设置div浮动:div_float.htm

 

#one{width:125px;

     height:120px;

     background-color:#eee;

     border:1px solid #000;

     float:right;

     }

#two{width:200px;

       height:120px;

       background-color:#eee;

       border:1px solid #000;

       float:left;

       }

(6)在浏览器地址栏输入http://localhost/div_float.htm,浏览效果如图11.9所示。

图11.9  交换div浮动方向

浮动属性是CSS布局的最佳利器,可以通过不同的浮动属性值灵活地定位div元素,以达到灵活布局网页的目的。块状元素(包括div)浮动的范围由其被包含的父容器所决定,以上实例div元素的父容器就是body或html。

为了更加灵活地定位div元素,CSS提供了clear属性,中文意思即为“清除”。clear属性的值有none、left、right和both,默认值为none。当多个块状元素由于第1个设置浮动属性而并列时,如果某个元素不需要被“流”上去,即可设置相应的clear属性。

(1)在D:\web\目录下创建网页文件(XHTML1.0),命名为div_clear.htm,编写div_clear.htm文件代码如代码11.10所示。

 

代码11.10  div的清除属性:div_clear.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:170px;

     background-color:#600;

     margin:0px auto;(责任编辑:大宝库)



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