欢迎访问的小伙伴! 希望在这里能帮到你。有问题请多多指教~ 点击联系站长

懒得写代码的你,遇见好看的CSS布局怎么拿下它?

HTML 焦康阳 0评论

最近不知道怎么了,反正就是很懒,不想起床不想动,哈哈。在浏览老崔的个人博客的时候,突然发现他的个人介绍页面很简洁漂亮,那就赶紧搞过来把。

确实很喜欢他的布局,分析了他的代码,纯css写的,没有使用js。算然我的前端是自学的技术不咋样,但是代码还是看的懂得。可以又不想自己写,看见代码就头疼,那就果断用F12搞过来。下面教程写给自学得新手朋友哦,老鸟直接忽视

如何学习并吸收

说实话,想模仿复制别人得代码也不是我们想象中得那么简单,你以为ctrl+c就完了啊,想多了。最起码看得懂前端代码呀。其次就是分析代码得布局,先基本吃透布局中得元素等东西,才能开始我们得计划,不然复制过来你也不会改。

我们都知道html页面中最常用得布局基本都是div标签来操作得,然后分为一个块一个块来做得。里面也用了浮动、块、内联块等属性。我也是小白一个,就不班门弄斧了。反正就是多看代码,分析代码,自然而然就又经验了。今天就以纯CSS来说怎么把别人得代码看懂并搞过来。

案例一

先来上个效果图把,就是我得个人介绍页面得进度条。也是非常简单,但是如果不会写,或者懒得写得朋友们怎么做出这个呢?

效果图

没错,就是这个效果,大体一看,它得每一行都是由四个部分组成,分别是左边得文字、底部灰色背景、颜色条、数字。但是右边得三个部分为一个整体得。这块也就不详细解说他得布局,大伙自己下去看代码。

要想看到别人得代码,就需要用到浏览器得F12检查工具了,大家都会用。首先看他得布局

代码详图

F12检查前端代码。我们可以看到布局,并且能看到CSS样式是怎么写得,首先先观察它的class属性,这个是它在CSS中得名字,点击这条代码可以看到相同得class里面得名字在右边有对应得样式代码。我们只需复制它到我们的style属性中就行。然后因为它是div标签,所以我们还要定义它为块或者内联块。这快不懂得百度啊。然后从div标签一直往里点击,复制每个标签和它得样式就行。不多说了,大家看我得代码

<div style="max-width: 700px;margin: auto;display: block;">
<div style="width: 100%;clear: both; margin-right: auto; margin-left: auto;height: 35px;display: block;margin:10px 0px;">
   <div style="width: 130px; float: left;display: block;text-align: center;">PYTHON</div>
   <div id="kuan" style="float: left;display: block;height: 25px;background: #f2f2f2; border-left: 1px solid transparent;border-right: 1px solid transparent; width: 70%;">
            <span style="background: #49C085;width: 70%;position: relative;float:
             left;margin: 0 -1px;min-width: 30px;height: 25px; line-height: 21px;text-align:
             right;border: none;border-color #bfbfbf #b3b3b3 #9e9e9e;-webkit-box-
            shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);box-
           shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);">
                      <span style="padding: 0 8px;font-size: 14px;color: #404040;color: rgba(0, 0, 0,
          0.7);font-family: " microsoft="" yahie";line-height:="" 25px;"="">70%</span>
  </span>
   </div>
</div>

<div style="width: 100%;clear: both; margin-right: auto; margin-left: auto;height: 35px;display: block;margin:10px 0px;">
   <div style="width: 130px; float: left;display: block;text-align: center;">WordPress</div>
   <div style="float: left;display: block;height: 25px;background: #f2f2f2; border-left: 1px solid transparent;border-right: 1px solid transparent; width: 70%;">
            <span style="background: #FFB6C1;width: 50%;position: relative;float:
             left;margin: 0 -1px;min-width: 30px;height: 25px; line-height: 21px;text-align:
             right;border: none;border-color #bfbfbf #b3b3b3 #9e9e9e;-webkit-box-
            shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);box-
           shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);">
                      <span style="padding: 0 8px;font-size: 14px;color: #404040;color: rgba(0, 0, 0,
          0.7);font-family: " microsoft="" yahie";line-height:="" 25px;"="">50%</span>
  </span>
   </div>
</div>

