快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱乐ag手机版:超级简单DIV布局



/Files/zhuqil/DivLayout.zip

这和记娱乐ag手机版篇文章演示在一个页面上有效的应用div元向来构建网站,而不是应用table元素。由于div元素有很多上风,以是大年夜部分客户开拓网站要求设计开拓div元素,而不是table元素。上面的代码是是为了给初学者进修应用div元素开拓网站的。

下面解释为什么应用div元素而不是table元素

table元素的优点:大年夜多是设计开拓者应用table是为了统一的外不雅。table也异常轻易掩护。另一个表的好处是,它是与大年夜多半浏览器兼容。

table元素的毛病: 所有的这些都必要耗损资源:嵌套和记娱乐ag手机版太多的table会增添页面的大年夜小和下载光阴。太多的table元素会使和记娱乐ag手机版网页紧张的内容占领比例下降,导致搜索蜘蛛把没用的内容添加到搜索引擎中。

DIV元素的优点:div加css,我们可以实现同样的基于table的页面布局,而且可以削减页面上的元素数目,这样使页面加载更快。这也使得更多的网页与搜索引擎匹配。

DIV 元素的毛病:主要的毛病是,并非所有的CSS元素与所有的浏览器兼容。正由于如斯,我们必须写一些自定义CSS来办理问题。

我已经创建了一个简单的利用法度榜样,展示了若何轻松地就可以创建仅仅只有div元素的网页。

下面的图展示了div元素的结构

这里是我创建的对页面结构css样式表类的列表,让我们看看更多的细节。

divHeaderTable: 设计html页面的头部,利用此样式的div感化相称于headertable 。

divHeaderRow:利用此样式的div感化相称于table的header row 。因为头部的图像固定为105,以是row中height元素值为105px。

divHeaderColumn:利用此样式的div感化相称于table的header column 。值为99%的头部元素被划分为3个这样的元素部分。

divTable: 利用此类的div感化相称于html文档容器中的table 。

divRow: 利用此类的div感化相称于html文档容器中的row。

divColumn: 利用此样式的div 相称于html文档容器中的Column。容器里面将有四个width为24%的row。

代码

bod和记娱乐ag手机版y

{

background-color: LightBlue;

font-family: Verdana;

font-size: 13px;

}

.divHeaderTable

{

width: 100%;

padding-bottom:5px;

display:block;

}

.divHeaderRow

{

width: 100%; /* add extra that you want to for header column */

display:block;

height:105px;

}

.divHeaderColumn

{

float: left;

width: 33%;

display:block;

}

.divTable

{

width: 10和记娱乐ag手机版0%;

display:block;

padding-top:10px;

padding-bottom:10px;

padding-right:10px;

padding-left:10px;

}

.divRow

{

width: 99%;

display:block;

padding-bottom:5px;

}

.divColumn

{

float: left;

width: 24%;

display:block;

}

您可能还会对下面的文章感兴趣: