解析DIV布局之四大属性用法.docVIP

解析DIV布局之四大属性用法 本文向大家介绍一下DIV布局属性的概念，主要包括position属性，direction属性，float和clear属性等内容，希望本文的介绍能让你有所收获。 在学习网页布局的过程中，你对DIV布局的属性是否了解，在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。 DIV布局属性： 在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。 ◆DIV布局之position属性： position属性用来决定元素的位置类型，详见属性：属性名称:position属性值:absoluterelativestatic初始值:static适合对象:所有元素是否继承:no百分比备注:被禁止其属性值分别代表：absolute：屏幕上的绝对位置。relative：屏幕上的相对位置。static：固有位置。 ◆DIV布局之direction属性： direction属性决定BOX的排列方向，详见属性：属性名称:direction属性值:ltrrtl初始值:ltr适合对象:所有元素是否继承:yes百分比备注:被禁止 ◆DIV布局之float和clear属性： 在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：属性名称:float属性值:leftrightnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止例如：? STYLEtypeSTYLEtype=text/css? IMG{float:left} ? BODY,P,IMG{margin:2em} ? /STYLE? BODY? P? IMGsrcIMGsrc=/qz.q/img.gif? Somesampletextthathasnoother... ? /BODY? ◆相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮： 属性名称:clear属性值:leftrightbothnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止 本文向大家介绍一下Div+CSS布局入门教程中页面布局和规划，在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等，你对这些属于应该有所了解。 你对网页的页面布局和规划是否了解，这里和大家分享一下Div+CSS布局入门教程中有关页面布局和规划的介绍，希望本文的介绍能让你有所收获。 Div+CSS布局入门教程? 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 ◆所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 ◆下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下：│body{}　/*这是一个HTML元素，具体我就不说明了*/└#Container{}　/*页面层容器*/　├#Header{}　/*页面头部*/　├#PageBody{}　/*页面主体*/　│　├#Sidebar{}　/*侧边栏*/　│　└#MainBody{}　/*主体内容*/　└#Footer{}　/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。