CSSDay01--Notes(Box模型+float属性)_box([0. 0.], [100. 100.], (2,), float16)-CSDN博客

本文链接：https://blog.csdn.net/baidu_38290612/article/details/79477183

一、Box模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>菜单实现</title>
    <style type="text/css">
        ul {
            list-style-type: none;
            float: left;
            padding: 0px;
            background-color: silver;
        }
        ul li {
            float: left;
        }
        ul a {
            display: block;
            width: 50px;
            height: 30px;
            padding: 5px 10px;
            text-decoration: none;
        }
        li a:hover {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#">新闻</a>
        </li>
        <li><a href="#">运动</a>
        </li>
        <li><a href="#">国学</a>
        </li>
        <li><a href="#">娱乐</a>
        </li>
    </ul>
</body>

</html>

运行结果：

二、float属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        #d1 {
            height: 200px;
            border: 1px solid;
        }
        #d2 {
            height: 100px;
            border: 1px solid;
        }
        #d3 {
            height: 50px;
            border: 1px solid;
        }
        #p1 {
            height: 50px;
            clear: both;
        }
        #p2 {
            height: 50px;
            clear: both;
        }
        #div1 {
            width: 20%;
            height: 50px;
            background-color: #F92672;
            float: left;
        }
        #div2 {
            width: 30%;
            height: 50px;
            background-color: #E6DB74;
            float: right;
            clear: left;
        }
        #div3 {
            width: 40%;
            height: 50px;
            background-color: #A6E22E;
            float: left;
            clear: right;
        }
        #div4 {
            width: 50%;
            height: 50px;
            background-color: #66D9EF;
            float: right;
            clear: left;
        }
        #div5 {
            width: 20%;
            height: 50px;
            background-color: #FF8C00;
            float: left;
            clear: right;
        }
        #div6 {
            width: 20%;
            height: 50px;
            background-color: #AE81FF;
            float: right;
        }
        #div7 {
            width: 20%;
            height: 50px;
            background-color: #75715E;
            float: left;
            clear: right;
        }
        #div8 {
            width: 20%;
            height: 50px;
            background-color: #FFC0CB;
            float: right;
        }
        #div9 {
            width: 20%;
            height: 50px;
            background-color: #FF8C00;
            float: left;
            clear: right;
        }
        #div10 {
            width: 20%;
            height: 50px;
            background-color: #AE81FF;
            float: left;
        }
        #div11 {
            width: 20%;
            height: 50px;
            background-color: #75715E;
            float: right;
            clear: right;
        }
        #div12 {
            width: 20%;
            height: 50px;
            background-color: #FFC0CB;
            float: right;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div class="mydiv" id="div1">div1</div>
        <div class="mydiv" id="div2">div2</div>
        <div class="mydiv" id="div3">div3</div>
        <div class="mydiv" id="div4">div4</div>
    </div>
    <div id="p1"></div>
    <div id="d2">
        <div class="mydiv" id="div5">div5</div>
        <div class="mydiv" id="div6">div6</div>
        <div class="mydiv" id="div7">div7</div>
        <div class="mydiv" id="div8">div8</div>
    </div>
    <div id="p2"></div>
    <div id="d3">
        <div class="mydiv" id="div9">div9</div>
        <div class="mydiv" id="div10">div10</div>
        <div class="mydiv" id="div11">div11</div>
        <div class="mydiv" id="div12">div12</div>
    </div>
</body>

</html>

运行结果：