请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享怎样学好css

[复制链接]
叶子老师 发表于 2019-7-16 17:00:57 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题




好程序员web前端分享怎样学好css最近有很多刚刚步入前端行业的人说,一提到要写css样式就头疼,还要兼容各种浏览器,更是不知所措了。。。
还听说后端程序员这样描述我们的css,说比写后端程序麻烦多了。。。
这是因为你还没有掌握写css的诀窍,下面我就来讲讲如何简单快速的写出可以兼容的css代码:
我们很形象的把写css的过程比喻成给装修房子的过程。
首先,我们要请设计师出一个设计图,然后请工人去按照设计图装修房子。
回到我们的布局中,首先我们会拿到一张UI设计师给我们的视觉设计稿:
例如:
图片1.png
这是设计师给我们的设计稿,首先我们需要划分版块:
图片2.png
有了框架以后,我们就好做多了,根据划分的板块,设置宽高,背景色
头部  <div class=header></div>
.header{width:1000px;height:100px; background:red;}
图片3.png
导航   <div class=nav></div>
.nav{width:1000px;height:60px; background:black;}
图片4.png
Banner部分    <div class=banner></div>
.banner{width:1000px;height:60px;background:orange;}
图片5.png
新闻部分  
<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;
}
图片6.png
产品部分:
<div class=product></div>
.product{
        width:1000px;
        height:420px;
       background:gray;
}
图片7.png
底部:
<div class=footer></div>
.footer{
      width:1000px;
      height:80px;
     background:yellow;
}
图片8.png
通过划分板块,我们就把一个复杂的页面简单化了,然后这样去写css就会发现没有那么复杂了,而且板块被划分好后,整个页面也显得非常清晰了
这个时候,我们就可以在这牢固的框架中去填充具体的内容了。
或者我们可以把写css样式的过程看做是给一个新娘化妆,总共分几步,先化眉毛,再化眼影,眼线,最后涂口红和腮红
当我们把框架搭出来后,再去填充内容就很简单了,这就好比像超市里面的货物分类一样,当我们分区后,再去寻找自己想要的东西,那就非常方便了。
好了,今天我们就先聊到这里,希望小编的方法能让你的css样式变得更加清晰有条理。





好程序员官网:http://www.goodprogrammer.org

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启