search

博客列表 >固定定位及传统三行三列布局练习

固定定位及传统三行三列布局练习

不是本人
不是本人原创
2021年07月04日 02:17:32554浏览

固定定位

固定定位是相对于屏幕的位置进行定位，使用元素的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>
上一条：QQ在线客服，定位布局下一条：伪类选择器+盒模型+icon的使用方法+百分比设置元素大小
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多