简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 固定定位及传统三行三列布局练习
Blogger Information
Blog 9
fans 0
comment 0
visits 5986
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
固定定位及传统三行三列布局练习
不是本人
Original
553 people have browsed it

固定定位

固定定位是相对于屏幕的位置进行定位，使用元素的position：fixed;属性。
效果图如下：

完整代码：

  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>固定定位及三行三列布局练习</title>
  8.     <style>
  9.       /* 需要注意的是calc的运算符左右要有空格，否则无效 */
  10.       .zixun img {
  11.         position: fixed;
  12.         top: calc(50vh - 119px); /* 119px为图片高度的一半 */
  13.         left: calc(50vw - 188px); /* 188px为图片宽度的一半 */
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <!-- 固定定位 -->
  19.     <div class="zixun">
  20.       <img src="QQ咨询1.png" alt="QQ咨询" />
  21.     </div>
  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>三行三列布局</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       html {
  15.         font-size: 10px;
  16.       }
  17.       body {
  18.         font-size: 1.6rem;
  19.       }
  20.       header {
  21.         background-color: rgba(0, 140, 255, 0.822);
  22.         width: 100%;
  23.         height: 8rem;
  24.         margin-bottom: 0.5rem;
  25.         text-align: center;
  26.         font-size: 24px;
  27.         line-height: 8rem;
  28.       }
  29.       .container {
  30.         width: 100%;
  31.         height: calc(100vh - 17rem);
  32.         line-height: calc(100vh - 17rem);
  33.         /*header 8rem，footer 8rem，上下margin加起来2rem，
  34.         但是margin合并，所以上下margin实际1rem，总共17rem。*/
  35.         text-align: center;
  36.         font-size: 24px;
  37.         position: relative;
  38.       }
  39.       footer {
  40.         background-color: rgba(0, 140, 255, 0.822);
  41.         width: 100%;
  42.         height: 8rem;
  43.         margin-top: 0.5rem;
  44.         text-align: center;
  45.         font-size: 24px;
  46.         line-height: 8rem;
  47.       }
  48.       div.container aside:first-of-type {
  49.         background-color: rgba(0, 140, 255, 0.822);
  50.         width: 10rem;
  51.         margin-right: 1rem;
  52.         height: inherit;
  53.         position: absolute;
  54.         top: 0;
  55.         left: 0;
  56.         display: inline-block;
  57.       }
  58.       div.container aside:last-of-type {
  59.         background-color: rgba(0, 140, 255, 0.822);
  60.         width: 10rem;
  61.         margin-left: 1rem;
  62.         height: inherit;
  63.         position: absolute;
  64.         top: 0;
  65.         right: 0;
  66.         display: inline-block;
  67.       }
  68.       div.container main {
  69.         background-color: rgba(0, 140, 255, 0.822);
  70.         height: inherit;
  71.         position: absolute;
  72.         top: 0;
  73.         left: 10.5rem;
  74.         right: 10.5rem;
  75.         display: inline-block;
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <header>头部</header>
  81.     <div class="container">
  82.       <aside>左侧边栏</aside>
  83.       <main>中间主体部分</main>
  84.       <aside>右侧边栏</aside>
  85.     </div>
  86.     <footer>尾部</footer>
  87.   </body>
  88. </html>
Correcting teacher：天蓬老师天蓬老师

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
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！