\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.nav{width:1000px。"\u003Cdiv\u003E\u003Cp\u003E好程序员web前端分享怎样学好css，最近有很多刚刚步入前端行业的人说，一提到要写css样式就头疼，还要兼容各种浏览器，更是不知所措了。。。\u003C\u002Fp\u003E\u003Cp\u003E还听说后端程序员这样描述我们的css，说比写后端程序麻烦多了。。。\u003C\u002Fp\u003E\u003Cp\u003E这是因为你还没有掌握写css的诀窍，下面我就来讲讲如何简单快速的写出可以兼容的css代码：\u003C\u002Fp\u003E\u003Cp\u003E我们很形象的把写css的过程比喻成给装修房子的过程。\u003C\u002Fp\u003E\u003Cp\u003E首先，我们要请设计师出一个设计图，然后请工人去按照设计图装修房子。\u003C\u002Fp\u003E\u003Cp\u003E回到我们的布局中，首先我们会拿到一张UI设计师给我们的视觉设计稿：\u003C\u002Fp\u003E\u003Cp\u003E例如：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F6f8cbe92ba2947cfaaa9ad3663a8c9fb\" img_width=\"743\" img_height=\"1115\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这是设计师给我们的设计稿，首先我们需要划分版块：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F197c5b3f1c584f80ad8fbf0f0d71475a\" img_width=\"767\" img_height=\"1150\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E有了框架以后，我们就好做多了，根据划分的板块，设置宽高，背景色\u003C\u002Fp\u003E\u003Cp\u003E头部 <div class=”header”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.header{width:1000px;height:100px; background:red;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F63e5ba6843214b1e9e2e92aae37467e4\" img_width=\"668\" img_height=\"68\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E导航 <div class=”nav”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.nav{width:1000px;height:60px; background:black;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F6d6ec43a83d94836b724b21afbf6d647\" img_width=\"673\" img_height=\"36\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EBanner部分 <div class=”banner”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.banner{width:1000px;height:60px;background:orange;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F99e76f6973ae463c906ec5d2f7f3caa1\" img_width=\"671\" img_height=\"314\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E新闻部分 \u003C\u002Fp\u003E\u003Cp\u003E<div class=”news”>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_one”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_two”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_three”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E<\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:blue;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_one{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_two{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_three{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fff662de24fd349cd9d6d41744d641ce3\" img_width=\"673\" img_height=\"166\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E产品部分：\u003C\u002Fp\u003E\u003Cp\u003E<div class=”product”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.product{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:420px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:gray;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F726e9874753b4f01a27632e48fbabe85\" img_width=\"672\" img_height=\"168\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E底部：\u003C\u002Fp\u003E\u003Cp\u003E<div class=”footer”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.footer{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:80px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:yellow;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F68d9e2851cf14a08bd1ef8c63168ac22\" img_width=\"669\" img_height=\"59\" alt=\"好程序员web前端分享怎样学好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E通过划分板块，我们就把一个复杂的页面简单化了，然后这样去写css就会发现没有那么复杂了，而且板块被划分好后，整个页面也显得非常清晰了\u003C\u002Fp\u003E\u003Cp\u003E这个时候，我们就可以在这牢固的框架中去填充具体的内容了。\u003C\u002Fp\u003E\u003Cp\u003E或者我们可以把写css样式的过程看做是给一个新娘化妆，总共分几步，先化眉毛，再化眼影，眼线，最后涂口红和腮红\u003C\u002Fp\u003E\u003Cp\u003E当我们把框架搭出来后，再去填充内容就很简单了，这就好比像超市里面的货物分类一样，当我们分区后，再去寻找自己想要的东西，那就非常方便了。\u003C\u002Fp\u003E\u003Cp\u003E好了，今天我们就先聊到这里，希望小编的方法能让你的css样式变得更加清晰有条理。\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6), groupId: '6714187189892153870