登录注册页面优化

7月16日

优化pc端和移动端的登录注册页面

原代码结构及界面如下：

优化后（主要是参照网易云注册页面写的，讲真的，网易云登录注册页面简洁美观的不要不要的）：

优化思路：

1. 给form表单外层添加父级元素，更改背景颜色，使整个表单突出，更美观一点；
2. ul标签设置外边距
3. ol标签加width: 100%;
   border: solid #DDD 1px
4. 小图标去掉li标签，直接放入ol标签中，位置relative，置于左侧
5. input标签去掉边框，设置合理的padding

CSS3 box-sizing 属性

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

语法

box-sizing: content-box|border-box|inherit;

content-box :这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。(简而言之，)

border-box :为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度.

inherit : 规定应从父元素继承 box-sizing 属性的值。