<div style="width: 100%;clear: both; margin-right: auto; margin-left: auto;height: 35px;display: block;margin:10px 0px;">
   <div style="width: 130px; float: left;display: block;text-align: center;">爬虫</div>
   <div style="float: left;display: block;height: 25px;background: #f2f2f2; border-left: 1px solid transparent;border-right: 1px solid transparent; width: 70%;">
            <span style="background: #EEE8AA;width: 30%;position: relative;float:
             left;margin: 0 -1px;min-width: 30px;height: 25px; line-height: 21px;text-align:
             right;border: none;border-color #bfbfbf #b3b3b3 #9e9e9e;-webkit-box-
            shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);box-
           shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);">
                      <span style="padding: 0 8px;font-size: 14px;color: #404040;color: rgba(0, 0, 0,
          0.7);font-family: " microsoft="" yahie";line-height:="" 25px;"="">30%</span>
  </span>
   </div>
</div>

<div style="width: 100%;clear: both; margin-right: auto; margin-left: auto;height: 35px;display: block;margin:10px 0px;">
   <div style="width: 130px; float: left;display: block;text-align: center;">LINUX</div>
   <div style="float: left;display: block;height: 25px;background: #f2f2f2; border-left: 1px solid transparent;border-right: 1px solid transparent; width: 70%;">
            <span style="background: #87CEFA;width: 63%;position: relative;float:
             left;margin: 0 -1px;min-width: 30px;height: 25px; line-height: 21px;text-align:
             right;border: none;border-color #bfbfbf #b3b3b3 #9e9e9e;-webkit-box-
            shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);box-
           shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);">
                      <span style="padding: 0 8px;font-size: 14px;color: #404040;color: rgba(0, 0, 0,
          0.7);font-family: " microsoft="" yahie";line-height:="" 25px;"="">63%</span>
  </span>
   </div>
</div>

</div>

因为我懒得把CSS加到主题样式表里面去,所以直接用style来写了。

案例二

第二个则是我下面得那个更多信息栏目,它也是将四个块全速并排展示,查看CSS样式得方法和上面得一样,就是布局不用。不动得,多用F12就差不多了。特别提醒,这块用到了fontawesome字体得,你必须加载它得字库才可以直接用fa样式哦

效果如上,下面附上代码。这个是我得代码,如果你要使用,记得修改我得链接哦

<div style="display: block;max-width: 700px;margin: auto;text-indent: 0px;margin-bottom: 120px;">

<div style="display: block;width: 25%; float: left; position: relative;margin-bottom: 20px;min-height: 1px;text-align: center;">
     <a style="display: inline-block;width: 70px;height: 70px;color: #fff;border-radius: 100%;margin: 6px;text-align: center;text-indent: 0px;background: #f78585;" title="新浪微博" href="https://weibo.com/u/6939861088">
           <i class="fa fa-weibo" style="line-height: 70px;font-size: 35px; width: 70px;">
           </i>
    </a>
</div>

<div style="display: block;width: 25%; float: left; position: relative;margin-bottom: 20px;min-height: 1px;text-align: center;">
     <a style="display: inline-block;width: 70px;height: 70px;color: #fff;border-radius: 100%;margin: 6px;text-align: center;text-indent: 0px;background: #66CCFF;" title="腾讯QQ" href="http://wpa.qq.com/msgrd?v=3&amp;uin=794651614&amp;site=qq&amp;menu=yes">
           <i class="fa fa-qq" style="line-height: 70px;font-size: 35px; width: 70px;">
           </i>
    </a>
</div>

<div style="display: block;width: 25%; float: left; position: relative;margin-bottom: 20px;min-height: 1px;text-align: center;">
     <a style="display: inline-block;width: 70px;height: 70px;color: #fff;border-radius: 100%;margin: 6px;text-align: center;text-indent: 0px;background: #49C085;" title="794651614@qq.com" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=a1xSX11eWl1aXysaGkUIBAY">
           <i class="fa fa-envelope" style="line-height: 70px;font-size: 35px; width: 70px;">
           </i>
    </a>
</div>

<div style="display: block;width: 25%; float: left; position: relative;margin-bottom: 20px;min-height: 1px;text-align: center;">
     <a style="display: inline-block;width: 70px;height: 70px;color: #fff;border-radius: 100%;margin: 6px;text-align: center;text-indent: 0px;background: #9966FF;" title="GitHub" href="https://github.com/zhanjiuyou">
           <i class="fa fa-github" style="line-height: 70px;font-size: 35px; width: 70px;">
           </i>
    </a>
</div>

</div>

由于我是直接将CSS写到sytle属性里面得,所以看起来很乱,没那么工整。如果想要漂亮一点得,可以用class替换哦。如果你想修改为自己所用,不知道怎么修改得可以给我留言哦。

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址