• web前端的float布局与flex布局


    flex布局

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>flex</title>
    6. <style>
    7. .container{
    8. width: 100%;
    9. height: 100px;
    10. background-color: aqua;
    11. display: flex;
    12. flex-direction: row;
    13. justify-content: space-around;
    14. }
    15. .item{
    16. width: 100px;
    17. height: 100px;
    18. border: black solid 2px;
    19. text-align: center;
    20. }
    21. </style>
    22. </head>
    23. <body>
    24. <div class="container">
    25. <div class="item" style="background-color: palegoldenrod;">首页</div>
    26. <div class="item" style="background-color: palegreen;">课程体系</div>
    27. <div class="item" style="background-color: pink;">开班信息</div>
    28. <div class="item" style="background-color: papayawhip;">新闻资讯</div>
    29. </div>
    30. </body>
    31. </html>

    float布局

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>float</title>
    6. <style>
    7. .float{
    8. float: left;
    9. width: 100px;
    10. height: 200px;
    11. background-color: aqua;
    12. }
    13. .item{
    14. background-color: bisque;
    15. width: 100%;
    16. height: 500px;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <div class="container">
    22. <div class="float">首页</div>
    23. <div class="float">课程体系</div>
    24. <div class="float">开班信息</div>
    25. <div class="float">新闻资讯</div>
    26. <div class="item"></div>
    27. </div>
    28. </body>
    29. </html>

  • 相关阅读:
    数据结构与算法(三)
    Web标准与前端开发| 青训营笔记
    Clickhouse实时数仓建设
    利用Git进行协作
    【python】pip的使用
    java基础巩固2
    虚拟机--无法连接网络
    CTF 全讲解:[SWPUCTF 2021 新生赛]jicao
    MYSQLg高级------回表
    02_Java基础语法
  • 原文地址:https://blog.csdn.net/SssY_x/article/details/133190065