网页简单布局之结构与表现原则

结构与表现相关内容简介

结构与表现相分离的思想

网页换肤及总结

结构与表现相关内容简介

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样式