DIV教程之网页九宫格结构:使用通明的外圆角
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。网页制造poluoluo文章简介：在后面四篇文章中，我先容了九宫格的道理及一个使用案例，原本已告一段落了，可是谁人结构仍是有必定的范围性的。其最年夜的范围是不克不及使用四角圆角表面是通明的图片，而作为一个界面结构体例，假如不克不及使用通明的外圆角，那末这类结构的可扩大性就会年夜受影响，不克不及最年夜
媒介：在后面四篇文章中，我先容了九宫格的道理及一个使用案例，原本已告一段落了，可是谁人结构仍是有必定的范围性的。其最年夜的范围是不克不及使用四角圆角表面是通明的图片，而作为一个界面结构体例，假如不克不及使用通明的外圆角，那末这类结构的可扩大性就会年夜受影响，不克不及最年夜化限制地得以推行。本文就是要从基本上办理这个成绩。
我晓得这个成绩的本源在于：两头的摆布边框列垂直同高发生的，由于它们的父级容器是box这个总容器，而不是一个自力的容器，而底部的摆布两个角容器是向上负偏移到它们的下面的，遮盖住了背景致。以是当圆角容器中的图片接纳半通明或通明的图片时，其通明部分就会显现出摆布两侧边框的图片背景出来。
在制造后面的《牢不成破的九宫格结构》的模子时，我就已发明了这个成绩，事先制造圆角图片也是接纳的通明的圆角图片，但是厥后发明这个成绩后，为了削减贫苦，我又将通明的圆角片的通明部分加上一个和总容器不异的背景致，来制止了这个成绩。但这个办法终极不是办理的最终举措，在我们的一样平常事情中，接纳半通明的圆角来定制界面是很有需要的，因而在那篇文章中仅仅只是回避了成绩，而没有从基本上办理成绩。在文章公布以后，终究有仔细的伴侣在试用以后，提出这个成绩，哈哈，看看终究是没法偷懒往返避这个成绩了。
晓得了成绩的本源后，要办理它也是一件复杂的事变。
由于我这篇文章是创建在《牢不成破的九宫格结构》这篇文章的基本上的，假如还没有看过那篇文章的伴侣，无妨先看了它后再来看这篇文章。这将有助于你的消化！
看来，要办理这个成绩，我必要将两头部分作一些布局上的修正。由于我但愿它的摆布边框容器是和内容区是垂直同高的，也就是当内容区的笔墨内容的高度产生变更时，其摆布边框的高度随着同步伐整其高度。这就是一个典范的三列同高结构。但与平常看到的三列结构有点分歧的是，我但愿两头的内容区的宽度填满全部两头的宽度，但它不是100%的宽度，而是100%减往摆布两列边框的宽度，而这个宽度并非一个百分比，它们都是有流动像素值的。这必要使用到我在上一篇文章中提到的办法来举行的办理。
为此我必要改动一下本来的布局：
【布局层】
我给两头的左中右三个容器增添一个父级容器，并给它界说一个类名middle，那末，如今的两头地区的布局应当是如许的：
<divclass="middle">
<spanclass="m_l"></span>
<spanclass="m_r"></span>
<divclass="context">
<p>内容区<p>
</div>
</div>
网页制造poluoluo文章简介：在后面四篇文章中，我先容了九宫格的道理及一个使用案例，原本已告一段落了，可是谁人结构仍是有必定的范围性的。其最年夜的范围是不克不及使用四角圆角表面是通明的图片，而作为一个界面结构体例，假如不克不及使用通明的外圆角，那末这类结构的可扩大性就会年夜受影响，不克不及最年夜
【款式层】
我们再界说一下middle的款式，我们将本来的box的overflow:hidden;作废，将它加在middle容器上，让超越的部分截出埋没。
.box{width:50%;margin:50pxauto0;background:#fff;}
.middle{overflow:hidden;zoom:1;}
这时候必要出格指出的是，假如只是将middle这个容器设置为overflow:hidden的话，那末这个模子能够在IE6以上的一切扫瞄器中经由过程，但关于IE6来讲，成绩仍然存在（你能够将此句删除，然后在IE6测试看看。）。最初加上zoom:1才干完善地办理这个成绩。
基本模子的最终效果以下：
图一
此基本案例也包含鄙人面的下载紧缩包中。你能够下载到本机举行测试。
【案例使用】
为了更直不雅地测试通明圆角框效果，我在body中加了一张高低突变的程度平展的背景图片，而且出于简化模子的必要，我将圆角框的图片的外圆角改成了通明的gif图片（PS：你也能够将它换成png-24半通明的圆角图片，固然就要注重IE6的兼容性成绩，必要JS代码来撑持。撑持代码鄙人面的播放器的案例中已使用了，你略加修正就能够利用。）。你能够参照上面的实例来计划图片，在使用你本人的计划前，你必要修正款式表中图片的宽高值。
案例模子的效果截图以下所示：
图二
在下面的最终效果中，能够看到在一个突变背景下，其圆角框是通明的。你也以点击上面的“宽屏”、“全屏”按钮来测试当窗口缩小时其通明圆角图片的完善使用。
本模子在以下扫瞄器中完善经由过程：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
页:
[1]