当前位置 : 主页 > 编程语言 > java >

div框架布局(div做网页框架)

来源:互联网 收集:自由互联 发布时间:2022-10-26
div怎么布局 table布局是简单,但现在的页面都要符合W3C标准,所以都改成css+div;你如果想学css+div,;你到这个网址上去看看,有很详细的教程,我没事就上来看看的 就说你说的问题,你


div怎么布局

table布局是简单,但现在的页面都要符合W3C标准,所以都改成css+div;你如果想学css+div,;你到这个网址上去看看,有很详细的教程,我没事就上来看看的

就说你说的问题,你写了一个div他没有显示在左边,而是在上边了,解决办法很简单,你要分别写两个div,一个是居左的,一个是居右的,

方法如下:左边右边

还可以写成:

.left{float:left;}
.right{float:right;}
#layer1 {
position:absolute;
left:383px;
top:36px;
width:366px;
height:319px;
z-index:1;
xxxxxxxxxxxxxxxx

这时一个简单的div布局,你可以用dreamweaver工具这用画就好了DIV+CSS只是比TABLE流行 并不能代替TABLE

DIV+CSS用来布局大体的样子,但有些小的地方,还是需要table的。

我觉得div+css你只要注意,宽度和高度,以及悬浮就能布局了。相互之间不要被乱顶下去楼上你真强?不解释

看手册最实际

怎样用DIV布局

使用 DIV Tags

当我们使用 CSS-P 的时候, 我们主要把它用在 DIV (division) tag 上.当你把文字, 图象, 或其他的放在 DIV 中, 它可称作为 "DIV block", 或 "DIV element" 或 "CSS-layer", 或干脆叫 "layer". 而中文我们把它称作 "层次". 所以当你以后看到这些名词的时候, 你就知道它们是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样



This is a DIV tag



但当我们把 CSS-P 用到 DIV 中去以后, 我么就可以严格设定它的位置. 首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck. 给名字的目的是我们以后可用 JavaScript 来控制它, 比如说移动它或改变它的一些性质等等。



This is a truck



给层次取什么名字是随意的, 名字可以是任何英文字母和数字, 但第一个必须是字母. 有两种把 CSS-P 应用到 DIV 的方法.

Inline CSS:

Inline 是最常用的方法。



This is a truck



我们下面将会告诉你都有哪些 style 和如果把它们写到 DIV 里。

External STYLE tag:

使用 External 方法的结果是一样的。 现在我们主要讨论 Inline 方法。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。



truck">

This is a truck



Cross-Browser CSS 性质:

我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作, 所以我们主要讨论那些对俩者都通用的性质。 下面这些性质符合由 W3C 给出的标准。 position

决定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相对于其他 tag 的。而"absolute" 是说 DIV tag 的位置是相对于它所在的窗口. 这里主要讨论 absolute.

left

相对于窗口左边的位置 (pixels)

top

相对于窗口上边的位置 (pixels)

width

DIV tag 的宽度。 所有在 DIV 里的文字或html都在里面。

height

DIV tag 的高度。 这个性质很少用除非你想 Clip 层次。

clip

给出 layer 的 clipping (可看的见的) 部分. Clip 可使得DIV 显示为一个可以定义的很准确的方块。 你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility

隐蔽或展现DIV 根据它的值 "visible", "hidden", "inherit".

z-index

DIV tag 的立体位置。 值越大 DIV 的位置越高。

background-color

DIV 背景的颜色。

layer-background-color

Netscape 的 DIV 背景颜色.

background-image

DIV 的背景图象

layer-background-image

Netscape 的 DIV 的背景图象。

CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质:

position: absolute; left: 50px; top: 100px; width: 200px;

height: 100px; clip: rect(0,200,100,0); visiblity: visible;

z-index: 1; background-color:#FF0000;

layer-background-color:#FF0000;

background-image:URL(filename.gif);

layer-background-image:URL(filename.gif);

from:asp学习网/title:使用 DIV布局/ time:2006-4-19 0:31:52 DIV 可以配合CSS使用 用好div首先要会 css

div布局 比较灵活

而表格 就比较死板

网络显示网页的时候 是 下载完整个表格后才显示表格内容的

如果整个页面是一个表格做到

那样显示起来就会很慢

div就不同了 我在学习DIV布局时,也是用下面这些学习的,感觉挺好的,你可以看看

第一步:规划网站

?id=175

第二步:创建html模板及文件目录等

?id=176

第三步:将网站分为五个div 网页基本布局

?id=177

第四步:网页布局与div浮动等

?id=178

第五步:网页主要框架之外的附加结构的布局与表现

?id=179

第六步:页面内的基本文本的样式(css)设置

?id=180

第七步:网站头部图标与logo部分的设计

?id=181

第八步:页脚信息的表现设置

?id=182

第九步:导航条的制作

?id=183

第十步:解决IE浏览器的显示BUG

?id=184

网友评论