静态页面复习--CSS定位练习2

时间：2016-12-14 14:25:57 阅读：205 评论：0 收藏：0 [点我收藏+]

标签：set tle otto position osi image text contain black

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .bg{
        height: 384px;
        background: url(‘images/brick.jpg‘);
        background-size: 50px 50px;
      }
      .fireplace{
        height: 384px;
        width: 256px;
        position: relative;
        left:50%;
        transform: translate(-50%,0);
        background-color: black;
      }
      .topplace{
        height: 192px;
        width:256px;
        background: url(‘images/inner_cobble_stone.png‘);
        background-size:50px 50px;
      }
      .bottomplace{
        height: 192px;
        width: 256px;
        background: url(‘images/stonebrick.png‘);
        background-size: 50px 50px;
      }
      .innerplace{
        height: 128px;
        width: 128px;
        background: url(‘images/inner_cobble_stone.png‘);
        background-size: 40px 40px;
        position: relative;
        top:64px;
        left:64px;
      }
      .ironbars{
        height: 64px;
        width: 128px;
        background: url(‘images/iron_bars.png‘);
        background-size: contain;
        position: relative;
        transform: translate(-50%,-100%);
        top:100%;
        left:50%;
      }
      .fire{
        height: 128px;
        width: 128px;
        background: url(‘images/har.gif‘);
        background-size: cover;
        position: absolute;
        transform: translate(-50%,-100%);
        top:100%;
        left:50%;
      }
    </style>
  </head>
  <body>
    <div class="bg">
      <div class="fireplace">
        <div class="topplace">
        </div>
        <div class="bottomplace">
          <div class="innerplace">

            <div class="fire">
              <div class="ironbars">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

技术分享

静态页面复习--CSS定位练习2

标签：set tle otto position osi image text contain black

原文地址：http://www.cnblogs.com/xyxpython/p/6178839.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行