在线客服固定定位

效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       img {
  14.         position: fixed;
  15.         right: 0;
  16.         top: 20em;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body bgcolor="#2c3e50">
  21.     <img src="./img/QQ截图20210705155538.png" alt="" />
  22.   </body>
  23. </html>

三行三列布局

效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.         text-align: center;
  14.         color: white;
  15.         font-size: 30px;
  16.         font-weight: bold;
  17.       }
  18.       html {
  19.         font-size: 10px;
  20.       }
  21.       body {
  22.         font-size: 1.6rem;
  23.       }
  24.       header {
  25.         height: 5rem;
  26.         background-color: #e74645;
  27.       }
  28.       footer {
  29.         height: 5rem;
  30.         background-color: #fb7756;
  31.       }
  32.       main {
  33.         margin: 0.5rem 0;
  34.         min-height: calc(100vh - 11rem);
  35.         position: relative;
  36.       }
  37.       aside {
  38.         width: 20rem;
  39.         min-height: inherit;
  40.         position: absolute;
  41.       }
  42.       aside:first-of-type {
  43.         background-color: #facd60;
  44.         left: 0;
  45.         top: 0;
  46.       }
  47.       aside:last-of-type {
  48.         background-color: #1ac0c6;
  49.         right: 0;
  50.         top: 0;
  51.       }
  52.       .main {
  53.         position: absolute;
  54.         min-height: inherit;
  55.         background-color: #34495e;
  56.         left: 21rem;
  57.         right: 21rem;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <header>头部</header>
  63.     <main>
  64.       <aside>左侧</aside>
  65.       <div class="main">主题</div>
  66.       <aside>右侧</aside>
  67.     </main>
  68.     <footer>底部</footer>
  69.     <script></script>
  70.   </body>
  71. </html>

更多相关文章

  1. 固定定位的联系客服+简易的三行三列布局
  2. 固定定位，三行三列定位布局
  3. 定位以及三行三列布局方式
  4. 固定定位及传统三行三列布局练习
  5. QQ在线客服，定位布局
  6. 在线QQ客服的固定定位以及三行三列的定位布局
  7. 简单的3行3列布局和固定定位
  8. 固定定位、三行三列布局
  9. php获取当前的定位城市

随机推荐

  1. IE中使用jquery的Google geomap失败
  2. 动态更改angularjs中静态段落的颜色
  3. javascript的密封对象之seal(),isSealed(
  4. 对多维数组中的列进行排序
  5. 如何调用另一个函数内的函数？
  6. 如何在onchange（）事件后调用的方法中将焦点
  7. 在角JS中Bootstrapping是什么意思?
  8. 动态左侧的GreenSock javascript动画
  9. 使用HTML或Javascript替换网页上的文本
  10. 父范围中的变量不会在匿名函数中被更改[