前端HTML之页面结构

Posted 2020-07-03

前端工作一年了，期间由于工作需要，也做了一些产品的设计，因为自己的目标就是做编程，所以婉拒了与产品相关的一些任务，打算主要把精力放到编程这方面.

PS:2015年1月进军编程行业。

废话不多讲，这一年页面改版了N次，以至于设计师都撂挑子了，，，页面做多了，经验自然就有了。

背景（前端小白，迫于生计放弃之前销售工作，计算机专业）

 

 

前端的最基本要求，实现设计师所出的效果图，也就是样子跟设计图一样就可以。

这个要求容易实现，需要费点心思，花点时间，期初切图会慢一点，往后就越来越快了，，

 

 

前端的进阶一，页面是很讲究布局结构的。

      一次偶然的机会，跟同事讨论前端页面，他打开了拉勾网的页面，想做页面其中的一部分，我通过谷歌浏览器F12审查了一下页面代码，发现这页面结构跟我的页面结构也似乎如出一辙，页面是很讲究布局结构的，也就是说，接到页面之后，不是急于去写代码，而是先把布局结构在心里设计好，传统的结构无非就两种，上下结构，左右结构，只是上边与下边，左边与右边的宽度与高度不一样罢了。

 

 

前端页面切图的误区，元素高度，浮动，定位。

     首先来说一下高度，所有元素的高度，尤其是父元素，也就是最外层包含的容器，这些高度都是由其子元素撑开的。什么意思呢，通俗点说就是，心有多大，舞台就有多大，心就是子元素，舞台就是父元素，子元素能撑多宽，多高，父元素自然就实现了设计图上的效果。

    然后再来说一下浮动，不了解浮动为何要清除的刚入门的同学，会在子元素浮动后，父元素，塌陷失去高度，会手动定义高度，因此便觉得浮动不清除也没多大影响，这其实也跟第一个问题也有关系，他还不清除页面元素的高度是靠子元素撑起来的。

    最后说一下定位，定位就是需要一个参考值，在当前元素绝对定位时，若父元素没有使用相对定位，其参考的元素为窗口，也可以说是body元素，否则参考的就是最近的使用了相对定位的父元素。还有一种定位是，固定定位，就是固定在页面的某个位置，