htm&css 颜色的浮动

目标样式

 

 

 

 

目标分析：

　　由图可知，整个色板可以分为三块

　　可以理解为一个大的盒子包含了三个小的盒子，定义如下

　

 

 

     LEFT的定义方式

 

 

 

 

 

 

TOP的定义方式

 

 

 class为bottom的块最为复杂，但分析方法也是异曲同工，因此不要担心太难。

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/color.css">
</head>
<body>
    <div class="all">
        <div class="left">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="top">
            <div class="top_1"></div>
            <div class="top_2">
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom_1"></div>
            <div class="bottom_2">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="bottom_3">
                <div class="con1"></div>
                <div class="con2">
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>

    
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
color.html

 

*{
    margin: 0;
    padding: 0;
}
.all{
    width: 600px;
    height: 600px;
    border: 1px dotted red;
    position: relative;
    top: 50px;
    left: 300px;
}
.left{
    width: 150px;
    height: 600px;
    float: left;
}
.left div:nth-child(1){
    height: 200px;
    width: 150px;
    background: #cccccc;
}
.left div:nth-child(2){
    height: 300px;
    width: 150px;
    background: #d40000;
}
.left div:nth-child(3){
    height: 100px;
    background: #24e712;
}
/*toptoptoptop*/
.top{
    width: 450px;
    height: 150px;
    float: left;
}
.top_1{
    width: 300px;
    height: 150px;
    background: yellow;
    float: left;
}
.top_2{
    width: 150px;
    height: 150px;
    float: left;
}
.top_2 div:nth-child(1){
    width: 149px;
    height: 80px;
    background: #24e712;
    float: right;
}
.top_2 div:nth-child(2){
    width: 149px;
    height: 70px;
    background: #04fdb3;
    float: right;
}
.bottom{
    width: 450px;
    height: 450px;
    float: left;
}
.bottom_1{
    width: 100px;
    height: 450px;
    background: purple;
    float: left;
}
.bottom_2{
    height: 450px;
    width: 150px;
    float: left;
    background: red;
}

.bottom_2 div:nth-child(1){
    width: 150px;
    height: 200px;
    background: red;
}
.bottom_2 div:nth-child(2){
    width: 150px;
    height: 100px;
    background: rgb(0, 0, 0);
}
.bottom_2 div:nth-child(3){
    width: 150px;
    height: 150px;
    background: rgb(190, 255, 12);
}

.bottom_3{
    width: 200px;
    height: 450px;
    float: left;
}
.con1{
    width: 200px;
    height: 200px;
    background: #24e712;
}
.con2{
    width: 200px;
    height: 250px;
}
.con2 div:nth-child(1){
    width: 200px;
    height: 100px;
    background: #04fdb3;
}
.con2 div:nth-child(2){
    width: 200px;
    height: 150px;
    background: green;
    
}
color.css

 最终样式

 

 

 

 

 

 

 

 

 

posted @ 2019-11-28 21:03  明恕而行  阅读(287)  评论(0)  编辑  收藏  举报