帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Div+CSS从入门到精通 >> 阅读文章

Div+CSS速成第三天:二列和三列布局

来源:远方教程 作者:远方教程 发布时间:2015-03-16 查看次数:15864 访问[新版]

  今天学习《十天学会web标准(div+css)》的二列和三列布局,将涉及到以下内容和知识点

  1. 二列自适应宽度
  2. 二列固定宽度
  3. 二列固定宽度居中
  4. xhtml的块级元素(div)和内联元素(span)
  5. float属性
  6. 三列自适应宽度
  7. 三列固定宽度
  8. 三列固定宽度居中
  9. IE6的3像素bug

一、两列自适应宽度
下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。首先创建html代码如下:
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

DIV CSS教程——第3天二列和三列布局

按照如图所示的创建方法,把两个div都创建出来,或手工写出代码。div创建完成后,开始创建css样式表,代码如下:
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

DIV CSS教程——第3天二列和三列布局
DIV CSS教程——第3天二列和三列布局
DIV CSS教程——第3天二列和三列布局

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部