xhtml+css基础第3课-二列和三列布局

在上一节课:Div+css基础系列教程第2课-列布局中我们主要讲的是单列多块布局,今天主要来说说多列布局:

1、两列自适应宽度

当我们拖动浏览器窗口变大变小时,#main的宽度也会跟着改变。#main中设置margin-left:120px;正好让出#side占去的120px宽度,如果这里设置为122px的话,中间将出现2px的空隙,大家可以试一下。

2、两列固定宽度

两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个div之外再加一个父div:#content;#side的宽度为120px,#main宽度为350px,那么#content的宽度应该为这两者之和,然后设置#content居中,那么整体就居中了:

3、xhtml的块级元素(div)和内联元素(span)

块级元素:就是一个方块,像段落一样,默认占据一行出现;内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。常见的块级元素和内联元素如下:
常见块级元素
常见内联元素

4、三列自适应宽度

5、三列固定宽度

三列固定宽度可以在三列自适应基础上添加一个父div,并设置这个div的宽度即可,如下,添加一个id为content的父容器。

思路就是这么个思路,大家举一反三,可以复制上述代码自行测试。

AD:站点文章对你有帮助,可以选择去百度口碑好评下,还可以点击此处

赞 (2) 口碑
分享到:更多 ()

评论 0

评论前请先注册,游客请前往问答中心