长话短说哈,今天晚上我跟同学们去喝酒了,所以文章会短一些。
网页怎么做才不会外行?这句话的意思就是说,你做的网页在浏览器里打开,像我这样的人扫一眼,就能判断出这是一个新手的练手作品?还是一个工作能力可靠的人做的。
那我是怎么判断的呢?当然会有许多标准,其中之一,就是网页各个模块之间的间距。你去看京东也好,淘宝也罢,你仔细观察它们的各个模块之间的间距,在同一个页面上的间距,一定是相等的。
而许多前端新人,他们经常不会注意到这个细节。他们的网页的间距是不相等的,这就包括行间距,字间距,模块间距,其实整个网页怎么样做到横平竖直?就是各种间距都是相等的,这样整个网页看起来就有一种规划的美感。
<!-- -->
那怎么做到这一点?
至少有二种办法。
一、你在做页面的时候,就把各种间距都写好定好。但这样会比较累,而且不利于维护。意思就是说,如果某天设计UI有变化,那么你需要一个一个的去调整。
二、就是把间距在css中定义为一个单独的样式,在需要间距的地方去加载。因为class可以加载多个css定义。
我个人主观认为,第二种方法会更好些。因为css也是需要模块化的。
<!-- -->
把页面的间距定好,至少会有二方面的好处。
一、会让你的页面看起来不外行,这在本文的标题中已经写了。
二、你可以把你的css定义,设计为一个css模块的二叉、多叉树的结构。
这在面试的时候毫无疑问的会成为你的加分项,毕竟架构设计的思路和实施在前端实践中的地位越来越重要。而一个懂、理解前端架构的前端开发,他的能力、潜力、前景会更大些。
所以同学们,相信我,不要对css的结构设计漫不经心。