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

解析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百分比备注:被禁止例如：1. 2. IMGfloat:left 3. BODY,P,IMGmargin:2em 4. 5. 6. 7. 8. Somesampletextthathasnoother. 9. 相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：属性名称:clear属性值:leftrightbothnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止 Div+CSS布局入门教程之页面布局和规划本文向大家介绍一下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/*页面主体*/#Si