一个好的程序员的web前端教程分享如何划分网页的结构网页的结构划分呢？ 对于一个前端初学者来说，第一步是学习如何划分网页的结构。当设计师给你一张设计图时，你需要根据这张图做一个标准的页面。这里所说的标准是w3c标准。参考w3school在线教程。那么要制作出一个完整的符合标准的网页，第一步就是对网页的结构进行划分。一般来说，网页结构的划分需要遵循几个原则： 1.自上而下原则 因为浏览器渲染网页的顺序是自上而下的。这里提到渲染这个词。所谓渲染，就是浏览器将代码转换为页面显示内容的过程。浏览器会从上到下读取你写的代码，并从上到下显示。 2。从左到右的原则 而自上而下，同一行的内容是从左到右渲染的，所以在划分结构的时候有一个从左到右的顺序。 3。一个像素原则 这个原则对于新手来说是必须坚持的，但并不意味着你必须时刻承认这个原则。前期我们在划分网页的时候，一定要准确划分，尤其是横向划分。试想一下，如果外框的宽度是1200像素，里面的两个框是600像素，另外一个是601像素，总和超过了parent的宽度，那么第二个框必须切换到下一行展示。 说完以上三个原则，有些人会盲目地遵循这些原则。比如在划分结构的时候，一定要分上部和下部。但是，例如，我在下面截取了该网页的一部分。属于一个整体，文字是对图片的描述，所以不宜分上下，而应横分。每个图文都是内容的一部分，横向分为四个部分： 我们说一般的网页有header（页眉部门区）、banner（广告横幅区）、main（主要内容area),footer（底部区域），并不是所有的网页在单页上都是这样的，有的网页是没有banner的，但是初学者很容易把header下面的部分分成banner，除了这些部分，有的网页也会有图标等区域，喜欢把它们分成main。 说到主体区域，就是各种结构分区。有的网页有背景色甚至是背景图，从左到右，所以我们的结构划分也应该有一个带柱子的外框，给它背景色或背景图，里面嵌套一个内框。固定可见区域的宽度并居中。如果没有banner背景，那么这时候就不用给banner框了，只需将主区域居中固定宽度即可。 那么在划分结构的时候如何划分一些方块区域之间的空隙也是初学者最头疼的问题。其实严格来说，这些空白是不会影响结构划分的，因为空白区域是可以用代码实现的。但是，您不能通过粘贴文本的顶部和底部来划分某些文本区域，因为文本有自己的行高。 另外，在某些地方，可能会有一些小图片或部分内容遮住外面的大盒子。这部分在划分结构的时候可以忽略，因为我们可以在后面的代码实现中使用定位技术来实现。
