zoukankan      html  css  js  c++  java
  • 静态页面复习--CSS定位练习1

    .block-1 {
    
        box-sizing: border-box;
        width: 64px;
        height: 64px;
        background:url('images/grass.png');
        background-size: contain;
        position: absolute;
        left:64px;
    }
    
    .block-2 {
        box-sizing: border-box;
        width: 128px;
        height: 64px;
        background:url('images/grass.png');
        background-size: contain;
    }
    
    .block-3 {
    
        box-sizing: border-box;
        width: 192px;
        height: 64px;
        background:url('images/grass.png');
        background-size: contain;
        position: relative;
        left:64px;
    }
    
    .flower {
        box-sizing: border-box;
        width: 64px;
        height: 64px;
        background:url('images/rose.png');
        background-size: contain;
        position: relative;
        left: 128px;
    }
    
    .yellow-flower {
        box-sizing: border-box;
        width: 64px;
        height: 64px;
        background:url('images/flower.png');
        background-size: contain;
        position: relative;
        left: 128px;
    
    }
    
    .point {
        width: 8px;
        height: 8px;
        background: rgb(255, 176, 0);
    }
    
    .bg {
        border: solid 8px rgb(210, 157, 65);
        background: rgb(36, 130, 255);
        width: 320px;
        height: 256px;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    
    body {
        margin: 0;
        background: url('images/brick.jpg');
        background-size: 150px 150px;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Learn css with blocks</title>
            <link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
        </head>
        <body>
    
            <div class="bg">
                <div class="yellow-flower">
                    <div class="point">
    
                    </div>
                </div>
    
    
                <div class="block-3"></div>
                <div class="block-1"></div>
                <div class="block-1" style="left:192px;"></div>
                <div class="flower">
                 <div class="point">
                 </div>
                </div>
    
                <div class="block-3"></div>
    
            </div>
    
    
    
        </body>
    </html>

  • 相关阅读:
    linux下一步一步安装禅道项目管理工具
    tfw格式图解
    yaourt: a pacman frontend(pacman前端,翻译)
    OpenGL官方教程——着色器语言概述
    [翻译]opengl扩展教程2
    [翻译]opengl扩展教程1
    Git-it字典翻译
    解决 QtCreator 3.5(4.0)无法输入中文的问题
    Valgrind 3.11.0编译安装
    ubuntu linux 下wine的使用
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6178490.html
Copyright © 2011-2022 走看看