仓酷云

标题: 今天来学习第三天二列和三列结构 [打印本页]

作者: 飘灵儿 时间: 2015-1-16 10:34
标题: 今天来学习第三天二列和三列结构
使用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的清闲，人人能够试一下。

3、两列流动宽度居中

两列流动宽度居中，必要在两列流动宽度的基本上改善，在学一列流动宽度居中时，我们晓得让它居中的办法，以是这里必要在这两个div以外再加一个父div：

<divid="content">
<divid="side">此处显现id"side"的内容</div>
<divid="main">此处显现id"main"的内容</div>
</div>

操纵办法：在源代码里选中这两个div的代码后，点击工具栏上拔出div按钮，填写id后断定，失掉如上的代码

上面就必要设置#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;}便可

body{margin:0;}
#side{float:left;background:#99FF99;height:300px;width:120px;}
#main{background:#99FFFF;height:300px;}

html代码以下：

<divid="side">此处显现id"side"的内容</div>
<divid="main">此处显现id"main"的内容</div>

上面看看IE6和IE7中的显现效果：

从截图中分明看出，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技术的融合，即可达到绝佳的页面效果。

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 爱飞 时间: 2015-1-18 06:47
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 小女巫 时间: 2015-1-18 06:47
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 冷月葬花魂 时间: 2015-1-24 12:09
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 小魔女 时间: 2015-2-1 11:53
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 谁可相欹 时间: 2015-2-7 07:24
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 兰色精灵 时间: 2015-2-21 03:21
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 变相怪杰 时间: 2015-3-6 19:54
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 飘灵儿 时间: 2015-3-13 08:27
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 飘飘悠悠 时间: 2015-3-20 18:23
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

欢迎光临仓酷云 (http://ckuyun.com/)