分区表

分享于 

10分钟阅读

Web开发

  繁體 雙語

介绍

本文演示了如何使用div元素在页面上不使用 table 元素来有效地构建网站。 由于div元素有很多优点,大多数客户机要求设计师使用div元素而不是 table 元素开发网站。 代码 below 用于初学者学习使用div元素来开发网站。

下面解释了为什么在 table 元素上使用 DIV。

table 元素的优点: 大多数设计师使用 table 进行一致的外观。 表也很容易维护。 table的另一个优点是它与大多数浏览器兼容。

表元素的:: 所有这些都有成本: 太多的嵌套表格增加页面大小和下载时间。 更多的表格元素将重要内容向下推,这样搜索蜘蛛就不太可能向搜索引擎添加内容。

DIV元素的: div可以在页面结构和页面上减少元素数量,从而使页面更快加载。 它也使页面与搜索引擎蜘蛛更加兼容。

DIV元素的: 的主要缺点不是所有的CSS元素都不是浏览器兼容的。 因此,我们必须编写一些定制的CSS来解决问题。

使用代码

创建了一个简单的应用程序,显示了如何轻松地使用div元素创建自己的页面。

下面的图展示了div元素的布局。

 image001.jpg

 divlayout.jpg

下面是我为页面布局创建的样式表类的列表。 让我们更详细地了解。

  • divHeaderTable: 指定给html页面 header的类及其作为headertable的类
  • divHeaderRow: 分配给div元素的类,它作为 table 行的header 行。 作为 header 图像的高度修复到 105行,高度元素值为 105像素。
  • divHeaderColumn: 分配给div元素的类,它作为 table的header 列。 由于 header 部件分为三个部分,宽度元素具有值 99%。
  • divTable: 分配给div元素的类作为html文档的容器部分中的table。
  • divRow: 分配给div元素的类作为html文档的容器部分中的行进行。
  • divColumn: 分配给div元素的类作为html文档的容器部分中的table。 容器窗体元素是 4行,宽度元素具有值 24%。
body{
 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: 100%;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;}

下面是页面的HTML代码,它显示了分配给元素的类。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Gmind Solusion-DivElement Layout</title><linkhref="CSS/StyleSheet.css"rel="Stylesheet"type="text/css"/></head><body><divstyle="width:99%; height:565px;"><divclass="divHeaderTable"><divclass="divHeaderRow"><divclass="divHeaderColumn"><imgalt="Offshore Outsourcing software development company India"title="Offshore Outsourcing software development company India"src="Images/gmind.png"width="100%"height="105"/></div><divclass="divHeaderColumn"></div><divclass="divHeaderColumn"><div><imgalt="Gmind"width="15"height="10"src="Images/smllindia.jpg"/> +91-9702989270
 </div><div><imgalt="Gmind"src="Images/smallusa.jpg"/> +91-9924839208
 </div><div></div><div></div></div></div></div><divid="menu"class="divHeaderTable"><ulstyle="list-style-type:none;"><listyle="float:left"><ahref="javascript:void(0);">Home</a></li><listyle="float:left"><ahref="javascript:void(0);">About Us</a></li><listyle="float:left"><ahref="javascript:void(0);">Services</a></li><listyle="float:left"><ahref="javascript:void(0);">Technology</a></li><listyle="float:left"><ahref="javascript:void(0);">Outsourcing</a></li><listyle="float:left"><ahref="javascript:void(0);">Quality</a></li><listyle="float:left"><ahref="javascript:void(0);">Career</a></li><listyle="float:left"><ahref="javascript:void(0);">Blogs</a></li><listyle="float:left"><ahref="javascript:void(0);">Partner</a></li><li><ahref="javascript:void(0);"title="Contact Us">Contact Us</a></li></ul> 
 </div><divid="divHeader"class="divHeaderTable"><h4>User Registration</h4></div><divid="content"class="divTable"><divclass="divRow"><divclass="divColumn"><div><labelid="lblSolutation"> Solutation</label></div><div><inputtype="text"id="txtSolutation"/></div></div><divclass="divColumn"><div><labelid="lblFname"> First Name</label></div><div><inputtype="text"id="Text1"/></div></div><divclass="divColumn"><div><labelid="lblMname"> Middle Name</label></div><div><inputtype="text"id="Text2"/></div></div><divclass="divColumn"><div><labelid="lblLname"> Last Name</label></div><div><inputtype="text"id="Text3"/></div></div></div><divclass="divRow"><divclass="divColumn"><div><labelid="Label10"> Login Name</label></div><div><inputtype="text"id="Text13"/></div></div><divclass="divColumn"><div><labelid="Label9"> E-mail</label></div><div><inputtype="text"id="Text12"/></div></div><divclass="divColumn"><div><labelid="Label7"> Password</label></div><div><inputtype="password"id="Text10"/></div></div><divclass="divColumn"><div><labelid="Label8"> Confirm Password</label></div><div><inputtype="password"id="Text11"/></div></div></div><divclass="divRow"><divclass="divColumn"style="width:48%;"><div><labelid="Label1"> Address1</label></div><div><textareaid="Text4"style="width:80%;"></textarea></div></div><divclass="divColumn"style="width:48%;"><div><labelid="Label3"> Address2</label></div><div><textareaid="Text6"style="width:80%;"></textarea></div></div></div><divclass="divRow"><divclass="divColumn"><div><labelid="Label2"> State</label></div><div><inputtype="text"id="Text5"/></div></div><divclass="divColumn"><div><labelid="Label4"> City</label></div><div><inputtype="text"id="Text7"/></div></div><divclass="divColumn"><div><labelid="Label5"> Country</label></div><div><inputtype="text"id="Text8"/></div></div><divclass="divColumn"><div><labelid="Label6"> Pin Code</label></div><div><inputtype="text"id="Text9"/></div></div></div><br/><divclass="divRow"><inputtype="submit"value="Submit"onclick="javascript:void(0);"/> or 
 <ahref="javascript:void(0)">Cancel </a> 
 </div></div></div> 
 <divstyle="text-align:center; background-color:Green;"> Contact us to discuss your requirements
 </div></body></html>

Points of Interest

这并不是你可以使用div和CSS创建的唯一结构,这样你就可以实现不同的布局。

因此从 上面 示例可以看到,使用CSS的div布局是简单而强大的。 由于这个网页下载速度更快,避免使用更多的标签,并且创建更吸引搜索引擎的网页。


tab    div  
相关文章