文章目录
前言
刚新手或是自学者，在刚开始进行还原页面时，往往不能够合理的布局，写出规范的代码，达不到可使用的程度。一般界面的还原度，友好的交互提示都欠缺，例如按钮没有可点击状态，input框的输入范围，页面没有版心宽度控制，一缩小就在页面左边。在还原页面的时候，有哪些我们需要注意的？
一、标签使用的问题
- 没有刻意使用语义化标签，实际上还是有很多语义化的标签可以使用，但是最后还是选择了
div- 标签的嵌套不合规，使用行内元素或行内块级元素嵌套块级元素，例如
p > div，span > div- 类名不规范，没有命名风格，例如
newItem，list1
正确的使用方法：
- 在页面中只是用一次main标签，header，footer，section其它有的就使用起来，不要忽视它
- 使用块级元素嵌套行内元素和行内块级元素
div > p，div > span- 规范的命名例如
new-item，list，list-item，new_item，list_item
二、css使用的问题
- 没有抽离公共样式，每个元素都去设置例如，
float:left，font-size:14px- 按钮使用
div，但是又没有鼠标光标小手样式，点击前后都是一样颜色，有没有点击也不知道
正确的使用方法：
- 抽离公共样式，例如
.fl，.font-14，减少代码冗余，提高复用率- 按钮使用
button，自定义样式.btn方便多处使用
三、页面布局不合理
- 布局没有版心宽度，版心宽度是页面的主体的宽度，一般是1200px，有版心宽度的地方与banner不同，banner宽度应该是100%；版心宽度不包括左右的相对定位超出的部分，它是页面中大多数居中宽度统一的范围。页面的主体应该是居中，想象一下用户在浏览页面时因为屏幕太大，页面恰好展示在屏幕左边，那是多么难受。
- 布局中使用过多的
margin-left控制布局，一些左右布局的，更适用浮动布局(左浮动和有浮动)，这样中间的空白部分就不用管了- 太依赖弹性盒子，垂直居中时使用flex布局，简单的问题用很重的代码，文体和图标对不齐
- 搜索框输入范围不对，搜索按钮都能盖到问题
正确的使用方法：
- 使用
.container，控制页面版心宽度，这个效果可以参考bootstrap的.container- 布局时灵活应用多种布局，不要使用margin去控制布局
- 掌握多种垂直居中和水平居中的方法，灵活应用，能用简单的方式解决就不要使用flex布局
- 页面写完之后自己多检查，在不同宽度浏览器上查看，自己多使用，查看一下基础的点击效果
总结
在还原页面时，首先要保证的是页面的还原度，然后考虑的是页面的使用效果，自己在交差之前，必先要自己第一个检查，体验，使用。常见的布局在bootstrap官网中都有，在自己完成后也可以与别人写的对比一下，可以知晓差距，学习更好的写法。在这里推荐一个git仓库 前端代码汇总，其中有介绍前端代码规范，还有其他丰富知识点供学习。