search

博客列表 >0702固定定位

0702固定定位

AlUN
AlUN原创
2021年12月23日 16:30:55428浏览

0702作业

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

  1. <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         .image {
  8.             width: 5em;
  9.         }
  11.         .kefu {
  12.             position: relative;
  13.             height: 900em;
  14.         }
  15.         .image {
  16.             position:fixed;
  17.             top: 20em;
  18.             bottom: 0;
  19.             right: 0;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="kefu">
  25.         <img src="https://img0.baidu.com/it/u=3464795985,1960072882&fm=26&fmt=auto" alt="" class="image">
  26.     </div>
  27. </body>

三行三列的定位布局

  1. <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         body *:not(.container) {
  9.             background-color: lightgreen;
  10.         }
  11.         :root {
  12.             /* rem布局 */
  13.             font-size: 10px;
  14.         }
  15.         body {
  16.             font-size: 1.6rem;
  17.         }
  19.         header ,
  20.         footer {
  21.             height: 5rem;
  22.             /* background-color: lightblue; */
  23.         }
  24.         .container {
  25.             margin: 0.5rem 0;
  26.             min-height: calc(100vh - 11rem);
  27.             position: relative;
  28.         }
  31.         .container aside {
  32.             width: 20rem;
  33.             min-height: inherit;
  34.             position: absolute;
  35.         }
  37.         .container aside:first-of-type {
  38.             left: 0;
  39.             top: 0;
  40.         }
  42.         .container aside:last-of-type {
  43.             right: 0;
  44.             top: 0;
  45.         }
  47.         .container main{
  48.             position:absolute;
  49.             left: 20.5rem;
  50.             right: 20.5rem;
  51.             /* background-color: lightgreen; */
  52.             min-height: inherit;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <header>页眉</header>
  58.     <div class="container">
  59.         <aside>左侧</aside>
  60.         <main>内容区</main>
  61.         <aside>右侧</aside>
  62.     </div>
  63.     <footer>页脚</footer>
  64. </body>
上一条：课程表和用户注册下一条：表单初体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多