第三次课后练习

a1833919188

已于 2023-12-22 11:15:38 修改

阅读量343

点赞数 6

文章标签： css css3 html

于 2023-12-21 22:58:10 首次发布

本文链接：https://blog.csdn.net/a1833919188/article/details/135142252

版权

盒子模型、浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body
        {
            border: 0px;
        }
        .container
        {
            width: 1000px;
            height:1500px;
            border:solid red;
            margin: 30px auto 0px;
        }
        .colum2
        {
            border:2px solid black;
            
        }
        .colum2 .colum2-1
        {
            width: 700px;
            height:200px;
            background-color: red;
            float: left;
        }
        .colum2 .colum2-2
        {
            width: 280px;
            height:200px;
            background-color: yellow;
            float: right;
        }
        .clear
        {
            clear:left;
            clear:right;
        }   
        .colum3
        {
            border:2px solid blue;
        }
        .colum3 .colum3-1
        {
            width: 200px;
            height:200px;
            background-color: aqua;
            float: left;
        }
        .colum3 .colum3-2
        {
            width: 400px;
            height:200px;
            background-color: coral;
            float: left ;
            margin-left: 20px;
        }
        .colum3 .colum3-3
        {
            width: 360px;
            height:200px;
            background-color: purple;
            float: right;
        }
        .colum4
        {
            border:2px solid blue;
        }
        .colum4 .colum4-1
        {
            width: 235px;
            height:200px;
            background-color:slateblue;
            float: left;
        }
        .colum4 .colum4-2
        {
            width: 235px;
            height:200px;
            background-color: green;
            float: left ;
            margin-left: 20px;
        }
        .colum4 .colum4-3
        {
            width: 235px;
            height:200px;
            background-color: teal;
            float: right;
            
        }
        .colum4 .colum4-4
        {
            width: 235px;
            height:200px;
            background-color: hotpink;
            float: right;
            margin-right:20px ;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="colum2">
            <div class="colum2-1"></div>
            <div class="colum2-2"></div>
            <div class="clear"></div>
        </div>
        <div class="colum3">
            <div class="colum3-1"></div>
            <div class="colum3-2"></div>
            <div class="colum3-3"></div>
            <div class="clear"></div>
        </div>
        <div class="colum4">
            <div class="colum4-1"></div>
            <div class="colum4-2"></div>
            <div class="colum4-3"></div>
            <div class="colum4-4"></div>
            <div class="clear"></div>
        </div>
     </div>
    
</body>
</html>

定位布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #first
        {
            width:120px;
            height: 300px;
            border: 1px solid gray;
            line-height: 600px;
            background-color: aqua;
        }
        #second
        {
            position: fixed;/*设置元素为固定位置*/
            top: 30px;
            left: 160px;
            width:60px;
            height: 60px;
            border: 1px solid silver;
            background-color: blueviolet;
        }
        #father
        {
            margin-top:30px ;
            margin-left: 30px;
            border: 1px solid silver;
            background-color: lightskyblue;
        }
        #father div
        {
            width:100px;
            height: 60px;
            margin: 10px;
            border: 1px solid white;
            color: white;
            background-color: hotpink;
        }
        #son2
        {
            position: relative;
            top: 20px;
            left: 40px;
        }
        #father1
        {
            padding: 15px;
            background-color: blanchedalmond;
            border: 1px solid silver;
        }
        #father1 div
        {
            padding: 10px;
        }
        #s1{background-color: aquamarine;}
        #s2
        {
            background-color: brown;
            position: absolute;
            top: 20px;
            right: 40px;
        }
        #s3{background-color: yellow;}
    </style>
</head>
<body>
    <div id="first">无定位的div元素</div>
    <div id="second">固定定位的div元素</div>
    <div id="father">
        <div id="son1">第一个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第二个无定位的div元素</div>
    </div>
    <div id="father1">
        <div id="s1">box1</div>
        <div id="s2">box2绝对定位</div>
        <div id="s3">box3</div>
        
    </div>
</body>
</html>