圣杯布局与双飞翼布局

最新推荐文章于 2025-03-24 10:35:25 发布

原创最新推荐文章于 2025-03-24 10:35:25 发布 · 159 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>圣杯布局</title>
<!-- 圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布
局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，
可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现： -->
<style type="text/css">
    *{margin:0;padding:0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        /* border: 1px solid #333; */
        background: #aaa;
        /* text-align: center;  */
    }
    .left,
    .middle,
    .right{ 
        position: relative;
        float: left;
        /* min-height: 130px; */
    }
    .container{
        padding:0 220px 0 200px;
        /*清楚浮动 */
        /* overflow: hidden;  */
        /* border:1px solid red; */
    }
    .left{
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: rgb(184, 131, 131);
    }
    .right{
        width: 220px;
        margin-left: -220px;
        /* right: -220px; */
        background: rgb(69, 114, 69);
    }
    .middle{ 
         width: 100%; 
        /* word-break: break-all;  */
        background:rgb(145, 255, 0);
        /* border:1px solid blue; */

    }
    .footer{ 
        /* clear: both; */
    }
</style>
</head>
<body>
  <!-- <div class="header">
      <h4>header</h4>
  </div> -->
  <div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>中间层</p>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>left</p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>right</p>
    </div>
  </div>
  <!-- <div class="footer">
    <h4>footer</h4>
  </div> -->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼布局</title>
<!-- 双飞翼布局则是源于淘宝的UED -->
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{min-width: 700px;}
    .header,
    .footer{ 
        border: 1px solid #333;
        background: #aaa;
        text-align: center;
    }
    .sub,
    .main,
    .extra{ 
        float: left;
        min-height: 130px;
    }
    .sub{ 
        margin-left: -100%;
        width: 200px;
        background: rgb(129, 74, 74);
    }
    .extra{
        margin-left: -220px;
        width: 220px;
        background: rgb(56, 56, 114);
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: rgb(65, 114, 65);
        word-break: break-all;
    }
    .footer{ 
        clear: both;
    }
</style>
</head>
<body>
    <!-- <div class="header">
      <h4>header</h4>
    </div> -->
    <div class="main">
      <div class="main-inner">
          <h4>middle</h4>
          <p>中间层</p>
      </div>
    </div> 
    <div class="sub">
      <h4>left</h4>
      <p>left</p>
    </div>

    <div class="extra">
      <h4>right</h4>
      <p>right</p>
    </div>
    <!-- <div class="footer">
      <h4>footer</h4>
    </div> -->
</body>
</html>