CSSを書くとき、私は、多くの場合、いくつかのトラブルの事に実行します。
1）それはかなりシンプルなレイアウトは、長い時間を書いて見えます
2）いつもここにものを作る、よりカジュアルなコードを書く、1には、合理的な存在行いません
3）マージン、パディング、フォントサイズおよびその他の属性は常に書き換え
効率は、残業を行うには、最終的には、スケジュールや時間に、アップしていない発生します。
彼らはより多くのプランニング、より整然とした進歩を行うことができますが、実際には、戻って考えてみてください。
まず、グローバルビュー
私たちはここで開発は、それが起動していない判断され、UIのデザインが与えられていない、プロセスによって行われます。
デザインはUIを与えられたが、行うには微調整のほとんど無害された後、そう、実際には、すべてのUIデザイン案与え、ラフな評価を行うことができます。
総会、スタイルの難易度、各アニメーション、レイアウトの詳細、心の中で明確なので、自信を持って、開発されたとき。
デザイン案の概要で見てみましょう：
すべてのページを読んだ後、あなたは抽象的なやって、スクラッチを開始することができます。
私はCSSを使用します、次の開発サスをモジュラー開発を行うために、より良いサスによって書かれました。
第二に、総会
1）ローディング効果
基本的に毎回のページには、関連するコードのすべてが一緒にパッケージ内のファイルに書き込まれているので、いくつかのような効果を作成し、それが有用であろう、そのような効果があるでしょう。
そしてデザインは、多くの場合、このような内容のローディング効果を考慮していない最終的に追加して、自分のしている、デザインは非常に彼はいくつかの作業を共有助けるためにあなたに歓迎されます。
私は、長い時間前に書いたシンプルなUIライブラリ、仕事で大きな役割を果たしました。
2）ポップアップボックス
独自のポップアップのパッケージが必要であるので、これは基本的に、すべての時間を言うために使用されています。
製品のデザインは、多くの場合、多くの場合、事前に用意単語「一般的な缶」を、置く、その後、あなたは私を助けるために持って、この効果を無視します。
この機能はCSSだけではなく、あなたには、JavaScriptのサポートが必要になります。
私は、コードの最も簡単な200行がポップアップボックス、オープンクローズドの原則に従い、独自の拡張をカプセル化します。
使用方法は、特に簡単です：
アラート（「3つのクーポンを選択してください」）;
3）ボタン
派手なボタンなどのUIが、原則Iのフォローには、CSS3、より少ない、あるいは全く絵で描かれた絵CSS3を使用することです。
这样按钮能更通用性，各种款式的都能继承基本款式，在基本款式上修改某些参数就能实现效果。
上面的按钮有的大、有的小、有的方、有的园、有的下面是阴影、有的无边框，可以用上面的代码来概括。
按钮特别的地方在做细调。
4）输入框
输入框，基本也是标配，同样的，UI也喜欢花式的输入框，我还是遵循能画出来的就自己画。
这次的输入框，还是比较朴素的，没有用夸张的表现手法展示。
5）字体大小与颜色
UI设计稿上都会有好多种字体，但如果要求不严格的话，其实可以事先设置些字体大小，直接套用。
h1~h6这6个标签，我预先定义好了字体大小，这样也能减少使用“p”或“span”标签，让网页标签更丰富。
颜色可以向下面这样预先定义一下，但可能很多时候都会把颜色写在特定样式中，那就做个变量，放在代码中，随时引用。
6）工具样式
工具样式就是预先写好对齐方法，margin的距离，padding的距离，display的展现方式等。
可以在分析了页面后，大致的写一些，不用写太多，够用即可。
三、页面特性
1）CSS3动画
为了让页面更生动，免不了加些动画，产品很多时候也是需要你边调试边做效果。
虽然不用事先准备动画代码，但可以事先了解一些动画效果，参考一些现有的开源动画库，例如“animate.css”。
将动画代码放在一块儿，不然东一个西一个的，乱糟糟，自己也会忘记有哪些动画效果，搞不好还会重复写，改的时候也得到处找。
2）可复用部分
这次在做页面的时候，低估了这些可复用部分，分析的太少，导致在写的时候很多部分没有抽象出来，代码写的很僵硬。
| 部分1 |
部分2 | 部分3 | 部分4 | |
| 边框修饰 |
有边框 有底脚与阴影，上下有小眼睛 还有两条弯曲的线 |
有边框 底部有阴影 |
有边框 有底脚与阴影 |
有边框 底部有阴影 |
| 背景色 |
红 | 红 | 红 | 红 |
| 标题图 宽高各不同 |
有 | 无 | 有 | 有 |
| 内部展示 |
两列一行 | 三列一行 | 一列一行 | 三列一行 |
| 单元内容排列 |
上下 | 上下 | 左右 | 上中下 |
| 单元内容 |
上部：背景图+图标+名字 下部：按钮 |
上部：背景图+图标+名字 下部：按钮 |
大背景图 左边：图标+名字+描述+有效期 右边：价格 |
上部：图标 中部：名字 下部：价格 |
| 选中效果 |
有（与部分2相同） | 有 | 无 | 无 |
大致就是上表中的情况，接下来就是细调，比较麻烦的是位置摆放，各种对齐，宽高设置，margin、padding距离计算、字体大小颜色等。
做这些非常耗时，好在最麻烦的对齐、位置摆放可以使用弹性布局，不但抛弃了浮动，宽还能自适应，同一行内的子元素的高能自动计算为相同。
在自己的UI库中也同样封装了弹性布局的，现在每个项目我都会引用进来。
源码下载：
https://github.com/pwstrick/chezhu
原文链接 https://www.cnblogs.com/strick/p/6218508.html