HTML5技术

前端HTML之页面结构 - 科迪嘉嘉

字号+ 作者:H5之家 来源:博客园 2016-04-04 15:00 我要评论( )

前端工作一年了,期间由于工作需要,也做了一些产品的设计,因为自己的目标就是做编程,所以婉拒了与产品相关的一些任务,打算主要把精力放到编程这方面. PS:2015年1月进军编程行业。 废话不多讲,这一年页面改版了N次,以至于设计师都撂挑子了,,,页面做

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

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

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

背景(前端小白,迫于生计放弃之前销售工作,计算机专业)

 

 

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

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

 

 

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

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

 

 

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

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

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

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

    

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • 前端工具的安装 - 韩子卢

    前端工具的安装 - 韩子卢

    2017-05-02 08:00

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

网友点评
r