今天来学习第二天 一列结构
通常把清除浮动写成单独的放在所有浮动div的最下方。
[*]
[*]
明天我们入手下手进修《十天学会web尺度(div+css)》的一列结构，包括以下几种情势：
[*]一列流动宽度
[*]一列流动宽度居中
[*]一列自顺应宽度
[*]一列自顺应宽度居中
[*]一列二最多块结构
前一节我们回忆了xhtml基本和css基本部分，明天我们正式入手下手利用网页制造软件——adobe公司出品的dreamweaver来入手下手网页计划之旅。信任之前您已用过这个软件了，详细怎样利用我就不讲了。为了照应部分伴侣，明天课程的css部分我们是以可视化天生体例，不外倡议人人妙手写的只管仍是手写，如许有助于进步效力。
1、一列流动宽度
我们先看一下一列流动宽度，起首要新建一个页面：
注重：这里的文档范例是过渡型，今朝我们接纳这类宽松考证体例。
接上去在页面中拔出一个div标签，我们能够点击工具栏的“拔出DIV标签”按钮，在翻开的对话框中ID项给这个div命一下名，我们给它起个名叫layout（称号依据本人必要定名）。
拔出div后，在右边的css款式面板中，界说id为layout的款式，断定后在翻开的css编纂对话框的方框选项中计划宽度500，高度300。为了看分明起见，我们把这个div设置个背景致，如许就可以预览出巨细和地位了。
这里选择初级，然后在选择器中填写：#layout，假如是选中div后，再点击增加，它会主动增加上。由于是界说ID，以是后面必要加#，前面会有id和class的具体解说
我们预览一下，看看在IE中的显现效果，一列流动宽度就如许做成了，复杂吧！CSS代码及在IE中显现以下：
<styletype="text/css">
#layout{height:300px;width:400px;background:#99FFcc;}
</style>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">#layout{height:300px;width:400px;background:#99FFcc;}</style></head><body><divid="layout">此处显现id"layout"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
2、一列流动宽度居中
一列流动宽度居中和一列流动宽度比拟，我们要办理的成绩就是居中。这里我们用到css的外边距属性：margin。在IE6及以上版本和尺度的扫瞄器傍边，当设置一个盒模子的的margin:auto;时，可让这个盒模子居中。我们下边在css款式表中加上这个属性看看效果：
#layout{height:300px;width:400px;background:#99FFcc;margin:auto;}
在dreamweaver的计划视图中我们选中看看，是否是已居中了，我们再在IE下预览一下，一样居中。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">#layout{height:300px;width:400px;background:#99FFcc;margin:auto;}</style></head><body><divid="layout">此处显现id"layout"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
3、一列自顺应宽度
自顺应宽度是相对扫瞄器而言，盒模子的宽度跟着扫瞄器宽度的改动而改动。这时候要用到宽度的百分比。当一个盒模子不设置宽度时，它默许是相对扫瞄器显现的。我们把方才的流动宽度例子中的宽度往失落看看：
#layout{height:300px;background:#99FFcc;}
有些伴侣大概要问了，那为何另有那末宽的白边呢？这个是由body默许的外边距酿成的。当我们不必任何款式表举行界说时，body，h1－h6，ul等元素默许有外边距或别的款式的。这里我们在css款式中增添一项：body{margin:0;}，就能够把body默许的外边距往失落，这时候再预览一下，白边就没了。
body{margin:0px;}
#layout{height:300px;background:#99FFcc;}
这里的选择器范例是老手伴侣最简单含混的中央，类：是指界说一个class，能够多个工具援用；标签：指对默许的html标签举行从头界说，如能够界说body{margin:0}，意义是将body的外边距设置为0，h2{color:#f00}是将一切h2标签的笔墨色彩设置为白色；初级它把ID和伪类放到一块了，是一个设置分歧理的中央，在cs4版本中已分隔了。ID是以#入手下手，id只能感化于一个工具，不克不及感化于多个工具，优先级高于class，这是id和class的区分。伪类会在第九节时具体解说
假如我们必要按扫瞄器的80%显现，那末设置宽度为80%，当改动扫瞄器窗口巨细时，盒模子的宽度也会随着改动。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{margin:0;}#layout{height:300px;width:80%;background:#99FFcc;}</style></head><body><divid="layout">此处显现id"layout"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
4、一列自顺应宽度居中
一样和流动宽度居中一样，我们只必要设置div的外边距为auto便可完成居中了。
body{margin:0px;}
#layout{margin:auto;height:300px;background:#99FFcc;width:80%;}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{margin:0;}#layout{height:300px;width:80%;background:#99FFcc;margin:auto;}</style></head><body><divid="layout">此处显现id"layout"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
5、一列二最多块结构
一样平常的网站全体能够分为上中下布局，即：头部、两头主体、底部。那末我们能够用三个div块来分别，分离给它们起名为：头部（header）、主体（maincontent）、底部（footer）。
接纳流动宽度居中的体例，代码以下：
body{margin:0;padding:0;}
#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}
#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}
#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;}
为了便于辨别，在背景项里设置了背景致，这里不在贴图。依此类推，把别的两个div块给置好，全部效果就出来了。这是一个年夜多半网站接纳的上中下结构布局。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{margin:0;padding:0;}#header{margin:5pxauto;width:500px;height:80px;background:#9F9;}#main{margin:5pxauto;width:500px;height:400px;background:#9FF;}#footer{margin:5pxauto;width:500px;height:80px;background:#9f9;}</style></head><body><divid="header">此处显现id"header"的内容</div><divid="main">此处显现id"main"的内容</div><divid="footer">此处显现id"footer"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
很多伴侣在问：为何两个相邻的容器两头的间距不是10px，而是5px呢？依照我们一般的了解，以为应当是两个值相加，实在这里是两个兼并后取最年夜值。用css手册中的话说：块级元素的垂直相邻外边距会集并，而行内元素实践上不占高低外边距。行内元素的的摆布外边距不会集并。一样地，浮动元素的外边距也不会集并。同意指定负的外边距值，不外利用时要当心（有关块级元素和行内元素的观点鄙人一节讲到）。
6、小结
本节课触及到以下常识点：
1、CSS可视化天生、格局化
本教程便于老手进修，接纳dw的css可视化天生体例，纯熟后的伴侣只管手写，如许能够进步事情效力。今朝来讲，但愿经常使用的人人都能记着。关于css的格局化，指css的排版体例，仔细的伴侣已发明，我在这里贴出的css代码，每一个类或ID都是写在一行的。大概你的仍是分红多行，怎样把它们弄到一行上呢？请看上面的代码和图示：
body{
margin:0;
padding:0;
}
#header{
margin:5pxauto;
width:500px;
height:80px;
background:#9F9;
}
#main{
margin:5pxauto;
width:500px;
height:400px;
background:#9FF;
}
#footer{
margin:5pxauto;
width:500px;
height:80px;
background:#9f9;
}
经由以上三步以后，看看，你的代码是否是和我的一样了。还
2、CSS缩写
css的很多属性是能够简写的，如许便于浏览和修正，削减代码量，设置办法以下：
把必要缩写的项目选中，再天生的css代码即为简写情势了。这里所说的是多个属性兼并到一块的简写体例，别的像色彩值了也能够简写的。好比色彩值为#ff6600;能够简写为#f60;两位两位一样的才能够简写，像#c2c2c2是不成以简写的。
3、CSS语法
如图所示，CSS语法由以下三部分组成，选择器：能够是ID、CLASS或标签；属性和值是用来界说这个物件的某一个特征。如一张桌子的长120cm，宽60cm，套用css的格局为，桌子{长:120cm;宽:60cm;}，如许是否是简单了解。
4、ID和CLASS选择器
id只能在页面中对应一个元素，就像我们的身份证号一样，每一个人的都纷歧样；class为类，能够对应多个元素，好比说一年级三班的先生，它所对应的多是10个20个先生。
id的优先级高于class，好比说明天三班的先生上体育课，小明留上去扫除卫生。那末三班的先生上体育课这是一个类，而小明扫除卫生这是个id，固然小明也是三班的先生，但id高于class，以是小明实行扫除卫生的义务。
我们需要重新进行页面布局，比如对背景图片的定义，只用针对每一个Div元素重新定义其具体位置、样式就行了。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
页:
[1]