带来一篇div+css结构手艺座谈
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。CSS结构经常使用的办法：
float:none|left|right取值：
none:默许值。工具不飘浮
left:文本流向工具的右侧
right:文本流向工具的右边
它是如何事情的，看个一行两列的例子
xhtml:
以下是援用片断：<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div><divclass="clear"></div>/*这是违反web尺度企图的，只是想申明在它上面的元素必要扫除浮动*/</div>CSS:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}position:static|absolute|fixed|relative
取值：
static:默许值。无特别定位，工具遵守HTML定位划定规矩
absolute:将工具从文档流中拖出，利用left，right，top，bottom等属性相对其最靠近的一个最有定位设置的父工具举行相对定位。假如不存在如许的父工具，则根据body工具。而其层叠经由过程z-index属性界说
fixed:未撑持。工具定位服从相对(absolute)体例。可是要恪守一些标准
relative:工具不成层叠，但将根据left，right，top，bottom等属性在一般文档流中偏移地位
它来完成一行两列的例子
xhtml:
以下是援用片断：<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div></div>CSS:
以下是援用片断：#wrap{position:relative;/*绝对定位*/width:770px;}#column1{position:absolute;top:0;left:0;width:300px;}#column2{position:absolute;top:0;right:0;width:470px;}他们的区分在哪?
明显，float是绝对定位的，会跟着扫瞄器的巨细和分辩率的变更而改动，而position就不可了，以是一样平常情形下仍是float结构！
2.CSS经常使用结构实例
一列
单行一列
以下是援用片断：body{margin:0px;padding:0px;text-align:center;}#content{margin-left:auto;margin-right:auto;width:400px;}两行一列
<p/>以下是援用片断：body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;}#content-end{margin-left:auto;margin-right:auto;width:400px;}三行一列
<p/>以下是援用片断：body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}#content-mid{margin-left:auto;margin-right:auto;width:400px;}#content-end{margin-left:auto;margin-right:auto;width:400px;}
两列单行两列
<p/>以下是援用片断：#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:420px;}两行两列
以下是援用片断：#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:420px;}三行两列
以下是援用片断：#header{width:700px;margin-right:auto;margin-left:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:420px;}#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}三列
单行三列
相对定位
<p/>以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}0float定位
xhtml:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}1CSS:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}2float定位二
xhtml
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}3
CSS
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}4以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}5xhtml:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}6CSS:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}7三行三列
xhtml:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}8CSS:
以下是援用片断：#wrap{width:100%;height:auto;}#column1{float:left;width:40%;}#column2{float:right;width:60%;}.clear{clear:both;}9PS:这里列出的是经常使用的例子，而非研讨之用，对一每一个盒子，我都没有设置margin,padding,boeder等属性，是由于我团体以为，含有宽度定位的时分，最好欠好用到他们，除非出于无奈，由于假如不是如许的话，办理扫瞄器兼容成绩，会让你头疼，并且发生一系列CSS代码，我以为如许的效力和效果都欠好！
3.CSS结构初级技能
margin和padding老是有大概要用到，而发生的成绩怎样办理呢？因为扫瞄器注释容器宽度的办法分歧：
IE6.0FirefoxOpera等是
实在宽度=width+padding+border+margin
IE5.X
实在宽度=width-padding-border-margin
IE中有浮动工具的双倍间隔之BUG（IEDoubledFloat-MarginBug）,这里还必要详细成绩详细办理，上面是办理举措
www.forest53.com/tutorials/tutorials_show.asp?id=31
很分明，第一种下很完善的结构在第二种情形下成果是很凄切的！
办理的办法是hack
以下是援用片断：<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div></div>0列等高技能
n行n列结构，每列高度（事前其实不能断定哪列的高度）的不异，是每一个计划师寻求的方针，做法有：背景图添补、加JS剧本的
办法和容器溢出部分埋没和列的负底界限和正的内补钉相分离的办法。
背景图添补法：
xhtml:
以下是援用片断：<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div></div>1
css:
以下是援用片断：<divid="wrap"><divid="column1">这里是第一列</div><divid="column2">这里是第二列</div></div>2
就是将一个npx宽的一张图片在内部容器纵向反复，定位到两列交织的地位纵向反复，在视觉上发生了两列高度一样的错觉
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 可以使用 CSS 检查工具进行设计。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
页:
[1]