第一天,该教点什么呢,我是思索良久,觉得还是从基础干起,先仿个css页面熟悉下css的样式怎么写吧.于是我让他先照着淘宝的首页仿一个,等做完了这个再仿手淘的首页,这样pc移动都有了 也算是布局入门了.
果然,刚开始做就遇到了问题,淘宝的首页布局还是比较常规的但是因为内容多,所以新手第一眼看上去就不知道如何下手,我看了他的html结构,就知道问题所在,这是缺少对页面进行划分的思路,其实这个我们平时工作中也是依照工作经验,倒是没有仔细考虑过什么方法论,我想了想,就跟他说,网页这个东西目前主要是基于div进行布局的,每一块div代表一个内容体,而div是一个语义无关的标签,从字面上理解 div 就是划分的含义,使用div将页面进行划分,虽然html5引入了一些常见的语义标签用来划分,但是基于内容的划分依然是 div 为主,那怎么进行划分呢?
我们不妨思考下,div的表现方式,默认的div其实是一个width 100%的block块,block是什么意思,阻塞,障碍,所以无论你的html中的div横着放,竖着放,在页面的中所有的div都是垂直排列的,这也符合 阻塞 块 划分 这三个含义.从这点出发,我认为页面的划分应该是从左到右,从上到下的,why? 因为从上到下的划分 其实是不需要样式修改的,div默认就是这种排版,而从左到右是需要依靠浮动,或者flex布局等css样式来调整的,所以我们要先考虑变化的部分,再考虑不变的部分,按照这个思路,除去那些需要定位的元素,一个静态页面就可以被轻松的划分出来,这种方法是否靠谱,我立刻在我弟弟身上做了试验.
我跟他说你就按照 从左到右 ,从上到下的划分方式去建立div,于是他就开始了,但是我发现了另一个问题,新手总是一上就是代码,coding,其实这点很不好,代码这东西太具体,脑子里要是没有个结构,很难通过代码想象出页面,所以得先设计,于是我止住他,先别写,用本子把你的划分画出来,然后标出名字,这里要注意 命名要规范,不要搞些看不懂的命名,大部分的内容块命名,网上都有,百度,谷歌都可.
事实证明这种方式是可行的,他原本1天都搞不定的东西,通过这种划分,很快就建立了页面结构,并且实现了样式.
本日我总结的几点如下:
1.对于新手而言,不要急着写代码,先思考,最好是用图和文字来描述你的代码结构,不仅仅是html css js也是如此,后面的日子会讲到.
2.对于一个静态页面的划分,可以采用从左到右,从上到下的划分方式,然后再实现相关的样式即可
3.有人指导很重要啊!