几乎所有的Web开发人员都使用HTML编辑过网页,也知道HTM元素具体是什么效果,尽管如此,但是很多时候,开发人员需要的页面布局和页面效果却依然不是按照自己想要的效果出现。之所以产生这样的问题很大的原因是开发人员在了解自己或客户需要的效果之后,就会受这些页面效果的影响失去考虑页面结构的能力。
我们很多人都知道HTML是一种树形结构的,任何一本关于HTML的书籍的开篇都会提到这个概念。但是很多Web开发者在开发过程中却会经常遇到因为这个概念所出现页面布局和排版问题。
如下图中,你作为一个web开发者,是使用那种HTML元素如何进行块分割的呢?
布局方法一:
<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开发的人很容易就能明白原因所在,这里我给大家简单介绍一下:第一个问题是因为左栏的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页面自动布局,自动拖动即可完成页面的任意布局。
web div页面布局 垂直布局
Web标准网页布局书中所有源代码。。。。。。。。
资源包含:demo.html,demo.js,codebase,WebComponents,webVideoCtrl.js和EXE文件
responsive web design 1.响应式设计意味着什么? 2.怎么做响应式设计?
6、Webdynpro入门之页面控件布局介绍,详细讲解Webdynpro中4种页面布局。
有手工效果形状。 是老外设计的一个形状库。非常实用,好用。 希望你喜欢。 其中writeframe非常可爱。 画出东西来逗死了。 很娱很乐。
web-页面后台布局,提供简单的布局代码示例,使用display:flex简洁的布局语法实现。目前,display:flex已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
针对当前Web页面开发复杂度高且效率低的情况,提出一种挖掘现有页面布局结构和样式属性的方法来实现Web页面自动化设计。该方法充分利用Web网页布局结构上的特点,采用分级处理的方式,首先利用页面分块算法思想通过...
腾讯网Web页面设计规范. web标准的页面规范 对于提高自己写div css的页面有很大帮助 对于页面布局 字体 颜色 图片都有详细的说明和介绍
C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题
NETBEANS做的WEB登录页面 做的不好,仅供NETBEANS的初学者参考。 我是来赚积分的……之后还有其他的页面。
照片墙是一个可以将照片按照一定的顺序排列的 Web 页面,基本要求是照片要合理的地排布在页面上,且照片的尺寸要合适,布局要整齐。 点击照片,可以在当前页面上方显示一个新的图层,其中显示这张照片的更大尺寸的...
页面而已模块 适合web页面而已所用 前端设置模块
页面布局代码,页面代码布局示例页面代码布局示例页面代码布局示例页面代码布局示例
主要用于web系统界面的草图快速生成。简介明了,是网页前期布局规划设计的好帮手!
根据一个网站页面自己仿写的手机端页面,移动端响应式布局
页面布局种类有很多,但万变不离其宗,归纳总结出11中布局方式。 用经典的三栏形式布局举例: 固定 - 固定 - 自适应;... 常见的Web页面布局分类汇总,欢迎补充! 标签:Weblayout CSS框架
用DIVCSS技术的WEB页面布局实践