|
十天学会DIV+CSS新手常见问题入门教程视频教程表单问题CSS HACKSEO优化网页技巧常用软件字体下载网页配色CSS在线手册火狐插件PNG图标WEB标准网页资源下载PS技巧系统常见问题JS代码常用CSS技巧导航菜单W3C标准高级搜索酒店预订返回旧版 当前位置：首页 > DIV+CSS教程 > 正文第三天 二列和三列布局
作者:××× 来源:标准之路 【大 中 小】 浏览:10895 添加日期：2010-07-18 我要评论(36) 今天学习《十天学会web标准(div+css)》的二列和三列布局，将涉及到以下内容和知识点 二列自适应宽度
二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一、两列自适应宽度 下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。首先创建html代码如下： <div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div> 按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。div创建完成后，开始创建css样式表，代码如下：
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } 先创建#side的样式，为了便于查看，设置了背景色。注意，side的浮动设置为向左浮动；
然后创建#main样式，注意这里设置#main的左边距为120px。预览结果如下：
当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，大家可以试一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } </style> </head> <body> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </body> </html> 标准之路www. 提示：可以先修改部分代码后再运行 二、两列固定宽度
有了前面的基础，两列固定固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值，如下图： 三、两列固定宽度居中
两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div： <div id="content">
<div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> 操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写id后确定，得到如上的代码
下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html> 标准之路www. 提示：可以先修改部分代码后再运行 四、xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现； 内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。这就是块级元素和内联元素，正因为有了这些元素，才使我们的网页变得丰富多彩。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。
五、float属性
回到我们的例子当中，理解了块级元素和内联元素，对理解浮动就容易多了。float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。 想必大家都用过word排过版，当中有个图文混排功能，如下图：
这个功能非常类似于css中的浮动，下面我们用css来实现这一功能：
<div id="side"><img src="http://www./uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
<div id="main"> 标准之路[www.]提供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;} 细心的朋友已经发现，上例中#main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？如果你能想到这一点，你的确是太聪明了，事实确实是这样，在css样式表中加上下面一行
#main { margin-left:202px;}
这就是如何应用浮动实现两列布局的原理。那么三列呢？
六、三列自适应宽度
三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下 <div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> 增加以下css样式：
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
把原来#main样式的width:70%去掉，然后设置左右外边距各120px，让出左右列的宽度
#main { background: #99FFFF; height: 300px; margin:0 120px; }
预览一下效果如下：
也许预览出来的效果和我的不一样，别急，还有一项设置，默认body是有外边距的，所以这里还得设置body的外边距为0；点击css面板上的新建按钮，然后在新建面板中选择：标签（重定义标签外观），然后选择body，设置body的边界为0即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin:0;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } </style> </head> <body> <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </body> </html> 标准之路www. 提示：可以先修改部分代码后再运行 七、三列固定宽度
三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，如下，添加一个id为content的父容器。 在源代码里选中这三个div，然后点击工具栏上的“插入div标签”按钮，这时弹出的窗口插入项会默认为：在选定的内容旁换行，输入id为content，然后给这个div定义个宽度
三列固定宽度出来了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin:0;} #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html> 标准之路www. 提示：可以先修改部分代码后再运行 八、IE6的3像素bug
3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下： body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;} html代码如下：
<div id="side">此处显示 id "side" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div> 下面看看IE6和IE7中的显示效果：
从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。
body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;} #main { background: #99FFFF; height: 300px; } 看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。
（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！） 〖DIV+CSS教程〗Tags: 十天学会web标准 div+css 二列布局 三列布局
所属专题：十天学会WEB标准 上一篇：第二天 一列布局 下一篇：第四天 纵向导航菜单及二级弹出菜单 相关文章第十天 div+css网页标准布局实例教程（三）第十天 div+css网页标准布局实例教程（二）第十天 div+css网页标准布局实例教程（一）第九天 CSS表单设计第八天 下拉及多级弹出菜单第七天 横向导航菜单第六天 html列表第五天 超链接伪类第四天 纵向导航菜单及二级弹出菜单第二天 一列布局第一天 XHTML CSS基础知识16、【视频】CSS强制换行与强制不换行15、【视频】CSS的行高Line Height属性14、【视频】相对定位和绝对定位13、【视频】CSS滑动门技术宽度自适应按钮SEO—创建链接诱饵 更多评论(36)..会员评论linxia(58.20.*.*) 发表于：2010-09-27 16:22:30 我用的360浏览器不管加不加3bug main和side之间都会有空隙。想不通 管理员回复：不知道了 lookingout(222.247.*.*) 发表于：2010-09-27 09:03:28 在第六节三列自适应宽度，为什么用我的浏览器打开“运行代码”中间都会有三像素的空隙？我用的是腾讯的浏览器。还有我自己按站长的教程编辑，打开后也有三像素的空隙，而且右侧下沉后右漂浮，可能是什么原因？麻烦站长给解答一下。 管理员回复：你的IE版本是不是IE6？如果是的话应该是IE6的3px bug bit(220.181.*.*) 发表于：2010-09-25 16:52:41 老师，请教下！ Div的边界都是相对于浏览器的Body吗？比如说：三列自适应宽度例题中提到“把原来#main样式的width:70%去掉，然后设置左右外边距各120px，让出左右列的宽度”那么main的边距是相对于浏览器的是吗？ 管理员回复：相对于父容器 ewade(113.68.*.*) 发表于：2010-09-20 16:52:46 _margin-right:-3px; 这句我加了还是会出现3px的间隔 请问这是什么原因呢？我用的是遨游浏览器 管理员回复：直接在IE下打开呢 jack(183.27.*.*) 发表于：2010-09-19 22:41:29 三列布局中为什么顺序是side side1 main 而不是side main side1，当然后者的效果没有显示出来 管理员回复：再好好理解理解float的概念吧 文字环绕(211.103.*.*) 发表于：2010-09-17 15:17:14 两个互不相关的div怎么会掺和在一起呢？不理解如上图：side和main两个的交合在一起 我怎么实现不了呢？ side和main两个没有包含关系的。 管理员回复：不明白 174659708(60.164.*.*) 发表于：2010-09-11 20:36:25 你所说的3BUG现在是不是已经没了。。我前面做的别的教程也没出现。按你的代码页眉出现啊。 管理员回复：只有在IE6下有 happywxc(58.56.*.*) 发表于：2010-09-10 17:04:25 第一个，两列自适应宽度，我都是按照这个配置做的啊，为什么我显示的时候就不是紧挨着的，而是隔了1像素呢？side 120px，main 左 120px，看着都没错啊，但是就是隔着1像素呢！怎么回事呢？ 管理员回复：不太明白 推荐文章第十天 div+css网页标准布局实例教程（三） 第十天 div+css网页标准布局实例教程（二） 第十天 div+css网页标准布局实例教程（一） 第九天 CSS表单设计 第八天 下拉及多级弹出菜单 第七天 横向导航菜单 第六天 html列表 第五天 超链接伪类 第四天 纵向导航菜单及二级弹出菜单 第三天 二列和三列布局 热门文章DIV+CSS网页布局初级入门系列教程 新手该怎么学习DIV+CSS网页标准布局? CSS网页布局入门教程1：一列固定宽度 CSS网页布局入门教程9：用CSS设计网站导航——横向导航 CSS网页布局入门教程2：一列自适应宽度 DIV+CSS网页设计视频教程目录 CSS网页布局入门教程3：一列固定宽度居中 CSS网页布局入门教程8：三列浮动中间列宽度自适应 什么是DIV＋CSS？新手该如何学习div+css？ CSS网页布局入门教程4：二列固定宽度 最新图片素材
最新评论文章CSS网页布局入门教程1：一列固定宽度 什么是DIV＋CSS？新手该如何学习div+css？ CSS Sprites 图片整合技术 第三天 二列和三列布局 仿腾讯QQ首页无刷新换肤切换样式实例 一个不错的带下拉菜单的DIV搜索条 第六天 html列表 第十天 div+css网页标准布局实例教程（三） 推荐专题十天学会DIV+CSS 新手常见问题 入门教程 视频教程 表单问题 CSS HACK SEO优化 网页技巧 常用软件 字体下载 网页配色 CSS在线手册 火狐插件 PNG图标 WEB标准 网页资源下载 PS技巧 系统常见问题 JS代码 常用CSS技巧 导航菜单 W3C标准 DIV布局技巧 PS插件 幻灯代码 在线交流QQ群18645808(开) 44051756(开) 74816202(开) 75782368(开) 54187042(开) 102426914(开) 87010869(开) 71571195(开) 35826206(开) 40334594(开) 102050535(开) 105366319(开) 106872711(开) 100154872(开) 61729892(开) 38473554(开) 出差旅游免费预订酒店 |
|
|
