浮动练习(1)

复制代码
要求呈现图案:

法一:不建议
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> </title>
        <style>
            div:nth-child(1){
                width: 100px;
                height: 100px;
                background-color: aqua ;
                float: left;
            }
            div:nth-child(2){
                width: 300px;
                height: 100px;
                background-color: purple ;
            
            }
            div:nth-child(3){
                width: 100px;
                height: 200px;
                background-color: gold ;
                float: left;
            }
            div:nth-child(4){
                width: 100px;
                height: 200px;
                background-color: red ;
                float: left;
            }
            div:nth-child(5){
                width: 300px;
                height: 100px;
                background-color: black ;
                
            }
            div:nth-child(6){
                width: 300px;
                height:100px;
                background-color: palegoldenrod ;
            
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        
    </body>
</html>

法二:建议用此方法
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            background-color: gray;
            
        }
        .container .top{
            width: 300px;
            height: 100px;
            background-color: blue;
            
        }
        .container .bottom{
            width: 300px;
            height: 200px;
            background-color: purple;
            
            }
        .container .top .left{
            width: 100px;
            height: 100px;
            background-color: red;
            
        }
        .container .bottom .left{
            width: 100px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
        .container .bottom .center{
            width: 100px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .container .bottom .right{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .container .bottom .right .top{
            width: 100px;
            height: 100px;
            background-color: gold;    
        }
        .container .bottom .right .bottom{
            width: 100px;
            height: 100px;
            background-color: greenyellow;

        }
            
        </style>
</head>
<body>
        <div class="container">
            <div class="top">
                <div class="left"></div>
            </div>
            <div class="bottom">
               <div class="left"></div>
               <div class="center"></div>
               <div class="right">
                 <div class="top"></div>
                   <div class="bottom"></div>
               </div>
            </div>            
        </div>
</body>
</html>
相关推荐
如若12316 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript