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

0702固定定位

程序员文章站 2022-06-02 19:29:42
...

0702作业

制作一个在线QQ客服的固定定位

    

  1. <style>
    2. 

  2.         * {
    3. 

  3.             padding: 0;
    4. 

  4.             margin: 0;
    5. 

  5.             box-sizing: border-box;
    6. 

  6.         }
    7. 

  7.         .image {
    8. 

  8.             width: 5em;
    9. 

  9.         }
    10. 

    11. 

  11.         .kefu {
    12. 

  12.             position: relative;
    13. 

  13.             height: 900em;
    14. 

  14.         }
    15. 

  15.         .image {
    16. 

  16.             position:fixed;
    17. 

  17.             top: 20em;
    18. 

  18.             bottom: 0;
    19. 

  19.             right: 0;
    20. 

  20.         }
    21. 

  21.     </style>
    22. 

  22. </head>
    23. 

  23. <body>
    24. 

  24.     <div class="kefu">
    25. 

  25.         <img src="https://img0.baidu.com/it/u=3464795985,1960072882&fm=26&fmt=auto" alt="" class="image">
    26. 

  26.     </div>
    27. 

  27. </body>
    28.

三行三列的定位布局

    

  1. <style>
    2. 

  2.         * {
    3. 

  3.             padding: 0;
    4. 

  4.             margin: 0;
    5. 

  5.             box-sizing: border-box;
    6. 

  6.         }
    7. 

    8. 

  8.         body *:not(.container) {
    9. 

  9.             background-color: lightgreen;
    10. 

  10.         }
    11. 

  11.         :root {
    12. 

  12.             /* rem布局 */
    13. 

  13.             font-size: 10px;
    14. 

  14.         }
    15. 

  15.         body {
    16. 

  16.             font-size: 1.6rem;
    17. 

  17.         }
    18. 

    19. 

  19.         header ,
    20. 

  20.         footer {
    21. 

  21.             height: 5rem;
    22. 

  22.             /* background-color: lightblue; */
    23. 

  23.         }
    24. 

  24.         .container {
    25. 

  25.             margin: 0.5rem 0;
    26. 

  26.             min-height: calc(100vh - 11rem);
    27. 

  27.             position: relative;
    28. 

  28.         }
    29. 

    30. 

    31. 

  31.         .container aside {
    32. 

  32.             width: 20rem;
    33. 

  33.             min-height: inherit;
    34. 

  34.             position: absolute;
    35. 

  35.         }
    36. 

    37. 

  37.         .container aside:first-of-type {
    38. 

  38.             left: 0;
    39. 

  39.             top: 0;
    40. 

  40.         }
    41. 

    42. 

  42.         .container aside:last-of-type {
    43. 

  43.             right: 0;
    44. 

  44.             top: 0;
    45. 

  45.         }
    46. 

    47. 

  47.         .container main{
    48. 

  48.             position:absolute;
    49. 

  49.             left: 20.5rem;
    50. 

  50.             right: 20.5rem;
    51. 

  51.             /* background-color: lightgreen; */
    52. 

  52.             min-height: inherit;
    53. 

  53.         }
    54. 

  54.     </style>
    55. 

  55. </head>
    56. 

  56. <body>
    57. 

  57.     <header>页眉</header>
    58. 

  58.     <div class="container">
    59. 

  59.         <aside>左侧</aside>
    60. 

  60.         <main>内容区</main>
    61. 

  61.         <aside>右侧</aside>
    62. 

  62.     </div>
    63. 

  63.     <footer>页脚</footer>
    64. 

  64. </body>
    65.

上一篇： 请问PHP写文件写数据库性能有关问题

下一篇： 猫狗拼，抖快博，618还是从前的618吗？

推荐阅读