无表格的网页布局

分享于 

10分钟阅读

Web开发

  繁體

介绍

来吧,这不会是这么难的" !

我是一个新手 ASP.NET 开发者。 我也很固执。 我想用 ! 我想在网站的右下角放置一些东西,我想我想在不需要表的情况下收费。 已经查看了一个网站的源代码,它包含表的表 inside。表的inside。表 inside。表的inside。 我想应该有更好的方法"

本文向你展示了如何在不使用表的情况下布局网页。 它演示了如何使用层叠样式表和 <div> 元素来放置所需的内容,以及你希望在网页上显示的内容。

背景

我发现了一篇关于 CodeProject.com的优秀文章,标题为"。 DIV table",由 Pranay Rana。 这听起来像我在找的东西。 它让我更接近我想去的地方。 但是,它使用它的他'things'填充它的左边的空间,将'thing'放在右边。 要把东西放在底部,需要填充的空间 上面。 我说了 上面 我想用我的方式。 不是这样的。我想把东西放在右下角的东西上,而不是页面上的任何东西。

作为 ASP.NET的学生,我想在这个项目中练习我新获得的技能,所以它最初是在 ASP.NET 中完成的。 但是这里没有需要服务器端代码的东西。 这纯粹是你的浏览器呈现一些 HTML。 因此,我将用不需要 ASP.NET的HTML来表示。 如果你想在 ASP.NET 项目中使用这种技术,将它的移植到你的项目中就没有问题了。

我在互联网上搜索了一些简单的说明,告诉我如何做我想要的。 我什么都找不到( 因此,本文。) 从Pranay文章中找到的,我知道我需要在'position'属性中做些事情。 我找到的文档说明"绝对位置元素将 relative 定位到具有 static 之外的位置的第一个父元素。"理解'除了 static'的含义,并且我可以确定绝对定位'相对于。 父'。但是,'第一个"平均值"? 从你的文件顶部开始的第一个? 这包括从级联样式表设置样式的父级。我发现'第一个父级'符合标准,从对象到要定位的嵌套层次结构 ( 第一个"aha") !

我认为在'笛卡尔坐标'中定位。 ( X 向右增加)。 根据上下文,Y 增大或者向上移动。屏幕位置按如下方式指定。 在窗口中定位东西是这样做的,( x,y ) 是从左上角的距离。 这适用于样式元素'left'和'top'。 但是使用'right'和'bottom',这将非常迅速。 因为我试图在右下角定位东西,我被( and frustrated ) 迷惑了。 最后,我发现这些定位属性的度量值是从父对象的相应边缘 ! ( 第二个"aha") 发现了这个发现,一切都fell了。

当我在我的风格表中尝试各种东西时,我看到了一些看起来非常简单的东西。 愚蠢的代码愚蠢的CSS 为什么不工作"结果是愚蠢的开发者( 我) )。 ! 如果你在键入样式规则时出现了半个冒号,那么它们无法工作,并且你没有任何错误信息。 ( 第三个"aha") !

使用代码

本文的HTML只是一组嵌套的<div> 元素和一些简单的文本,用于演示目的。 有关使用级联样式表而不是用于布置网站的表的优缺点,请参阅文章"。 DIV table"。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Web Page Layout Without Tables</title><metaname="author"content="Jeff Nygren"/><metaname="description"content="Demonstration of Tableless Web Page Layout"/><linkhref="TablelessLayout.css"rel="stylesheet"type="text/css"/></head><body><divclass="divWholeScreen"align="center"><divclass="divPageBox"><divclass="divTitle"><h1>Tableless Layout</h1></div><divclass="divOuterUpperLeft"><divclass="divInnerLL"></div></div><divclass="divOuterUpperRight"><divclass="divInnerUL"></div></div><divclass="divOuterLowerLeft"><divclass="divInnerLR"></div></div><divclass="divOuterLowerRight"><divclass="divInnerUR"></div></div><divclass="divContent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
 fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
 culpa qui officia deserunt mollit anim id est laborum.<br/><br/><br/><divclass="divMyGoal"> This was my goal!!
 </div></div></div></div></body></html>

样式表实际上是 <div> 代码中的所有样式。 .divPageBox<div> 仅仅是网页上所有内容的容器。 注意 position:relative; 属性这将使它的所包含的所有元素都成为 <div> 元素"。第一个父元素,它的位置不是 static"。 任何带有 position:absolute;的元素都是HTML内容的"在流动之外"。 'top','left','bottom'和'right'属性定义了元素放置在哪里,它的relative 为父级。 '.divOuter...'类将页面上较大的彩色框放置在。

。tableless布局屏幕截图

/* TablelessLayout.css *//* Author: Jeff Nygren */body{
 background-color:#EEFFCC;}
.divWholeScreen{
 margin:0px;}
.divPageBox{
 position:relative;width:800px;min-height:350px;text-align:left;border:solid 1px Black;background-color:#EEEEEE;}
.divTitle{
 width:400px;margin-left:auto;margin-right:auto;text-align:center;}
.divOuterUpperLeft{
 position:absolute;top:20px;left:20px;width:150px;height:150px;background-color:Yellow;}
.divOuterUpperRight{
 position:absolute;top:20px;right:20px;width:150px;height:150px;background-color:Blue;}
.divOuterLowerLeft{
 position:absolute;bottom:20px;left:20px;width:150px;height:150px;background-color:Lime;}
.divOuterLowerRight{
 position:absolute;bottom:20px;right:20px;width:150px;height:150px;background-color:Red;}
.divInnerUL{
 position:absolute;top:10px;left:10px;width:60px;height:60px;background-color:Maroon;}
.divInnerUR{
 position:absolute;top:10px;right:10px;width:60px;height:60px;background-color:Green;}
.divInnerLL{
 position:absolute;bottom:10px;left:10px;width:60px;height:60px;background-color:Navy;}
.divInnerLR{
 position:absolute;bottom:10px;right:10px;width:60px;height:60px;background-color:Olive;}
.divContent{
 position:relative;margin-left:200px;padding:15px;margin-bottom:20px;width:370px;background-color:White;font-size:larger;}
.divMyGoal{
 position:absolute;bottom:0px;right:0px;padding:6pt;color:#FFF000;background-color:#000040;font-size:larger;font-weight:bold;}

小盒子在大盒子的位置。 position:absolute; 属性使大框成为小方框。 '绝对'不是'static"。

Points of Interest

还有别的我希望你们注意到。 假设你已经下载了示例代码,现在已经在浏览器中查看了 TablelessLayout.html。 编辑这里文件,并双击它所包含的'占位符文本'的数量。 这将导致 .divPageBox 框展开以包含附加内容。 注意,页面底部的两个盒子保持它的位置 relative 到包含框的底部 ! 最后,正如你所看到的,从"这是我的目标"的框中,我已经取得了我的目标,在 block的右下角不使用表。 我做的是'我的方式'。

如果你是一位有经验的网站开发人员,我相信你认为这是微不足道的。 但经过两天的搜索,我似乎并没有那么简单。 我在写这篇文章,希望能保存别人的痛苦。

结束语

感谢你阅读我的文章。 我希望你觉得它有用。 如果你是一个比我更有经验的开发者,或者知道我在本文中提到的一种更好的方法。 我一直在尝试学习一些新东西。


WEB  tab    Layout  tables  页面布局  
相关文章