Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 绝对定位和浮动使用实现三列布局
Blogger Information
Blog 31
fans 2
comment 0
visits 27601
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
638 people have browsed it

- 作者：霏梦

定位

  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>
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