解析div布局之四大属性用法

《解析div布局之四大属性用法》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、·解析DIV布局之四大属性用法本文向大家介绍一下DIV布局属性的概念，主要包括position属性，direction属性，float和clear属性等内容，希望本文的介绍能让你有所收获。在学习网页布局的过程中，你对DIV布局的属性是否了解，在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。DIV布局属性：在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了

2、类似于Layer标记的功能。◆DIV布局之position属性：position属性用来决定元素的位置类型，详见属性：属性名称:'position'属性值:absoluterelativestatic初始值:static适合对象:所有元素是否继承:no百分比备注:被禁止其属性值分别代表：absolute：屏幕上的绝对位置。relative：屏幕上的相对位置。static：固有位置。◆DIV布局之direction属性：direction属性决定BOX的排列方向，详见属性：属性名称:'direction'属性值:ltrrtl初始值:ltr适合对象

3、:所有元素是否继承:yes百分比备注:被禁止◆DIV布局之float和clear属性：在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方：属性名称:'float'属性值:leftrightnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止例如： 1. 2.IMG{float:left} 3.BODY,P,IMG{margin:2em} 4. 5.

4、ODY> 6.

 7. 8.Somesampletextthathasnoother... 9. ◆相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：属性名称:'clear'属性值:leftrightbothnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止·Div+CSS布局入门教程之页面布局和规划本文向大家介绍一下Div+CSS布局入门教程中页面布局和规划，在网页制作中，有许多的术语，例如：C

5、SS、HTML、DHTML、XHTML等等，你对这些属于应该有所了解。你对网页的页面布局和规划是否了解，这里和大家分享一下Div+CSS布局入门教程中有关页面布局和规划的介绍，希望本文的介绍能让你有所收获。Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。◆所有的设计第一步就是构思，构思好了，一般来说还需要用

6、PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。◆下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。DIV结构如下：│bod

7、y{}　/*这是一个HTML元素，具体我就不说明了*/└#Container{}　/*页面层容器*/　├#Header{}　/*页面头部*/　├#PageBody{}　/*页面主体*/　│　├#Sidebar{}　/*侧边栏*/　│　└#MainBody{}　/*主体内容*/　└#Footer{}　/*页面底部*/至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。