|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
使用Div+CSS所费功夫与收入不成正比，利用table可以大大减少工作量。而上市公司的期望目标不同对Div+css的认同和投入要大一些。
明天进修《十天学会web尺度(div+css)》的二列和三列结构，将触及到以下内容和常识点
- 二列自顺应宽度
- 二列流动宽度
- 二列流动宽度居中
- xhtml的块级元素(div)和内联元素(span)
- float属性
- 三列自顺应宽度
- 三列流动宽度
- 三列流动宽度居中
- IE6的3像素bug
1、两列自顺应宽度
上面以罕见的左列流动右列自顺应为例，由于div为块状元素，默许情形下占有一行的空间，要想让上面的div跑到右边，就必要做助css的浮动来完成。起首创立html代码以下：<divid="side">此处显现id"side"的内容</div>
<divid="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的清闲，人人能够试一下。
<!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"/><style>#side{background:#99FF99;height:300px;width:120px;float:left;}#main{background:#99FFFF;height:300px;width:70%;margin-left:120px;}</style></head><body><divid="side">此处显现id"side"的内容</div><divid="main">此处显现id"main"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
2、两列流动宽度
有了后面的基本，两列流动宽度就简单多了，只必要把#main的宽度由百分比改成流动值，以下图：
3、两列流动宽度居中
两列流动宽度居中，必要在两列流动宽度的基本上改善，在学一列流动宽度居中时，我们晓得让它居中的办法，以是这里必要在这两个div以外再加一个父div：<divid="content">
<divid="side">此处显现id"side"的内容</div>
<divid="main">此处显现id"main"的内容</div>
</div>
上面就必要设置#content的款式了，我们晓得，#side的宽度为120px，#main宽度为350px，那末#content的宽度应当为这二者之和，然后设置#content居中，那末全体就居中了：
<!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"/><style>#content{width:470px;margin:0auto;}#side{background:#99FF99;height:300px;width:120px;float:left;}#main{background:#99FFFF;height:300px;width:350px;margin-left:120px;}</style></head><body><divid="content"><divid="side">此处显现id"side"的内容</div><divid="main">此处显现id"main"的内容</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
4、xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默许占有一行呈现；
内联元素：又叫行内元素，望文生义，只能放外行内，就像一个单词，不会形成前后换行，起帮助感化。
一样平常的块级元素诸如段落<p>、题目<h1><h2>...、列表,<ul><ol><li>、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如:表单位素<input>、超等链接<a>、图象尺度之路[www.ckuyun.com]供应DIV+CSS教程,DIV+CSS视频教程,web2.0尺度,DIV+CSS结构进门教程,网页结构实例,css结构实例,div+css模板,div+css实例剖析,网站重构，网页代码,水晶图标,幻灯告白图片.教程合适初学者循规蹈矩进修!</div>
[/quote]创立完以上代码后，在扫瞄器中预览会显现以下了局：
上面用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;}
这就是怎样使用浮动完成两列结构的道理。那末三列呢？
6、三列自顺应宽度
三列自顺应宽度，一样平常经常使用的布局是左列和右列流动，两头列依据扫瞄器宽度自顺应。上面在二列自顺应宽度基本上修正一下<divid="side">此处显现id"side"的内容</div>
<divid="side1">此处显现id"side1"的内容</div>
<divid="main">此处显现id"main"的内容</div>
增添以下css款式：#side1{background:#99FF99;height:300px;width:120px;float:right;}
把本来#main款式的width:70%往失落，然后设置摆布外边距各120px，让出摆布列的宽度#main{background:#99FFFF;height:300px;margin:0120px;}
预览一下效果以下：
大概预览出来的效果和我的纷歧样，别急，另有一项设置，默许body是有外边距的，以是这里还得设置body的外边距为0；点击css面板上的新建按钮，然后在新建面板当选择：标签（重界说标签表面），然后选择body，设置body的界限为0便可。
<!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"/><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:0120px;}</style></head><body><divid="side">此处显现id"side"的内容</div><divid="side1">此处显现id"side1"的内容</div><divid="main">此处显现id"main"的内容</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
7、三列流动宽度
三列流动宽度能够在三列自顺应基本上增加一个父div，并设置这个div的宽度便可，以下，增加一个id为content的父容器。
在源代码里选中这三个div，然后点击工具栏上的“拔出div标签”按钮，这时候弹出的窗口拔出项会默许为：在选定的内容旁换行，输出id为content，然后给这个div界说个宽度
三列流动宽度出来了，要想完成三列流动宽度居中就更便利了，只需设置#content{margin:0auto;}便可
<!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"/><style>body{margin:0;}#content{width:470px;margin:0auto;}#side{background:#99FF99;height:300px;width:120px;float:left;}#side1{background:#99FF99;height:300px;width:120px;float:right;}#main{background:#99FFFF;height:300px;margin:0120px;}</style></head><body><divid="content"><divid="side">此处显现id"side"的内容</div><divid="side1">此处显现id"side1"的内容</div><divid="main">此处显现id"main"的内容</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
8、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;} <divid="side">此处显现id"side"的内容</div>
<divid="main">此处显现id"main"的内容</div>
从截图中分明看出，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了。
css是CascadingStyleSheets的缩写，不得不承认CSS单独使用会麻烦一点，但其与脚本语言（如我们四阶段所学的Javascript）及XML技术的融合，即可达到绝佳的页面效果。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:34:17
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主