search

博客列表 >使用定位与浮动完成一个三列经典布局

使用定位与浮动完成一个三列经典布局

南宫
南宫原创
2020年06月27日 18:29:53567浏览

定位完成一个三列经典布局

  1. <!-- 页眉 -->
  2.     <div class="header">
  3.       <!-- 内容区：水平居中 -->
  4.       <div class="content">
  5.         <ul>
  6.           <li><a href="">首页</a></li>
  7.           <li><a href="">618主会场</a></li>
  8.           <li><a href="">在线客服</a></li>
  9.         </ul>
  10.       </div>
  11.     </div>
  13.     <!-- 主体 -->
  14.     <div class="container">
  15.       <div class="left">左侧</div>
  16.       <div class="main">内容区</div>
  17.       <div class="right">右侧</div>
  18.     </div>
  20.     <!-- 页脚 -->
  21.     <div class="footer">
  22.       <div class="content">
  23.         <p>某有限公司&copy; | 备案号：晋icp *************</p>
  24.       </div>
  25.     </div>
  1. * {
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.       }
  6.       li {
  7.         /* 去掉li标签黑点 */
  8.         list-style: none;
  9.       }
  10.       a {
  11.         /* 去掉a标签下划线 */
  12.         text-decoration: none;
  13.         color: #666;
  14.       }
  15.       /* 页眉与页脚 */
  16.       .header,
  17.       .footer {
  18.         height: 40px;
  19.         background-color: lightskyblue;
  20.       }
  21.       /* 页眉与页脚的内容区 */
  22.       .content {
  23.         width: 960px;
  24.         margin: auto;
  25.       }
  27.       .content ul li {
  28.         float: left;
  29.         line-height: 40px;
  30.         padding: 0 15px;
  31.       }
  32.       .content ul li:hover {
  33.         background-color: coral;
  34.       }
  35.       /* 页脚样式 */
  36.       .content p {
  37.         text-align: center;
  38.         line-height: 40px;
  39.       }
  40.       /* 主体用定位 */
  41.       .container {
  42.         width: 960px;
  43.         margin: 10px auto;
  44.         min-height: 600px;
  45.         /* 转为定位元素，做为定位父级 */
  46.         position: relative;
  47.       }
  48.       .container > .left {
  49.         width: 200px;
  50.         background-color: wheat;
  51.         min-height: 600px;
  52.         position: absolute;
  53.         top: 0;
  54.         left: 0;
  55.       }
  56.       .container > .right {
  57.         width: 200px;
  58.         background-color: wheat;
  59.         min-height: 600px;
  60.         position: absolute;
  61.         top: 0;
  62.         right: 0;
  63.       }
  64.       .container > .main {
  65.         background-color: lightseagreen;
  66.         min-height: 600px;
  67.         width: 540px;
  69.         position: absolute;
  70.         top: 0;
  71.         left: 210px;
  72.       }

浮动完成一个三列经典布局

  1. <!-- 页眉 -->
  2.     <div class="header">
  3.       <!-- 内容区：水平居中 -->
  4.       <div class="content">
  5.         <ul>
  6.           <li><a href="">首页</a></li>
  7.           <li><a href="">618主会场</a></li>
  8.           <li><a href="">在线客服</a></li>
  9.         </ul>
  10.       </div>
  11.     </div>
  13.     <!-- 主体 -->
  14.     <div class="container">
  15.       <div class="left">左侧</div>
  16.       <div class="main">内容区</div>
  17.       <div class="right">右侧</div>
  18.     </div>
  20.     <!-- 页脚 -->
  21.     <div class="footer">
  22.       <div class="content">
  23.         <p>某有限公司&copy; | 备案号：晋icp *************</p>
  24.       </div>
  25.     </div>
  1. * {
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.       }
  6.       li {
  7.         /* 去掉li标签黑点 */
  8.         list-style: none;
  9.       }
  10.       a {
  11.         /* 去掉a标签下划线 */
  12.         text-decoration: none;
  13.         color: #666;
  14.       }
  15.       /* 页眉与页脚 */
  16.       .header,
  17.       .footer {
  18.         height: 40px;
  19.         background-color: lightskyblue;
  20.       }
  21.       /* 页眉与页脚的内容区 */
  22.       .content {
  23.         width: 960px;
  24.         margin: auto;
  25.       }
  27.       .content ul li {
  28.         float: left;
  29.         line-height: 40px;
  30.         padding: 0 15px;
  31.       }
  32.       .content ul li:hover {
  33.         background-color: coral;
  34.       }
  35.       /* 页脚样式 */
  36.       .content p {
  37.         text-align: center;
  38.         line-height: 40px;
  39.       }
  40.       /* 主体用定位 */
  41.       .container {
  42.         width: 960px;
  43.         margin: 10px auto;
  44.         min-height: 600px;
  45.         /* 防止浮动元素的高度塌陷 */
  46.         overflow: hidden;
  47.       }
  48.       .container > .left {
  49.         width: 200px;
  50.         background-color: wheat;
  51.         min-height: 600px;
  52.         float: left;
  53.       }
  54.       .container > .right {
  55.         width: 200px;
  56.         background-color: wheat;
  57.         min-height: 600px;
  58.         float: right;
  59.       }
  60.       .container > .main {
  61.         background-color: lightseagreen;
  62.         min-height: 600px;
  63.         width: 540px;
  65.         float: left;
  66.         left: 10px;
  67.       }

上一条：弹性盒模型（flexbox）布局初体验下一条：浮动元素高度塌陷产生的原因与解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多