登录  /  注册
首页 > 博客列表 > 绝对定位和浮动使用实现三列布局
博主信息
博文 31
粉丝 2
评论 0
访问量 26818
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
绝对定位和浮动使用实现三列布局
霏梦
原创
614人浏览过

- 作者：霏梦

定位

  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>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：下次看清作业要求， 没写完就先不要提交了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录