前言
刚新手或是自学者,在刚开始进行还原页面时,往往不能够合理的布局,写出规范的代码,达不到可使用的程度。一般界面的还原度,友好的交互提示都欠缺,例如按钮没有可点击状态,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仓库 前端代码汇总,其中有介绍前端代码规范,还有其他丰富知识点供学习。