页面布局思路

网页布局是前端中一个基本概念,当一张空白的网页呈现在我们眼前时,如何把文字,图片等网页元素有规则地排列在网页中,就是网页布局要考虑的重要方面。好的网页布局能够让前端开发人员更好地把握网页的整体结构,提高代码的书写效率,复用性,和后期维护。作为初学者,我们应该重视页面布局,而不是简单为了达到页面效果,而不考虑页面的布局,毕竟页面布局和代码的质量是息息相关的。经过学习,我总结了一些自己的理解:

1.要有整体意识。当我们在页面布局时,首先可以从整体出发,了解页面的大概内容,清楚应该把一个网页分成几个大的模块。

2.从外向内,层层递进。写清标签的嵌套关系,简单明了的层级关系,不仅�便于我们查找页面内容,方便在出现错误时能够快速地修改,而且在书写js代码时更好的找到我们所需要的元素。对后期其他开发人员在修改代码时提供了便利,减少了工作量,提高了工作效率。

3.模块化

在把握页面大模块的同时,分析组成大模块的局部,把局部模块化,可以为我们排除很多其他页面元素的干扰,降低页面在出现错误时,可能的影响范围。保证我们在写代码时的思路。

4.命名规则

在给页面元素命名时,尽量做到望名知意。一个只有自己知道的名字,是一个不合格的名字。因为我们的代码,写出来不只是给自己看的,后期还需要大量的维护和更新。如果没有意义的名字太多,就会大大影响后面人的维护,这也能体现我们的职业素养。毕竟我们自己也不希望接到存在同样问题的项目。最好是在命名时还要体现元素的嵌套关系,这样在书写CSS代码时,就会便捷许多。 下面是一个实例,辅助理解。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,613评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,865评论 1 92
  • 一些典故从我的指缝间流逝 听不见天的回声 我怀揣着一些莫须有的玄意 将它播撒在人们的心眼里 狡猾地粉饰太平 无辜罪...
    逢茶君阅读 125评论 0 0
  • 你搬家 很想问你 搬去哪里 是否有什么我可能猜到 又不想知道的地方 或许某天你会回过头看我一眼 也会想想当初 想想...
    顾霜瓷阅读 167评论 0 0