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>

查看全文

相关阅读:
Servlet(2)：通过servletContext对象实现数据共享
 Servlet(1)：Servlet介绍
 MyBatis(4)：使用limit实现分页
 MyBatis(3)：优化MyBatis配置文件
 MyBatis(2)：CRUD操作
 SpringMVC(4)：文件上传与下载
 SpringMVC(3)：AJAX
什么是开发环境、测试环境、生产环境、UAT环境、仿真环境
 SQL SERVER添加表注释、字段注释
 SQL中行转列(PIVOT)与列转行(UNPIVOT)

原文地址：https://www.cnblogs.com/xyxpython/p/6178490.html