zoukankan      html  css  js  c++  java
  • 圣杯布局

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>圣杯布局</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        body{
          font: bold 25px/50px Arial sens-serif;
        }
        #header,#footer{
          background: #666;
          text-align: center;
          height: 50px;
        }
        #footer{
          clear: both;
        }
        #content{
          padding-left: 200px;
          padding-right: 150px;
          overflow: hidden;
        }
        .center{
          position: relative;
          background: #ccc;
          height: 600px;
          width: 100%;
          float: left;
        }
        .left{
          position: relative;
          background: #f96;
          height: 600px;
          width: 200px;
          margin-left: -100%;
          left: -200px;
          float: left;
        }
        .right{
          position: relative;
          background: #69f;
          height: 600px;
          width: 150px;
          margin-left: -150px;
          right: -150px;
          float: left;
        }
      </style>
    </head>
    <body>
      <div id="header">header</div>
      <div id="content">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
      <div id="footer">footer</div>
    </body>
    </html>

  • 相关阅读:
    Day11作业
    day12作业
    samba共享服务
    PHP7 redis扩展安装
    linux lin命令
    PhpStorm,Pycharm,Goland破解
    PHP规范PSR2
    PHP 过滤器(Filter)
    Linux下Redis的安装与配置
    linux命令汇总
  • 原文地址:https://www.cnblogs.com/simonryan/p/4850956.html
Copyright © 2011-2022 走看看