【规整】网页怎么做才不会外行?

长话短说哈,今天晚上我跟同学们去喝酒了,所以文章会短一些。

网页怎么做才不会外行?这句话的意思就是说,你做的网页在浏览器里打开,像我这样的人扫一眼,就能判断出这是一个新手的练手作品?还是一个工作能力可靠的人做的。

那我是怎么判断的呢?当然会有许多标准,其中之一,就是网页各个模块之间的间距。你去看京东也好,淘宝也罢,你仔细观察它们的各个模块之间的间距,在同一个页面上的间距,一定是相等的。

而许多前端新人,他们经常不会注意到这个细节。他们的网页的间距是不相等的,这就包括行间距,字间距,模块间距,其实整个网页怎么样做到横平竖直?就是各种间距都是相等的,这样整个网页看起来就有一种规划的美感。

<!-- -->

那怎么做到这一点?

至少有二种办法。

一、你在做页面的时候,就把各种间距都写好定好。但这样会比较累,而且不利于维护。意思就是说,如果某天设计UI有变化,那么你需要一个一个的去调整。

二、就是把间距在css中定义为一个单独的样式,在需要间距的地方去加载。因为class可以加载多个css定义。

我个人主观认为,第二种方法会更好些。因为css也是需要模块化的。

<!-- -->

把页面的间距定好,至少会有二方面的好处。

一、会让你的页面看起来不外行,这在本文的标题中已经写了。

二、你可以把你的css定义,设计为一个css模块的二叉、多叉树的结构。

这在面试的时候毫无疑问的会成为你的加分项,毕竟架构设计的思路和实施在前端实践中的地位越来越重要。而一个懂、理解前端架构的前端开发,他的能力、潜力、前景会更大些。

所以同学们,相信我,不要对css的结构设计漫不经心。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

前端开发者常用的9个JavaScript图表库

24130
来自专栏进击的君君的前端之路

什么是CSS预处理器

13320
来自专栏前端架构与工程

《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天:人生若只如初见简单记录了笔者初...

26080
来自专栏菩提树下的杨过

Flex:地图缩放平移效果(简易版)

先看效果:(这个只是原型,简陋了点) 功能: 双击图片或拖动右侧的滑块可实现图片的放大,鼠标按下不放可平移图片。 应用场景:目前各地铁、医院、大型商场、机场均有...

20360
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

19360
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

对于 Web 动画的性能问题,仅仅停留在感觉已经优化的OK之上,是不够的,想要在盒子端跑出高性能接近 60 FPS 的流畅动画,就必须要刨根问底,深挖每一处可以...

529130
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

17060
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(七)Bootstrap

随着Web应用变的越来越复杂,在大量的开发过程中我们发现有许多功能模块非常相似,比如轮播图、分页、选项卡、导航栏等,开发中往往会把这些具有通用性的功能模块进行一...

14330
来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

36390
来自专栏进击的君君的前端之路

初识React

13820

扫码关注云+社区

领取腾讯云代金券