左列 左列
css网页布局入门教程4:二列固定宽度

css网页布局入门教程4:二列固定宽度

ID:6612059

大小:326.50 KB

页数:4页

时间:2018-01-20

css网页布局入门教程4:二列固定宽度_第1页
css网页布局入门教程4:二列固定宽度_第2页
css网页布局入门教程4:二列固定宽度_第3页
css网页布局入门教程4:二列固定宽度_第4页
资源描述:

《css网页布局入门教程4:二列固定宽度》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

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

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

2、ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">二列固定宽度——AA25.CN左列

右列
left与right两个div的代码与前面类似,都使用相同宽高,本例中为了区分,左列和右列分别用了不同的边框和背景色。而为了实现二列式布

4、局,我们使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性,用于控制对象的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。float使用none值时表示对象不浮动,而使用left时,对象将向左浮动,例如本例中的div使用了float:left;之后,右侧的内容将流到当前对象的右侧。使用right时,对象将向右浮动,如果将#left的float值设置为right,将使得#left对象浮动到网页右侧,而#right对象则由于float:left;属性浮动到网页左侧。

5、这样,在动用了简单的float属性之后,二列固定宽度的而已就能够完整的显示出来。具体操作步骤如下:新建页面,插入div可以参考:CSS网页布局入门教程1:一列固定宽度当插入一个div后,接着插入第二个时,在插入div标签的插入会多出一个选项:在选定内容旁换行,这样插入就把这个div标签插入到了id为left的div之内,这并不是本例所要的结果,所以我们选择在标签之后,然后在右侧激活的下拉列表中找到,这样我们插入的id为right的div就插入到了left的后边。如下图所示:left的css设置如下:right的设置只有与left的边框和背景色不同

6、而已,可以参照left的自行设置。本http://www.aa25.cn/264.shtml

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。