• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

织梦吧 - dedecms,网站模板,建站教程,图片素材免费下载

DedeCMS视频教程
当前位置: 织梦吧 > 网页制作 > DIV&CSS >

《十天学会web标准(div+css)》第3天:二列和三列布局(5)

来源: www.dedecms8.com 编辑:织梦吧 时间:2011-01-03点击:

这个功能非常类似于css中的浮动,下面我们用css来实现这一功能:

<div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
<div id="main"> 标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构,网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</div>

创建完以上代码后,在浏览器中预览会显示如下结果:

下面用css让side浮动,再看看效果

body { font-size:18px; line-height:200%; }
#side { float:left;}

大家看看,是不是和word的效果已经很像相了,但这里的文字和图片右侧贴的很近,怎么办呢?刚才已经说了,当元素浮动过之后,需要指定一个宽度,否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度,它们中间应该就有空隙了。图片的宽度是192px,设置side为202px,中间将会有10px的空隙了。

body { font-size:18px; line-height:200%; }
#side { float:left; width:202px;}

标签: DIV+CSS
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 tom@tiptop.cn ,  QQ