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

基本布局和块状元素

程序员文章站 2022-03-07 19:21:16
...

浏览效果

前

基本布局和块状元素

后

基本布局和块状元素

代码如下：
    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>基本布局</title>
    8. 

  8.     <style>
    9. 

  9.         .main{
    10. 

  10.             width: 400px;
    11. 

  11.             height: 800px;
    12. 

  12.             background: #6ff;
    13. 

  13.             position: absolute;
    14. 

  14.             top: 40px;
    15. 

  15.             left: 400px;
    16. 

  16.             display: inline;
    17. 

  17.         }
    18. 

  18.         .top{
    19. 

  19.             width: 380px;
    20. 

  20.             height: 190px;
    21. 

  21.             position: relative;
    22. 

  22.             background: coral;
    23. 

  23.             margin-top: 10px;
    24. 

  24.             margin-left: 10px;
    25. 

  25.         }
    26. 

  26.         .line{
    27. 

  27.             width: 130px;
    28. 

  28.             height: 400px;
    29. 

  29.             position: relative;
    30. 

  30.             background: royalblue;
    31. 

  31.             float: left;
    32. 

  32.             margin-top: 10px;
    33. 

  33.             margin-left: 10px;
    34. 

  34.         }
    35. 

  35.         .line2{
    36. 

  36.             width: 130px;
    37. 

  37.             height: 400px;
    38. 

  38.             position: relative;
    39. 

  39.             background: #432;
    40. 

  40.             float: right;
    41. 

  41.             margin-top: 10px;
    42. 

  42.             margin-right: 10px;
    43. 

    44. 

  44.         }
    45. 

  45.         .foot{
    46. 

  46.             width: 380px;
    47. 

  47.             height: 150px;
    48. 

  48.             position: relative;
    49. 

  49.             background: seashell;
    50. 

  50.             margin-left: 10px;
    51. 

  51.             margin-top: 430px;
    52. 

  52.         }
    53. 

  53.          /* 隐藏与显示 */
    54. 

  54.         .st{
    55. 

  55.             display: none;
    56. 

  56.         }
    57. 

  57.         .main:hover .st{
    58. 

  58.             display: block;
    59. 

  59.         }
    60. 

  60.     </style>
    61. 

  61. </head>
    62. 

  62. <body>
    63. 

  63.     <div class="main">
    64. 

  64.         <div class="top"></div>
    65. 

  65.         <div class="st">
    66. 

  66.         <div class="line"></div>
    67. 

  67.         <div class="line2"></div>
    68. 

  68.         </div>
    69. 

  69.         <div class="foot"></div>
    70. 

  70.     </div>
    71. 

  71. </body>
    72. 

  72. </html>
    73.

上一篇： 【转载】盘点｜2021年最受欢迎Linux桌面操作系统前十名

下一篇： 【阿里云镜像】下载并安装Go环境

推荐阅读