十年全栈码农的武功修为(二)

续上。。。

08年大三第一学期,迎来了人生的第一份工作。北京这个城市的生活节奏比起长沙,差别很大,早八晚五还有N个小时是在赶公交,下了公交后再赶着去打卡。于是整个城市都弥漫着高跟鞋的打击乐,而我们整个人的大部分时间都是花在了工作和赶往工作场地的路上了。

比这还糟糕的是,很多公司还不一定有窗户,晚上住的大部分是地下室。谁家里今天吃啥菜,都能一清二楚因为地下室的空气是很难往外排出,这就是实习期对我留下的最深印象。

就是在这样的环境中我的div+css得到了进阶,虽然之前有所了解,但此时前端的知识大部分还是基于表格去布局的。当我的主管丢个压缩包并且强调一定不能用table布局的时候,我整个人顿感兴奋。

就要做一件没做过且需突破自我的一件事情的时候怎么能不兴奋呢?只要想飞,我们就能飞!是我的人生格言,接下来就是不停的搜教程找资料,也就是在这种不停的搜和找的过程中我慢慢总结了最适合自己的学习方法。

方法比努力更重要,这是我最想对初学者说的一句话,每个人都有自己最适合的学习方法,照搬别人的未必有用,而且学习程序开发一定要以结果为导向。

我要的结果很简单,就是将图片上的页面毫无误差的用div和css呈现出来,而在这之前我们要有一个概念,那就是初中数学学的坐标轴。而且是三维坐标轴,即x轴y轴z轴。div即容器(也可以理解为盒子),能用于构建页面里面的任何元素。就像你的身体,脑袋、四肢、手指、脚趾我们都可以用div来构建,但是由于div是有角的四边形,那么现在你可以在脑袋里面想想下读幼儿园的你正用四边形在草纸上绘制了一个木偶小人。

这样的小人不仅难看,还没有感情。为了让这个小人更有血有肉,我们加入了css样式,样式顾名思义就是把四边形换一种样子呈现出来。css可以让之前的正方形脑袋变圆或者椭圆或者三角形(哈哈有这样的人吗)都可以,也可以让之前的手指变得有柔韧性。

在构建页面之前要充分的分析出这个页面可以分为几个盒子,每个盒子之间是什么关系,是并列还是包含,又或者是沿着X轴横向排列还是沿着Y轴纵向排列甚至还是沿着Z轴进行层叠。如果你在编辑器里面把所有的div都敲完之后在浏览器里调试会发现整个页面一片空白。

是谁偷走了我的div,明明查看源码里面是有div标签的,语法也检查了没有出错,我的div哪去了呢?div一直都在而且在哪里骂你为什么生了我而又不给我穿衣服(此时想到亚当和夏娃,哈哈)。男人需要穿男人的衣服,女人需要穿女人的衣服。div也一样,我们要根据div不同的职能给他设置不同的样式,样式决定div是横排、纵排还是层叠以及它衣服的大小和颜色等等。

此时我们给div赋予1px的边框和20px的高,再次浏览器调试。很多个长方形至上而下的排列在你眼前。。。。饿了,今天就写到这。

猜你喜欢

转载自blog.csdn.net/kmldic/article/details/84671333