欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

弹性盒flex的使用

程序员文章站 2022-03-13 13:56:28
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>伸缩盒</title>
    6. 

  6.     <style>
    7. 

  7.         header{
    8. 

  8.             min-width: 1200px;
    9. 

  9.             height: 100px;
    10. 

  10.             display: flex;
    11. 

  11.             align-items: center;
    12. 

  12.             justify-content: space-around;
    13. 

  13.         }
    14. 

    15. 

  15.         .logo{
    16. 

  16.             height: 100%;
    17. 

  17.             width: 200px;
    18. 

  18.             background: url("https://www.php.cn/static/images/PHPlogo.png") no-repeat;
    19. 

  19.             background-size: cover;
    20. 

  20.         }
    21. 

  21.         .nav{
    22. 

  22.             width: 800px;
    23. 

    24. 

  24.             display: flex;
    25. 

  25.             justify-content: space-between;
    26. 

  26.         }
    27. 

  27.         .info{
    28. 

  28.             width: 100px;
    29. 

  29.             display: flex;
    30. 

  30.             align-items: center;
    31. 

  31.             justify-content: space-between;
    32. 

  32.         }
    33. 

  33.         .head_img{
    34. 

  34.             width: 50px;
    35. 

  35.             height: 50px;
    36. 

  36.             background: cornflowerblue;
    37. 

  37.             border-radius: 50%;
    38. 

  38.             line-height: 50px;
    39. 

  39.             text-align: center;
    40. 

  40.             color: #FF0000;
    41. 

  41.         }
    42. 

  42.     </style>
    43. 

  43. </head>
    44. 

  44. <body>
    45. 

  45. <header>
    46. 

  46.     <div class="logo"></div>
    47. 

  47.     <div class="nav">
    48. 

  48.         <div class="nav_item">首页</div>
    49. 

  49.         <div class="nav_item">视频教程</div>
    50. 

  50.         <div class="nav_item">学习路径</div>
    51. 

  51.         <div class="nav_item">大前端</div>
    52. 

  52.         <div class="nav_item">资源下载</div>
    53. 

  53.         <div class="nav_item">技术文章</div>
    54. 

  54.         <div class="nav_item">社区</div>
    55. 

  55.     </div>
    56. 

  56.     <div class="info">
    57. 

  57.         <div class="msg">消息</div>
    58. 

  58.         <div class="head_img">头像</div>
    59. 

  59.     </div>
    60. 

  60. </header>
    61. 

  61. </body>
    62. 

  62. </html>
    63.

弹性盒flex的使用

上一篇： Vue:怎么设置，不让eslint报错

下一篇： 商城HTML所有页面

推荐阅读