静态页面复习--CSS练习

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .one{
        background-color: #9cbfcc;
        border-radius: 5px;
        padding-top: 56px;
        padding-left: 58px;
        width: 230px;
        height: 290px;
        box-sizing: border-box;
        color:#ffffff;
        margin-right: 15px;
        float: left;
      }
      .two{
        background-color: #6bb790;
        border-radius: 5px;
        padding-top: 56px;
        padding-left: 58px;
        width: 230px;
        height: 290px;
        box-sizing: border-box;
        color:#ffffff;
        margin-right: 15px;
        float: left;
      }
      .three{
        background-color: #f5b227;
        border-radius: 5px;
        padding-top: 56px;
        padding-left: 58px;
        width: 230px;
        height: 290px;
        box-sizing: border-box;
        color:#ffffff;
        margin-right: 15px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <img src="img/gmail.png" width="116px;" alt="" />
      <p>
        Efficient and useful.
      </p>
    </div>
    <div class="two">
      <img src="img/news.png" width="116px;" alt="" />
     <p>
       Find your favorite.
     </p>
    </div>
    <div class="three">
      <img src="img/map.png" width="116px;" alt="" />
      <p>
        Better than Baidu.
      </p>
    </div>
  </body>
</html>
新学到的样式：
box-sizing：border-box 自动计算，固定总长宽
float：left 向左浮动