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

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

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

     }

.one,.two,#three_1,#three_2,#three_3,#three_4{width:120px;

     height:50px;

     background-color:#eee;

     border:1px solid #000;

     }

.one{float:left;}

.two{float:right;}

#three_1{clear:none;}

#three_2{clear:both;}

#three_3{clear:right;}

#three_4{clear:left;}

</style></head>

<body>

<div class="all">

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

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

  <div id="three_1">第3个div(clear:none;)</div>

</div>

<div class="all">

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

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

  <div id="three_2">第3个div(clear:both;)</div>

</div>

<div class="all">

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

  <div id="three_3">第2个div(clear:right;)</div>

  <div class="two">第3个div</div>

</div>

<div class="all">

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

  <div id="three_4">第2个div(clear:left;)</div>

  <div class="two">第3个div</div>

</div>

</body>

</html>

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

图11.10  div清除属性

— 第1种情况为默认情况,即clear属性值为none,由于前面的div都设置了浮动属性(1个向左浮动,1个向右浮动),所以第3个div元素自动“流”上去,处于2个div之间的空白处。

— 第2种情况clear属性值为both,即不管前面的div设置向左浮动还是向右浮动,此div元素不自动“流”上去。其不受浮动影响,保持在底部不动。

— 第3种情况clear属性值为right,第2个div两边都有浮动的div,但不允许向右浮动的div处于同一行,所以第3个div元素自动换行。

— 第4种情况clear属性值为left,第2个div两边都有浮动的div,但不允许向右浮动的div处于同一行,所以第2个div元素自动换行。

通过clear属性,div元素的定位更加方便自如,希望读者多加练习。

 11.1.8  一些高级的div布局技巧

为了满足更多布局的要求,本节特别选择几个常用布局技巧。

(1)右边div元素宽度自适应。本例为并排2个div,其中左边的div为固定宽度,右边div为自适应宽度。常用于文章列表和文章内容的页面布局。在D:\web\目录下创建网页文件(XHTML1.0),命名为div_demo.htm,编写div_demo.htm文件代码如代码11.11所示。

 

代码11.11  右边div元素宽度自适应:div_demo.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:70%;

     height:200px;

     background-color:#eee;

     border:1px solid #000;

     float:right;

     }

#two{width:50px;

       height:200px;

       background-color:#eee;

       border:1px solid #000;

       float:right;

       }

</style></head>

<body>

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

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

</body>

</html>

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

笔者特意把2个div设置为向右浮动,第1个div元素为自适应宽度,而第2个div元素为固定宽度。本例为了防止读者的一个错觉,即前面的div浮动后一定在左边,其实左右方向取决于div元素浮动属性的值。

(2)div内容居中。这是很多网站需要用到的居中示例,即保持div包含内容的水平和垂直居中。在D:\web\目录下创建img目录,放入一个jpg格式图片文件,并命名为cs.jpg,在D:\web\目录下创建网页文件(XHTML1.0),命名为div_demo2.htm,编写div_demo2.htm文件代码如代码11.12所示。

(责任编辑:大宝库)



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