仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 996|回复: 7
打印 上一主题 下一主题

[DIV+CSS] CSS教程之CSS网页结构进门教程4:二列流动宽度

[复制链接]
小妖女 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:39:01 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
这便是Div的优势所在。带宽的稍多占用,完全显得微不足道,更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。



本站2010年9月新增《十天学会web尺度(div+CSS)》系列教程,接待进修!
有了一列流动宽度作为基本,二列流动宽度就十分复杂,我们晓得div用于对某一个地区的标识,而二列的结构,天然必要用到两个div,XHTML代码以下:
<divid="left">左列</div>
<divid="right">右列</div>
新的代码布局中利用了两个id,分离为left和right,暗示两个div的称号,我们所必要做的是,起首设置它们的宽度,然后让两个div在程度行中并排显现,从而构成二列式的结构,CSS代码以下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="cn"lang="cn"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>二列流动宽度——AA25.CN</title><styletype="text/css"><!--#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:200px;}--></style></head><body><divid="left">左列</div><divid="right">右列</div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
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以内,这并非本例所要的了局,以是我们选择在标签以后,然后在右边激活的下拉列表中找到<divid="#left">,如许我们拔出的id为right的div就拔出到了left的后边。以下图所示:


left的css设置以下:








right的设置只要与left的边框和背景致分歧罢了,能够参照left的自行设置。

外补丁margin呢,它代表了DIV(盒子)和DIV(盒子)之间的距离,而内补丁padding则是大盒子(DIV)和里面的盒子(DIV)的距离(盒子(DIV)里面可以放盒子(DIV)哦)。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-1 06:55

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表