Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 固定定位的联系客服+简易的三行三列布局
Blogger Information
Blog 4
fans 0
comment 0
visits 3004
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
固定定位的联系客服+简易的三行三列布局
qwq
Original
653 people have browsed it

好累，但是要加油，不能辜负自己

固定位置联系QQ客服

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>固定定位</title>
  8.     <!-- 相对定位:relative基于自身位置定位 -->
  9.     <!-- 绝对定位:absolute是基于上一个定位元素定位的，使用绝对定位上级必须是定位元素 -->
  10.     <!-- 固定定位：fixed是基于body或者html定位的，常用
  11.     只要position不是static，就可充当定位元素 -->
  12.     <style>
  13.       body {
  14.         height: 100vh;
  15.         width: 100vw;
  16.         position: relative;
  17.         background: rgb(214, 53, 53);
  18.         margin: auto;
  19.         left: 0px;
  20.         right: 0px;
  21.         top: 0px;
  22.         bottom: 0px;
  23.       }
  24.       .qy {
  25.         height: auto;
  26.         width: auto;
  27.         position: fixed;
  28.         top: 300px;
  29.         right: 120px;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="qy">
  35.       <img src="/0702/qq.jpg" alt="qq客服" />
  36.     </div>
  37.   </body>
  38. </html>

三行三列布局

展示图

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>三行三列布局</title>
  8.   </head>
  9.   <style>
  10.     /* 通配符养成习惯 */
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.     }
  16.     /* 定义字体大小，方便使用 */
  17.     :root {
  18.       font-size: 10px;
  19.     }
  20.     /* 定义网页默认元素大小 */
  21.     body {
  22.       font-size: 16px;
  23.     }
  24.     /* 页眉页脚的高度及背景 */
  25.     header,
  26.     footer {
  27.       height: 120px;
  28.       background: rgb(19, 140, 211);
  29.     }
  30.     /* 内容区的外边距和最小高度和相对定位  */
  31.     .container {
  32.       margin: 0.2rem 0;
  33.       min-height: 60rem;
  34.       position: relative;
  35.     }
  36.     /* 宽度和绝对定位和最小高度继承 */
  37.     .container aside {
  38.       width: 20rem;
  39.       position: absolute;
  40.       min-height: inherit;
  41.       background: rgb(167, 35, 255);
  42.     }
  43.     /* 右侧的侧边框 */
  44.     .container aside:last-of-type {
  45.       right: 0px;
  46.       top: 0px;
  47.     }
  48.     /* 主体的绝对定位和左侧和右侧还有最小高度继承 */
  49.     .container main {
  50.       position: absolute;
  51.       background: rgb(80, 255, 109);
  52.       left: 20.2rem;
  53.       right: 20.2rem;
  54.       min-height: inherit;
  55.     }
  56.   </style>
  57.   <body>
  58.     <header>页眉</header>
  59.     <div class="container">
  60.       <aside>左侧</aside>
  61.       <main>主体</main>
  62.       <aside>右侧</aside>
  63.     </div>
  64.     <footer>页脚</footer>
  65.   </body>
  66. </html>

哪里不对请多多指教！！！
您将可能改变我的一生！！
勇敢浅忆，不怕困难！！！

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
一把青 2021-11-02 01:45:22
加油！！！
1 floor
Author's latest blog post