前端学习之旅(四)【float实操】

·+·+·

已于 2024-01-16 15:11:54 修改

阅读量327

点赞数 8

分类专栏： B大学前端文章标签：学习 html 前端

于 2024-01-15 20:55:04 首次发布

本文链接：https://blog.csdn.net/qq_62170186/article/details/135610731

版权

B大学前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

任务

使用float的方式，实现以下效果：

代码实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>浮动小实践</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .horizontal {
            text-align: center;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .float-clear::after {
            content: "";
            display: block;
            clear: both;
        }

        .logo {
            width: 200px;
            margin-right: 10px;
        }

        .banner1 {
            width: 540px;
            margin-right: 10px;
        }

        .banner2 {
            width: 200px;
        }

        .logo,
        .banner1,
        .banner2 {
            height: 80px;
            line-height: 80px;
            background-color: #ccc;
        }

        .container {
            width: 960px;
            margin: 0 auto;
        }

        .menu {
            height: 30px;
            width: 960px;
            background-color: #ccc;
            line-height: 30px;
            margin-top: 10px;
        }

        .top-part {
            height: 198px;
            width: 368px;
            margin-right: 10px;
        }

        .content,
        .three,
        .four,
        .five,
        .six {
            margin-top: 10px;
        }

        .border1 {
            border: 1px solid black;
        }

        .bottom-part {
            height: 198px;
            width: 178px;
        }

        .margin-right-10 {
            margin-right: 10px;
        }

        .right-part {
            height: 128px;
            width: 198px;
        }

        .eight,
        .nine {
            margin-top: 10px;
        }

        .root {
            margin-top: 10px;
            height: 80px;
            width: 960px;
            background-color: #ccc;
            line-height: 80px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header float-clear">
            <div class="logo horizontal float-left ">logo</div>
            <div class="banner1 horizontal float-left ">banner1</div>
            <div class="banner2 horizontal float-left">banner2</div>
        </div>

        <div class="menu horizontal">菜单</div>

        <div class="content float-clear">
            <div class="left float-left">
                <div class="top float-clear">
                    <div class="one top-part float-left horizontal border1">栏目一</div>
                    <div class="two top-part float-left horizontal border1">栏目二</div>
                </div>
                <div class="bottom float-clear">
                    <div class="horizontal three border1 bottom-part float-left margin-right-10">栏目三</div>
                    <div class="horizontal four border1 bottom-part float-left margin-right-10">栏目四</div>
                    <div class="horizontal five border1 bottom-part float-left margin-right-10">栏目五</div>
                    <div class="horizontal six border1 bottom-part float-left">栏目六</div>
                </div>
            </div>
            <div class="right float-right">
                <div class="right-part horizontal border1 seven">栏目七</div>
                <div class="right-part horizontal border1 eight">栏目八</div>
                <div class="right-part horizontal border1 nine">栏目九</div>
            </div>
        </div>

        <div class="root horizontal">页脚</div>
    </div>

</body>

</html>