Web页面该如何布局

小灰灰 2022-04-10 10:09 231阅读 0赞

几乎所有的Web开发人员都使用HTML编辑过网页，也知道HTM元素具体是什么效果，尽管如此，但是很多时候，开发人员需要的页面布局和页面效果却依然不是按照自己想要的效果出现。之所以产生这样的问题很大的原因是开发人员在了解自己或客户需要的效果之后，就会受这些页面效果的影响失去考虑页面结构的能力。

我们很多人都知道HTML是一种树形结构的，任何一本关于HTML的书籍的开篇都会提到这个概念。但是很多Web开发者在开发过程中却会经常遇到因为这个概念所出现页面布局和排版问题。

如下图中，你作为一个web开发者，是使用那种HTML元素如何进行块分割的呢？

![Web页面该如何开发 之 布局 - 赵帅 - 赵帅 廊坊师范学院信息技术提高班 第八期][Web_ _ _ - _ - _ _]

布局方法一：

<body> <form id="form1" runat="server"> <div style="height: 100px; width: 924px; margin: 5px auto; border: 2px solid #ff0000"> 这是广告栏 </div> <div style="float: left; height: 400px; width: 200px; margin: 5px 10px 10px 150px; border: 2px solid #ff0000"> 这是左栏 </div> <div style="float: left; height: 100px; width: 710px; margin: 5px auto; border: 2px solid #ff0000"> 这是右栏 </div> <div style="float: left; height: 100px; width: 710px; margin: 5px auto; border: 2px solid #ff0000"> 这是右栏 </div> <div style="float: left; height: 100px; width: 710px; margin: 5px auto; border: 2px solid #ff0000"> 这是右栏 </div> </form> </body>

上述布局一个熟练的web开发者一眼就能看出问题。

问题一：

将所有的DIV元素并列放在同一个元素中，这样的问题，每当屏幕分辨率改变之后，设置的样式就会发生变化。例如我的屏幕是1366\*768的，如果我将上述的布局放在1280\*768就会出现问题，如下图所示：

![Web页面该如何开发 之 布局 - 赵帅 - 赵帅 廊坊师范学院信息技术提高班 第八期][Web_ _ _ - _ - _ _ 1]

这只是表面看会有上述问题，这样的问题是比较基础，我们开发过程中自己进行测试的时候通常都能发现。但是下面这种情况却只有在某种特定的情况才会被发现。

问题二：如下图所示：

![Web页面该如何开发 之 布局 - 赵帅 - 赵帅 廊坊师范学院信息技术提高班 第八期][Web_ _ _ - _ - _ _ 2]

之所以出现这样的问题，原因其实和上面出现的问题的原因是一样的，都是错误的将各个元素并列放在同一个元素中。

上述的理由可能很多有过web开发的人很容易就能明白原因所在，这里我给大家简单介绍一下：第一个问题是因为左栏的margin-left固定所致。第二个问题的出现是因为第三个右栏浮动的时候将本来应该由左栏占尽的位置没有站导致。

如何解决上述问题呢？很简单，将我们潜意识里隐藏的块"显示"出来，如下所示

<body> <form id="form1" runat="server"> <div> <div style="width: 924px; margin: auto;"> <div style="height: 100px; margin: 5px auto; border: 2px solid #ff0000"> 这是广告栏 </div> </div> <div style="width: 924px; margin: auto;"> <div style="float: left; width: 200px; margin: 5px auto;"> <div style="height: 200px; margin-right: 5px; border: 2px solid #ff0000"> 这是左栏 </div> </div> <div style="float: left; width: 720px; margin: auto;"> <div style="float: left; height: 100px; width: 716px; margin: 5px 0px 5px 5px; border: 2px solid #ff0000"> 这是右栏 </div> <div style="float: left; height: 100px; width: 716px; margin: 5px 0px 5px 5px; border: 2px solid #ff0000"> 这是右栏 </div> <div style="float: left; height: 100px; width: 716px; margin: 5px 0px 5px 5px; border: 2px solid #ff0000"> 这是右栏 </div> </div> </div> </div> </form> </body>

上述的布局相对于之前的布局仅仅是多了几个Div进行包括，仅仅是将几个"树叶"的"树杈"写了出来。正式因为有了这几个"树杈"的作用，如果我们再添加一个"树叶"那么就不会出现不知道为什么本该在这个"树杈"上的"树叶"却长到了那个"树杈上"。

绚丽页面效果如果没有基本的布局也会让人感到不适。所以关于页面如何布局，其实在web页面开发中占有重要的位置，特别是对于一个系统而言，为了系统的页面统一，页面布局就显更为重要。

今天我们暂时写这么多，谢谢阅读！

[Web_ _ _ - _ - _ _]: http://img4.ph.126.net/iTrLuR3x4AmqHaioATWu-Q==/6598116501726498324.jpg
[Web_ _ _ - _ - _ _ 1]: http://img1.ph.126.net/bVgHZ_0ttzOVSrNAGcp8oA==/6597329251400722531.jpg
[Web_ _ _ - _ - _ _ 2]: http://img2.ph.126.net/og-k58G366lGySYdi_3JLA==/6598071421749757672.jpg