最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

CSS网页布局入门教程4:二列固定宽度_基础教程

来源:懂视网 责编:小采 时间:2020-11-27 18:55:05
文档

CSS网页布局入门教程4:二列固定宽度_基础教程

CSS网页布局入门教程4:二列固定宽度_基础教程:有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 代码如下:左列 右列 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是
推荐度:
导读CSS网页布局入门教程4:二列固定宽度_基础教程:有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 代码如下:左列 右列 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是

有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下:
代码如下:
左列
右列

新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示,从而形成二列式的布局,CSS代码如下:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
left与right两个div的代码与前面类似,都使用相同宽高,本例中为了区分,左列和右列分别用了不同的边框和背景色。而为了实现二列式布局,我们使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性,用于控制的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。
float使用none值时表示对象不浮动,而使用left时,对象将向左浮动,例如本例中的div使用了float:left;之后,右侧的内容将流到当前对象的右侧。使用right时,对象将向右浮动,如果将left的float值设置为right,将使得left对象浮动到网页右侧,而right对象则由于float:left;属性浮动到网页左侧。
这样,在动用了简单的float属性之后,二列固定宽度的而已就能够完整的显示出来。
具体操作步骤如下:
新建页面,插入div可以参考:CSS网页布局入门教程1:一列固定宽度
当插入一个div后,接着插入第二个时,在插入div标签的插入会多出一个选项:在选定内容旁换行,这样插入就把这个div标签插入到了id为left的div之内,这并不是本例所要的结果,所以我们选择在标签之后,然后在右侧激活的下拉列表中找到,这样我们插入的id为right的div就插入到了left的后边。如下图所示:


left的css设置如下:

right的设置只有与left的边框和背景色不同而已,可以参照left的自行设置。

文档

CSS网页布局入门教程4:二列固定宽度_基础教程

CSS网页布局入门教程4:二列固定宽度_基础教程:有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 代码如下:左列 右列 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top