仓酷云

标题: 来一发像表格table一样轻松结构div层 [打印本页]

作者: 灵魂腐蚀 时间: 2015-1-16 00:26
标题: 来一发像表格table一样轻松结构div层
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
上面是我翻译的内容，是依据我对文章的了解意译的，你就别挑那里翻译的不合错误了，我的目标只是转达这个CSS技能。
很多网页计划师都喜好，将两个大概多个容器等高的并排安排，并在内里展现每一个容器的内容，就象典范表格结构中的单位格把持几个栏目标地位，也喜好容器的内容居中或顶部对齐显现。
可是你又不喜好用table来完成他，那怎样办呢？完成的办法良多，有依据视觉错觉完成的，有效JS把持使高度相称的，另有接纳容器溢出部分埋没和列的负底界限和正的内补钉相分离的办法来办理列高度不异的成绩。
实在有个复杂的办法，利用display:table,display:table-rowanddisplay:table-cell就能够完成，并且高度小的容器会自顺应那些高度绝对较高的，可是IE不撑持这个属性，我们先不必往叱责IE，信任今后会有所改良的。这里我制造了一个模子。
先看看xhtml的布局：
＜divclass="equal"＞
＜divclass="row"＞
＜divclass="one"＞＜/div＞
＜divclass="two"＞＜/div＞
＜divclass="three"＞＜/div＞
＜/div＞
＜/div＞
很复杂不必注释就可以看懂，可是这里给出一个table的布局，是否是很类似
＜table＞
＜tr＞
＜td＞＜/td＞
＜td＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞
上去是css：
.equal{
display:table;
border-collapse:separate;
}
.row{
display:table-row;
}
.rowdiv{
display:table-cell;
}
.row.one{
width:200px;
}
.row.two{
width:200px;
}
.row.three{
}
注释：
1.dispaly:table;让层.equal作为块级元素的表格table显现，也就是将他作为一个表格
2.border-collapse:separate;边框自力，就像表格没有兼并单位格之前
3.display:table-row;将.row作为表格行tr显现
4.display:table-cell;将.row的上级div作为表格单位格td显现
5.然后界说宽度
这里还利用了border-spacing:10px;来区分几个盒子，正如下面所报告的，IE下不克不及一般显现，可是在：Mozilla1.6,Opera7.50,Safari1.2.2,Firefox0.8,OmniWeb5b,Camino0.8b,andNetscape7.1经由测试都可以完善显现.
</p>
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

作者: 海妖 时间: 2015-1-18 06:41
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 若天明 时间: 2015-1-25 23:10
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 飘飘悠悠 时间: 2015-2-4 13:37
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 蒙在股里 时间: 2015-2-28 11:16
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 谁可相欹 时间: 2015-3-9 23:20
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 山那边是海 时间: 2015-3-17 03:10
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 精灵巫婆 时间: 2015-3-23 18:12
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

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