Div+CSS布局中border和clear两大属性用法指导

开发 前端
本文向大家介绍一下Div+CSS布局入门教程之border和clear属性的用法,通过border很容易就绘制出一条实线,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

你对Div+CSS布局中border和clear属性两个属性的用法是否熟悉,这里和大家简单分享一下,通过border很容易就绘制出一条实线,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快,而clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。

Div+CSS布局入门教程之border和clear属性
 
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。

◆首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:

  1. <divstyledivstyle="border-bottom:1pxdashed#ccc"></div> 

大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。

  1. <dividdivid="banner"></div> 

以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:

  1. #banner{  
  2. background:url(banner.jpg)030pxno-repeat;/*加入背景图片*/  
  3. width:730px;/*设定层的宽度*/  
  4. margin:auto;/*层居中*/  
  5. height:240px;/*设定高度*/  
  6. border-bottom:5pxsolid#EFEFEF;/*画一条浅灰色实线*/  
  7. clear:both/*清除浮动*/  
  8. }  
  9.  

 

通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

◆另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。

  1. <dividdivid="pagebody"><!--页面主体--> 
  2. <dividdivid="sidebar"><!--侧边栏--> 
  3. </div> 
  4. <dividdivid="mainbody"><!--主体内容--> 
  5. </div> 
  6. </div> 

以上是页面主体部分,我们在css.css中添加以下样式:

  1. #pagebody{  
  2. width:730px;/*设定宽度*/  
  3. margin:8pxauto;/*居中*/  
  4. }  
  5. #sidebar{  
  6. width:160px;/*设定宽度*/  
  7. text-align:left;/*文字左对齐*/  
  8. float:left;/*浮动居左*/  
  9. clear:left;/*不允许左侧存在浮动*/  
  10. overflow:hidden;/*超出宽度部分隐藏*/  
  11. }  
  12. #mainbody{  
  13. width:570px;  
  14. text-align:left;  
  15. float:right;/*浮动居右*/  
  16. clear:right;/*不允许右侧存在浮动*/  
  17. overflow:hidden  
  18. }  
  19.  

 

为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:

  1. border:1pxsolid#E00;  
  2. height:200px 


保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。

而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。

CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。

【编辑推荐】

  1. 新手上路 如何学习DIV+CSS制作网页
  2. Div+CSS布局入门教程之页面布局和规划
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 

责任编辑:佚名 来源: blueidea.com
相关推荐

2010-08-27 10:04:33

borderclearCSS

2010-09-10 09:42:37

borderclearCSS

2010-08-23 15:51:54

paddingmargin

2010-08-16 11:05:54

DIV+CSS

2010-09-09 15:08:40

CSSfloatclear

2010-08-16 15:19:35

DIV+CSS教程

2010-08-25 12:47:40

DIVCSS

2010-08-24 13:01:13

DIV+CSS

2010-08-30 14:57:21

DIV+CSS

2010-09-15 14:00:06

position属性DIV

2010-09-14 17:27:12

DIV CSS定位

2010-09-07 14:14:46

DIV+CSS

2010-08-24 11:25:06

DIVCSS

2010-08-27 17:41:03

DIV+CSS

2010-08-23 14:30:14

DIV+CSS

2010-09-03 13:51:59

DIVCSS

2010-08-16 14:18:49

DIV+CSS

2010-08-26 10:33:27

CSSborder

2010-09-14 17:33:55

DIV+CSS布局

2010-08-16 13:46:20

DIV+CSS
点赞
收藏

51CTO技术栈公众号