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样式变得更加清晰有条理。