浮动布局练习

最新推荐文章于 2024-03-13 23:02:26 发布

407指导员

最新推荐文章于 2024-03-13 23:02:26 发布

阅读量351

点赞数 1

分类专栏： CSS3 文章标签： css

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109629703

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

浮动布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动练习一</title>
    <style>
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0
        }

        .head {
            width: 980px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .head .logo {
            width: 250px;
            height: 100px;
            background-color: #ffc0cb;
            float: left;
        }

        .head .language {
            width: 150px;
            height: 50px;
            background-color: #87ceeb;
            float: right;
        }

        .head .nav {
            width: 650px;
            height: 50px;
            background-color: #800080;
            float: right;
        }

        .content {
            width: 980px;
            height: 400px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
        }

        .content .aside {
            width: 320px;
            height: 400px;
            float: left;
            background-color: #ffff00;

        }

        .content .article {
            width: 650px;
            height: 400px;
            float: right;
        }

        .content .article .articleBottom {
            width: 400px;
            height: 200px;
            background-color: #00bfff;
            float: left;
        }

        .content .articleTop {
            width: 400px;
            height: 200px;
            background-color: #00bfff;
            float: left;
        }

        .content .article .articleTopRight {
            width: 240px;
            height: 350px;
            float: right;
            background-color: #008000;
        }

        .content .article .articleBottomLeft {
            width: 400px;
            height: 140px;
            float: left;
            background-color: #ff6347;
            margin-top: 10px;
        }

        .content .article .articleBottom {
            width: 650px;
            height: 40px;
            background-color: #b8860b;
            float: left;
            margin-top: 10px;

        }
        .foot {
            width: 980px;
            height: 40px;
            background-color: #ff6347;
            margin: 10px auto;
        }


    </style>
</head>
<body>
<div class="head">
    <div class="logo">250*100</div>
    <div class="language">150*50</div>
    <div class="nav">650*50</div>
</div>
<div class="content ">
    <div class="aside">320*400</div>
    <div class="article">
        <div class="articleTop">400*200</div>
        <div class="articleTopRight">240*350</div>
        <div class="articleBottomLeft">400*140</div>
        <div class="articleBottom">650*40</div>
    </div>
</div>
<div class="foot"></div>
</body>
</html>

在这里插入图片描述

注意点：

1.在标准流中内容的高度可以撑起父元素的高度。

2.但是在浮动流中浮动元素不可以撑起父元素的高度的。

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动布局练习

浮动布局练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动练习一</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, i
复制链接

扫一扫