仓酷云

标题: DIV教程之网页结构教程:CSS多列结构成绩复杂办理计划 [打印本页]
作者: 精灵巫婆    时间: 2015-1-15 23:37
标题: DIV教程之网页结构教程:CSS多列结构成绩复杂办理计划
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
网页制造poluoluo文章简介：纯CSS打造多列等高其实不像设想中那末简单。本文侧重报告多列结构呈现的成绩，以后供应一个在一切扫瞄器都一般事情的复杂办理计划。这个办法100%无CSShack，无图片，无javascript，乃至能够用在最严厉编码的网站上。
纯CSS打造多列等高其实不像设想中那末简单。本文侧重报告多列结构呈现的成绩，以后供应一个在一切扫瞄器都一般事情的复杂办理计划。这个办法100%无CSShack，无图片，无javascript，乃至能够用在最严厉编码的网站上。
多列等高的成绩
上例中有包括分歧内容的3列，能够看出存在的成绩是列的背景致跟着其包括内容的高度而自顺应睁开。这是我们要办理的成绩。怎样使一切的列等高？或详细的说，怎样使一切列的高度即是最高列的高度？这很辣手，由于我们不分明每列将会多高，哪一列是最高的。不克不及复杂的给一切列一个流动的高度，假如内容很少将会招致页面底部有年夜片空缺；假如内容太多则会在笔墨显现完整前封闭。两种情况都不当。实践上，内容的长度是静态的，以是每列的高度也是静态的。必需意想到Web上没有流动的东东，乡平易近们有分歧的屏幕分辩率，扫瞄器中的笔墨也大概被设置为恣意巨细，一切这些城市影响内容的高度。
分别列内容与其背景致
办理等高成绩的第一步是把能分别的破开。办法是每列用两个div替换本来的一个。第一个div用来放内容，另外一个用来作背景致。分别使我们能够独自把持这些分外的元素，以后用更无效的办法把它们放在一同。谜底呼之欲出。
浮动的容器的高度一直取决于其浮动的内容（高度）
这是本文多列等高办法的中心。使一个div的高度即是最高列高度的独一办法是这个div包括一切的列。换句话说，经由过程把一切的列放在一个容器中，容器的高度就是最高列的高度。这是个十分有效的布局。
3列HTMLdiv布局
上例中3个内容列在一个div容器中。
  1. <divid="container1"><divid="col1">Column1</div><divid="col2">Column2</div><divid="col3">Column3</div></div>
复制代码
3列CSS
上面是使div容器等高于最高列的CSS。
  1. #container1{float:left;width:100%;}#col1{float:left;width:30%;background:red;}#col2{float:left;width:40%;background:yellow;}#col3{float:left;width:30%;background:green;}
复制代码
为了让这一布局在一切扫瞄器中准确事情，容器div必需浮动（左或右），同时每个内容列的div也要浮动，哪一种体例其实不主要。浮动内容div的历程使它们在页面中分列在一条程度线上。浮动容器使其自顺应到最高列的高度。假如不浮动容器，内容div将会沉着器底部溢出，容器不会具有准确的高度。现实上在此例中，容器不浮动的话其终极高度为0。
增添分外嵌套的容器
下一步是增添分外的容器，它们相互嵌套。我们必要容器的数目即是列的数目：3。这3个容器用作各列的背景。请注重，我们往除原始列的背景致，并将其加至容器上。
3列HTMLdiv布局
两个分外的容器加至上面的HTML中。
  1. <divid="container3"><divid="container2"><divid="container1"><divid="col1">Column1</div><divid="col2">Column2</div><divid="col3">Column3</div></div></div></div>
复制代码
3列CSS
一切元素左浮动，容器宽度设为100%，使他们占满页面的宽度。背景致从内容div移除并加至容器上。
  1. #container3{float:left;width:100%;background:green;}#container2{float:left;width:100%;background:yellow;}#container1{float:left;width:100%;background:red;}#col1{float:left;width:30%;}#col2{float:left;width:40%;}#col3{float:left;width:30%;}
