学习下CSS办理未知高度垂直居中办法2
你可能会说，好多英文看不懂，不过我告诉你，很抱歉那三个英文你必须记住，而且是最重要的三个，你可以把这么个盒子看成一个DIV，而所有标签都带有这三个属性。只管有CSS的vertical-align特征，可是其实不能无效办理未知高度的垂直居中成绩（在一个DIV标签里有未知高度的文本或图片的情形下）。尺度扫瞄器如Mozilla,Opera,Safari等.，可将父级元素显现体例设定为TABLE(display:table;)，外部子元素定为table-cell(display:table-cell),经由过程vertical-align特征使其垂直居中，但非尺度扫瞄器是不撑持的。
非尺度扫瞄器只能在子元素里设距顶部50%，内里再套个元素距顶部-50%来抵消。
CSS
body{padding:0;margin:0;}
body,html{height:100%;}
#outer{height:100%;overflow:hidden;position:relative;width:100%;background:ivory;}
#outer{display:table;position:static;}
#middle{position:absolute;top:50%;}/*forexploreronly*/
#middle{display:table-cell;vertical-align:middle;position:static;}
#inner{position:relative;top:-50%;width:400px;margin:0auto;}/*forexploreronly*/
div.greenBorder{border:1pxsolidgreen;background-color:ivory;}
xhtml
<divid="outer">
<divid="middle">
<divid="inner"class="greenBorder">
</div>
</div>
</div>
以上CSS代码的长处是没有hacks，接纳了IE不撑持的CSS2选择器#value。
CSS2选择器#value相称于选择器#value，可是InternetExplorer不撑持这类范例的选择器。一样地.value，相称于.value,这些只要尺度扫瞄器能读懂。
测试：Firefox1.5、Opera9.0、IE6.0、IE5.0经由过程。
切入正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来，并不是说一个页面里没有TABLE，而是在什么地方使用TABLE，你要认识到TABLE是表格，是存放数据用的，而不是用来布局的。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
页:
[1]