如果你是开发时间长的我想我就不用多说了，但如果是开发时间短的我还是建议看一看的，因为这些都是常见的错误。

一、段落间距

　　这是我们在写页面时常见的错误，也是我们和UI设计师或项目经理矛盾较多的问题之一，因为设计稿中文字量的都是字与字上下的间距，但当你

　　写p标签或div标签检查一下元素的时候，会发现p标签和div标签会有留白，大概上下都有2px左右的留白。这样的话在加上你的上边距或下边距你

　　在量的时候就多了点。当然如果你们项目经理不是那么较真的话，是什么是都没有的，但如果要求的是像素化还原大概就不行了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        p{margin:20px auto;}
        div{margin:20px auto;}
    </style>
</head>
<body>
    <p>p标签</p>
    <p>p标签</p>
    <div>div标签</div>
</body>
</html>

看，这串代码的意思是不是p标签和div标签的段落间距是20px;但是如果你有【FQ工具】或其他可以在页面中测试距离的插件就可以清楚的看清这的差距了。

这个的解决方法就是你要将设置上高后设置上行高，在设置上overflow: hidden;的超出部分隐藏就行了；不过这样子很麻烦所以，如不必要不用这样写

二、错误的嵌套

<div id="header">
    <div id="nav">
        <div id="subnav">
            <div></div>
        </div>
    </div>
</div>

这种嵌套当里面在写有内容时或一屏看不完时，一时嵌套错误可就有你烦的了。最好的解决吗？我感觉还是注释，一个良好的注释习惯，让你可以更快找到自己的问题还有利于团队的开发。

<!--header-->
<div id="header">
    <!--nav-->
    <div id="nav">
        <!--subnav-->
        <div id="subnav">
            <!--content-->
            <div class="content"></div>
            <!--content-->
        </div>
        <!--subnav-->
    </div>
    <!--nav-->
</div>
<!--header-->

这样时你还会找错吗？当你修改时是不是更方便了。你的同事也能看懂了。

ps:我们在刚开始写页面的时候不怎么写注释，因为我们刚开始写的都很少，并且都知道是什么意思，但当我们写了二三百行代码时还能马上找到自己写的东西吗，而且以后工作

就不止我们自己蒙头写了，而是大家一块合作，如果你不写注释的话，别人没有时间来猜你写的是什么。而你也没时间在跟前告诉他。

三、省略img的alt 属性

　　当用户在网速不佳或图片无法显示的时候，它的作用就来了。它可以带有图片的基本描述，让用户在没看到的前提下，也明白这是什么，来提高用户体验

四、大量使用转义标签如：&nbsp； ⁢ >..........

　　不要过多的使用这些转义标签，因为在每一个浏览器中&nbsp和其他一些转义字符的默认宽度是不等的，所以当你使用大量 &nbsp；时换个浏览器他就变了。所以说不要过多的使用这些容易发生改变的转义字符。转义字符中有用的大概只有&copy；这个版权商标了。

　　ps:这是个人见解，不一定对，毕竟一切皆有可能。

五、只喜欢用一种浏览器来测试自己所做的页面，但其实由于浏览器内核的不同，所以在各个浏览器中的效果其实是不怎么一样的，兴许在谷歌的浏览器中可以运行，但是一到火狐中页面就崩溃了呢；

ps：这就应该说到IE了，IE的兼容性问题是非常蛋疼的，高版本的还好点，但低版本的就是一大堆的兼容问题了。但是有数据表示支持用 IE 低版本用户还是有不算少的用户群的，所以我们有时在项目经理的要求下不得不写（哭）；

六、错误的提示方式。

　　当你需要用户的基本信息的时候一定要注意表达明确，如玩游戏是需要实名注册时一定要表明是游戏中的名字还是现实中的名字，防止写错。

　　ps：其实这不应该是前端的问题，而是UI设计时意思表达不明确的问题，但当你发现时一定要问清楚，防止出错

七、页面中包含太多刷新的步骤。

　　没有人喜欢老是自己刷新页面，这样只会让用户体验不好，所以必要时我们要通过ajax局部刷新，来减少页面的重复加载。增强用户的体验。

posted on 2017-06-27 19:21 IT-忐忑阅读(229) 评论(0) 编辑收藏举报

刷新页面返回顶部

公告