web前端的float布局与flex布局

flex布局

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style>
            .container{
               width: 100%;
               height: 100px;
                background-color: aqua;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }
            .item{
                width: 100px;
                height: 100px;
                border: black solid 2px;
                text-align: center;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="item" style="background-color: palegoldenrod;">首页</div>
            <div class="item" style="background-color: palegreen;">课程体系</div>
            <div class="item" style="background-color: pink;">开班信息</div>
            <div class="item" style="background-color: papayawhip;">新闻资讯</div>
        </div>
    </body>
</html>

float布局

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float</title>
        <style>
            .float{
               float: left;
               width: 100px;
               height: 200px;
               background-color: aqua;
            }
            .item{
                background-color: bisque;
                width: 100%;
                height: 500px;
            }
        </style>                                             
    </head>
    <body>
        <div class="container">
            <div class="float">首页</div>
            <div class="float">课程体系</div>
            <div class="float">开班信息</div>
            <div class="float">新闻资讯</div>
            <div class="item"></div>
        </div>
    </body>
</html>
相关推荐
^小桃冰茶9 分钟前
HTML 的基本结构与简单文件编写方法
前端·html
生产队队长13 分钟前
HTML:常用标签(元素)汇总
前端
森叶1 小时前
大前端开发——前端知识渐变分层讲解 & 利用金字塔原理简化前端知识体系
前端·webpack·electron
前端_yu小白1 小时前
css网格布局Grid
css·flex·网格布局·grid布局
黄同学real2 小时前
常见的 CSS 知识点整理
前端·css
oMMh2 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(1)
前端·c#·asp.net
Huazzi.2 小时前
打造惊艳的渐变色下划线动画:CSS实现详解
前端·css
北方之mini鱼2 小时前
使用Construct开发一个HTML5小游戏究竟需要多长时间?
前端·html·html5
佬乔2 小时前
JWT-验证
java·服务器·前端
网络大镖客2 小时前
JavaScript高级进阶(五)
开发语言·前端·javascript