最近有很多刚刚步入前端行业的人说,一提到要写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样式变得更加清晰有条理。 |
|
来自: 好程序员IT > 《web前端培训教程》