这些天，做了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基础，前端之路还有很长，需要我一步一步的走下去。

加油吧～成为一位真正的前端设计师而努力！