当前位置:Gxlcms > html代码 > Day_11.给新人follow代码想到的_html/css_WEB-ITnose

Day_11.给新人follow代码想到的_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:2人阅读

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

他交上来的作业是这样的:

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

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

  2. banner图按钮跟图片切到了一起。

  3. 右方背景图缺失,一看就是把整个背景切成了一张大图,在小屏幕电脑上看不出来,一到了大屏幕上就出问题了。这么做有两个缺点:一是无法适应比背景图大的屏幕,如上图;二是资源过大,网速慢的时候你看到的是一张白屏背景。

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

  5. 字体未设置

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

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

下面再来看一下代码:

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

  2. 不懂得使用class定义公共样式,小红点的图片每个标题都加了一次。


    再来看CSS文件:

  3. 测试加的背景不删掉

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

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

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

  7. 只用px这个单位,有时候em的效果更好,比如字体缩进。

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

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

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

  3. 勤请教。没有代码检查的公司,你写出的代码没人帮你follow的话,你会给自己挖很多坑。

人气教程排行