这些天，做了app中一个分类，八九个页面，还算比较简单，有些页面我重写了好几遍，为的就是能更好的，用更短的代码，去实现前端视觉效果。
全局通用css样式
这些样式，一般做页面时候，首先要考虑进来的。
1 2 3 4 | html { width: 100%; height:auto;;}
body { width: 100%; margin: 0 auto; height:auto; background-color: #F9F9F9;}
ul, ol, li { list-style: none;}
a { text-decoration: none; color: #000; }
|
手机端，宽度一定要自适应，不然，由于国内手机的屏幕大小不一，显示的效果也都不一样，如果不是自适应的话，那么做出来的效果，可就 真的惨不忍睹了。
固定到顶部，底部。
不管用户怎么滑屏，顶部的状态栏，永远都显示在顶部。这句代码是什么呢？
1 2 | . nav { position:fixed; top:0px; }
.footer { position:fixed; bottom:0px; }
|
就是这样简单，你可以尝试一下。
ul li 标签的应用。
如何把li横排，只需一个代码就实现，如下：
我也是第一次发现这个语法，特地分享过来，供大家使用。
1 2 | .msg ul{ display: -webkit-box; }
.msg li{ font-size: 2.2em; line-height: 88px; }
|
渐变语法
之前，我几乎用图片来实现类似的效果，这一次，我不想再次用这样的笨办法了，能不能用css直接实现渐变效果呢？
这样，可以节省一些空间呢。
1 | background-image: linear-gradient(90deg, #f77865 0%, #f56158 100%);
|
百试百灵。
百分比不能滥用
在重写页面的时候，期间我用了好多百分比，结果到底后来的页面那么个不兼容，甚至导致一些语法效果失灵，于是，只好重头再来，老老实实的用具体数字，来定位。
这是一个很庞大的工作量，需要一定的耐心才能完成。
我也终于明白，一个浮躁的人，是不可能成为程序员的，否则，写出来的代码，到处都是bug。
好了，暂时分享到这里吧，之后还有一些更专业的文章，会分享于此。
谢谢。
这算是我第一次独立的完成一个简单的项目，学到了很多知识，巩固了自己的css基础，前端之路还有很长，需要我一步一步的走下去。
加油吧～成为一位真正的前端设计师而努力！