你的位置:首页 > 网页设计

[网页设计]Day_11.给新人follow代码想到的


这两天让新人(刚毕业,此前未接触前端)切了个页面,发现了很多问题,联想到自己初入前端的时候因为没人带不可避免的也走了很多弯路,所以借着跟他讲解的机会,在这里把新人切页面中常见的问题和不好的习惯列举一下。
首先上psd:
enter description here
他给我的结果是这样的:
enter description here
enter description here

首先来分析一下页面上最直观的问题:

  1. 导航栏分割效果没有加:对于前端工程师这个岗位,仔细!仔细!仔细!重要的事情说三遍。

  2. banner图按钮切的是个什么鬼。

  3. 右方背景图缺失,一看就是把整个背景切成了一张大图,在小屏幕电脑上满满的认为自己做的perfect,一到了大屏幕上傻眼了。这么做有两个缺点:一是适应效果差,如图中,而是资源过大,网速慢的时候你看到的是一张白屏背景。

  4. 右侧列表用了ul和li的组合,很多新人不知道dl>dt>dd的组合,比ul>li的组合放在这里更合适。

  5. 字体未设置

  6. a标签默认的样式没有去掉

  7. footer中的文字垂直未居中

下面再来看一下代码:

enter description here

  1. 乱用id名称,把导航写成了banner,把banner写成了header,很多新人会觉得不以为然,只要我写的样式和标签一一对应不就行了吗?这么写,首先别人看上去就会觉得你很low,还有就是,搜索引擎的seo根本不认识你写的代码。

  2. 不懂得使用class定义公共样式,小红点竟然每个标题都加了一次。
    enter description here
    enter description here
    再来看CSS文件:

  3. 测试加的背景不删掉

  4. 乱用position,根本不了解relative和absolute 的关系,也不知道应该什么时候用position,很多新人都喜欢用绝对定位,是因为只要我写了absolute,只要调整top和left值,总会变成我想要的效果,至于为什么设置的top值和left值这么大,不知道,无所谓。

  5. 公共样式不提取,什么时候用到什么时候再写一遍

  6. 新人还有一个很常见的问题就是喜欢设高度,不管什么反正设个宽和高,这样确实避免了很多问题,但是首先这样做从根本上是不对的,你的网页没有任何可扩展性,其次,很多问题因为你设置了高度而没有机会去发现。

  7. 新人很常见的一个问题是只认识px这个单位,em是什么?不知道。text-indent=2em远比=12px来的正确。

总的来说只要出现的就是上述问题:作为过来人想告诉初入前端的人的就是

  1. 切图请精确到像素级,不要凭感觉,感觉和psd稿差不多,这样有很多问题你根本发现不了。

  2. 勤思考。思考解决问题的代码我为什么要这么写,原理是什么,而不是只要解决的问题我就把代码往上堆。这样就不会出现设置了inline-block又去设置float:left这样可笑的事情。“不求甚解”,注定要吃亏。

  3. 勤请教。没有代码检查的公司,你写出的代码没人帮你follow的话,你根本不知道自己的代码写的有多烂。