web前端工程师是否是都讨厌写CSS，都是什么心态

最近有不少刚刚步入前端行业的人说，一提到要写css样式就头疼，还要兼容各类浏览器，更是不知所措了。。。

还据说后端程序员这样描述咱们的css，说比写后端程序麻烦多了。。。

这是由于你尚未掌握写css的诀窍，下面我就来说讲如何简单快速的写出能够兼容的css代码：

咱们很形象的把写css的过程比喻成给装修房子的过程。

首先，咱们要请设计师出一个设计图，而后请工人去按照设计图装修房子。

回到咱们的布局中，首先咱们会拿到一张UI设计师给咱们的视觉设计稿：

例如：

这是设计师给咱们的设计稿，首先咱们须要划分版块：

有了框架之后，咱们就好作多了，根据划分的板块，设置宽高，背景色

头部 <div class=”header”></div>

.header{width:1000px;height:100px; background:red;}

导航 <div class=”nav”></div>

.nav{width:1000px;height:60px; background:black;}

Banner部分 <div class=”banner”></div>

.banner{width:1000px;height:60px;background:orange;}

新闻部分

<div class=”news”>

<div class=”news_one”></div>

<div class=”news_two”></div>

<div class=”news_three”></div>

</div>

.news{

width:1000px;

height:260px;

background:blue;

}

.news_one{

width:500px;

height:260px;

float:left;

}

.news_two{

width:500px;

height:260px;

float:left;

}

.news_three{

width:500px;

height:260px;

float:left;

}

产品部分：

<div class=”product”></div>

.product{

width:1000px;

height:420px;

background:gray;

}

底部：

<div class=”footer”></div>

.footer{

width:1000px;

height:80px;

background:yellow;

}

经过划分板块，咱们就把一个复杂的页面简单化了，而后这样去写css就会发现没有那么复杂了，并且板块被划分好后，整个页面也显得很是清晰了

这个时候，咱们就能够在这牢固的框架中去填充具体的内容了。

或者咱们能够把写css样式的过程看作是给一个新娘化妆，总共分几步，先化眉毛，再化眼影，眼线，最后涂口红和腮红

当咱们把框架搭出来后，再去填充内容就很简单了，这就比如像超市里面的货物分类同样，当咱们分区后，再去寻找本身想要的东西，那就很是方便了。

好了，今天咱们就先聊到这里，但愿小编的方法能让你的css样式变得更加清晰有条理。