静态页面复习--CSS练习

最新推荐文章于 2020-03-10 20:49:12 发布

weixin_30216561

最新推荐文章于 2020-03-10 20:49:12 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/xyxpython/p/6169799.html

版权

<!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 向左浮动

转载于:https://www.cnblogs.com/xyxpython/p/6169799.html

weixin_30216561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
静态页面复习--CSS练习

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one{ background-color: #9cb...
复制链接

扫一扫