search

博客列表 >绝对定位和浮动使用实现三列布局

绝对定位和浮动使用实现三列布局

霏梦
霏梦原创
2020年06月21日 19:40:09637浏览

- 作者：霏梦

定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>布局实例：用绝对定位完成一个通用的三列布局</title>
  7.     <STYle>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         li{
  14.             list-style: none;
  15.             float: left;
  16.             line-height: 50px;
  17.             padding: 0 10px;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.             color: orangered;
  23.         }
  24.         .footer,.header{
  25.             height: 50px;
  26.             background-color: palegoldenrod;
  27.         }
  28.         .content{
  29.             width: 960px;
  30.             margin: auto;
  31.             background-color: palegreen;
  32.         }
  33.         li:hover{
  34.             background-color: purple;
  35.         }
  36.         p{
  37.             line-height: 50px;
  38.             text-align: center;
  39.         }
  40.         .container{
  41.             width: 960px;
  42.             margin: 10px auto;
  43.             /* background-color: royalblue; */
  44.             min-height: 600px;
  45.             position:relative;
  46.         }
  47.         .container > .left{
  48.             width: 200px;
  49.             background-color: rosybrown;
  50.             min-height: 600px;
  51.             position: absolute;
  52.             top: 0;
  53.             left: 0;
  55.         }
  56.         .container > .right{
  57.             width: 200px;
  58.             background-color: rosybrown;
  59.             min-height: 600px;
  60.             position: absolute;
  61.             top: 0;
  62.             right: 0;
  63.         }
  64.         .container> .main{
  65.             min-height: 600px;
  66.             background-color: seagreen;
  67.             width: 540px;
  68.             position: absolute;
  69.             top: 0;
  70.             left: 210px;
  71.         }
  72.     </STYle>
  73. </head>
  74. <body>
  75.      <!-- 页眉 -->
  76.      <div class="header">
  77.         <div class="content">
  78.             <ul>
  79.                 <li><a href="">HOME</a></li>
  80.                 <li><a href="">618</a></li>
  81.                 <li><a href="">KEFU</a></li>
  82.                 <li><a href="">Contact</a></li>
  83.             </ul>
  84.         </div>
  85.      </div>
  87.      <!-- 主体 -->
  88.      <div class="container">
  89.          <div class="left">左侧</div>
  90.          <div class="main">内容</div>
  91.          <div class="right">右侧</div>
  92.      </div>
  93.      <!-- 页脚 -->
  94.      <div class="footer">
  95.          <p>北京望京东路&copy;京:ICP434343</p>
  96.      </div>
  97. </body>
  98. </html>

绝对定位

浮动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>布局实例：用浮动完成一个通用的三列布局</title>
  7.     <STYle>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         li{
  14.             list-style: none;
  15.             float: left;
  16.             line-height: 50px;
  17.             padding: 0 10px;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.             color: orangered;
  23.         }
  24.         .footer,.header{
  25.             height: 50px;
  26.             background-color: palegoldenrod;
  27.         }
  28.         .content{
  29.             width: 960px;
  30.             margin: auto;
  31.             background-color: palegreen;
  32.         }
  33.         li:hover{
  34.             background-color: purple;
  35.         }
  36.         p{
  37.             line-height: 50px;
  38.             text-align: center;
  39.         }
  40.         /* 主体部分 */
  41.         .container{
  42.             width: 960px;
  43.             margin: 10px auto;
  44.             /* background-color: royalblue; */
  45.             min-height: 600px;
  46.             /* 防止踢陷 */
  47.             overflow: hidden;
  48.         }
  49.         .container > .left{
  50.             width: 200px;
  51.             background-color: rosybrown;
  52.             min-height: 600px;
  53.             float: left;
  55.         }
  56.         .container > .right{
  57.             width: 200px;
  58.             background-color: rosybrown;
  59.             min-height: 600px;
  60.             float: right;
  61.         }
  62.         .container> .main{
  63.             min-height: 600px;
  64.             background-color: seagreen;
  65.             width: 540px;
  66.             float: left;
  67.             margin-left: 10px;
  69.         }
  70.     </STYle>
  71. </head>
  72. <body>
  73.      <!-- 页眉 -->
  74.      <div class="header">
  75.         <div class="content">
  76.             <ul>
  77.                 <li><a href="">HOME</a></li>
  78.                 <li><a href="">618</a></li>
  79.                 <li><a href="">KEFU</a></li>
  80.                 <li><a href="">Contact</a></li>
  81.             </ul>
  82.         </div>
  83.      </div>
  85.      <!-- 主体 -->
  86.      <div class="container">
  87.          <div class="left">左侧</div>
  88.          <div class="main">内容</div>
  89.          <div class="right">右侧</div>
  90.      </div>
  91.      <!-- 页脚 -->
  92.      <div class="footer">
  93.          <p>北京望京东路&copy;京:ICP434343</p>
  94.      </div>
  95. </body>
  96. </html>
上一条：网页背景、精灵图、阿里字体图标引用的初次体验下一条：html页面文档结构及三大属性（前端第二课）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多