|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
通常把清除浮动写成单独的
放在所有浮动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;}
<!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元素重新定义其具体位置、样式就行了。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:34:17
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主