复制代码
用绝对定位挪动容器
如今用绝对定位把容器移至新的地位。挪动后div以下图所示。即等高列背景容器的层叠和地位。为了显现右边的绿色列container2向左移了30%，为了显现两头的黄色列container1向左挪动了40%，与此同时白色部分仍然可见作为左边列。
绝对定位的CSS
上面是增加了绝对定位的CSS。
  1. #container3{float:left;width:100%;background:green;}#container2{float:left;width:100%;background:yellow;position:relative;right:30%;}#container1{float:left;width:100%;background:red;position:relative;right:40%;}#col1{float:left;width:30%;}#col2{float:left;width:40%;}#col3{float:left;width:30%;}
复制代码
将每列的内容移回
下一步是把每列的内容移回到页面上，使之分列鄙人面的背景致上。再次利用复杂的绝对定位来完成它。
最初在最表面的容器container3上增加overflow:hidden，砍往超越容器的部分。
绝对定位的CSS
上面是增添了绝对定位和溢出的CSS划定规矩。请注重container3上分外的position:relative;这是为懂得决一个IEbug，制止overflow:hidden;事情。
  1. #container3{float:left;width:100%;background:green;overflow:hidden;position:relative;}#container2{float:left;width:100%;background:yellow;position:relative;right:30%;}#container1{float:left;width:100%;background:red;position:relative;right:40%;}#col1{float:left;width:30%;position:relative;left:70%;}#col2{float:left;width:40%;position:relative;left:70%;}#col3{float:left;width:30%;position:relative;left:70%;}
复制代码
对列增添padding
最初还需对列增添padding，如许每列边沿的笔墨不至于显得拥堵。假如我们增添padding，一些扫瞄器中大概一般显现，但不是一切。IE毛病的盒模子，招致其预算具有padding的元素宽度非常。一个200px宽20pxpadding的box在IE中被视为200px宽，在其他扫瞄器中则为准确的240px。padding应当加在元素的宽度上。凸微软！
不外不必忧虑...我们能够用完整不依附于padding的办法来办理这个成绩。相反，我们把列弄窄一点（列宽减往两侧的padding），以后用绝对定位把它们移至准确的地位。在我们的例子中我们用了2%的padding，则30%的列将减至26%，40%的列减至36%。用绝对定位移回列时需服膺，如今列变窄了，以是当它们一同像最后那样左浮动时，每个必要比上一个挪动更远的间隔。
完全的CSS
为了使结构坚持在小宽度我在每一个内容列增添了overflow:hidden;这将切往超越列宽的东东，并制止其搅扰其他结构。重申一下，这只是IE的成绩，其他一切扫瞄器会坚持准确的结构，不论列内是虾米。假如你真想如许做，能够用IE前提正文只对IE写划定规矩。
  1. #container3{float:left;width:100%;background:green;overflow:hidden;position:relative;}#container2{float:left;width:100%;background:yellow;position:relative;right:30%;}#container1{float:left;width:100%;background:red;position:relative;right:40%;}#col1{float:left;width:26%;position:relative;left:72%;overflow:hidden;}#col2{float:left;width:36%;position:relative;left:76%;overflow:hidden;}#col3{float:left;width:26%;position:relative;left:80%;overflow:hidden;}
复制代码
好了，就是如许。我但愿这篇文章对你有效。能够本人弄一下CSS看一下它是怎样事情的。你能够弄良多列，只需容器和内容列的数量相称。不要健忘看看我的demo：2列，3列，4列，和5列。

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
作者: 金色的骷髅    时间: 2015-1-17 23:39
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。
作者: 再现理想    时间: 2015-1-24 15:19
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
作者: admin    时间: 2015-2-1 21:40
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
作者: 分手快乐    时间: 2015-2-7 17:30
学Dreamweaver技术的过程其实是一个增加信心的过程。
作者: 飘飘悠悠    时间: 2015-2-22 21:51
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）
作者: 若相依    时间: 2015-3-7 04:39
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
作者: 小妖女    时间: 2015-3-14 13:46
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
作者: 不帅    时间: 2015-3-21 10:10
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者: 活着的死人    时间: 2015-3-21 10:10
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2