网页布局之结构与表现原则的示例分析

这篇文章主要介绍了网页布局之结构与表现原则的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

公司主营业务：网站制作、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出南谯免费做网站回馈大家。

结构与表现相关内容简介

html结构 css表现 javascrip行为网页布局要考虑到结构，表现，行为分离原则，首先重点放在结构和语义化上面，再考虑CSS，JS等，便于后期维护和分析……

结构与表现相分离的思想

初级的开发人员思路及制作方法：div层层嵌套；
中级的开发人员思路及制造方法：去掉多余的div,进行简化；
高级的开发人员思路及制造方法：最大化的简化html的结构，然后用css进行设置，减少html与css的契合度。
步骤：
先按结构和语义编写代码
然后进行css样式设置
减少HTML与CSS契合度

overflow:
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

text-indent文本缩进到目标位置，可以不要给文本再另外套标签。减少冗余代码

拿到一个网页设计图的时候，首先关注网页的文字内容以及内容模块间的关系。
把重点放在编写语义化的html代码上，而不要过多考虑设计图上的样式，
等到html按内容编写完成之后，再考虑样式的实现。
在不改变现有结构的基础上，完成设计图要求的视觉效果
margin可以是负值，通过负值，可以使该内容进行移动！实现四个方向的移动。
在结构（HTML）和样式（css）中，可以先把内容通过HTML写出来，再利用margin移动位置，实现排版，降低样式和结构的耦合，并且减少代码

网页换肤及总结

尽量减少html对css的依赖

网页换肤：相同的html结构，不同的css样式

下面是一些灰牛WEB同学的分享

一开始我们接触网页制作的时候，就了解到html代表结构、css代表样式、javascript代表行为，网页制作中，我们一直强调结构与表现相分离的原则，这里面的结构一般指HTML，此外分离是说把它们写在不同的文件加以引用吗？当然不是，在这里的学习中了解到，分离不单是一种方法更是一种思想，简而言之，一个平面二维坐标，其中x轴代表技术发展，y轴代表网页制作需求，分离就是根据根据技术发展和我们的网页制作需求完成的！

举例：比方说我们盖房子，html就相当房子的结构，css相当于后期的装修，网页都是基于一张效果来完成的，在我们浏览网页的时候，根据效果图不同，样式不同，所以我们浏览的页面是五花八门的，那么我们如何来布局好网页？首先不要考虑过多的css样式，尽量让我们的html结构合理简洁和语义化，然后再添加完善css样式！

当我们拿到页面时，不同的制作者对结构结构样式有不同的链接，根据这个结构样式了解深度的不同，暂定划分为：初级、中级、高级三个不同的层次；

网页布局之结构与表现原则的示例分析

比方说这样一个常见的对话框，有3个单元，首先我们需要完成一个单元，另外的进行CTRL+V；如果是初级制作者拿到页面后，一般按照上面的方框进行划分，一个大的div里面包含2个小的div，左右浮动，左侧放img，右侧放p,h等标签，至于时间因子通过 position属性定位实现,那下面就用代码说明下

10分钟前渐行渐远渐无书

你是不是每天脑子里盘踞许多挥之不去的想法觉得自己很忙，仔细想想又不知道自己真正地在忙些什么，而养成良好的习惯，照顾好自己，追随自己的梦想，才能提高生产力，这也意味着改善你与家人和朋友的关系，因为当你改变时，你周围的一切都改变了，高效能的人有哪些习惯值得我们学习？

/*reset*/ body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"} /*公共样式*/ .demo1,.demo2{ width: 600px; margin-top: 20px; overflow: hidden; margin-bottom: 20px; } p{ text-align: justify; text-indent: 2em; line-height: 24px; }

/*初级*/ .demo1{ width: 600px; margin-top: 20px; overflow: hidden; } .demo1 .fl{ width: 100px; float: left; } .demo1 .fl img{ margin-left: 20px; padding: 10px; border: 1px solid #ccc; } .demo1 .fr{ width:488px; float: right; border: 1px solid #ccc; position: relative; padding: 5px; } .demo1 .fr span{ position: absolute; right:18px; top: 5px; }

/*中级*/ .demo2 .fr{ width:488px; float: right; border: 1px solid #ccc; position: relative; padding: 5px; } .demo2 .fr span{ position: absolute; right:18px; top: 5px; } .demo2 img{ margin-left: 20px; padding: 10px; border: 1px solid #ccc; }

/*高级*/ .demo3{ border: 1px solid #ccc; width: 488px; margin-left: 100px; padding: 5px; position: relative; } .demo3 img{ float: left; margin:-6px 0 0 -86px; padding: 10px; border: 1px solid #CCCCCC; } .demo3 span{ position: absolute; top: 10px; right: 20px; }

重庆分公司，新征程启航

网页布局之结构与表现原则的示例分析

其他资讯