博客列表 >盒模型的基本要素,四种元素对齐方案,定位-2018.8.16

盒模型的基本要素,四种元素对齐方案,定位-2018.8.16

圈圈小竹子的博客
圈圈小竹子的博客原创
2018年08月17日 15:58:50506浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风车</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            left: 100px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightpink;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            position: relative;
            left: 200px;
            top:-100px;
        }

        .box4 {
            width: 100px;
            height: 100px;
            background-color: lightyellow;
            position: relative;
            left: 100px;
            top: -100px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议