20180616-CSS-网页布局-经典布局/总结

最新推荐文章于 2022-11-14 17:47:36 发布

cutebright00

最新推荐文章于 2022-11-14 17:47:36 发布

阅读量281

点赞数

分类专栏：笔记 CSS 文章标签：课堂笔记 CSS

本文链接：https://blog.csdn.net/cutebright00/article/details/80714097

版权

笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

圣杯布局：

布局要求：

上右下左

padding:0 220px 0 200px;

相对定位：

position:relative;/*相对定位*/

模块上移策略：

margin-left:-100%;/*浮动属性下，负边界值会导致模块上移*/
left:-200px;/*模块向左移200px*/

上移方法二：

margin-left:-220px;/*上移，不能完整填充页面*/
right:-220px;/*模块右移*/

圣杯布局整体代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
           min-width: 700px;
        }
        .header,
        .footer{
            float:left;
            width:100%;
            background:#ddd;
            line-height:40px;
            text-align:center;
        }
        .container{
            padding:0 220px 0 200px;/*上右下左*/
        }
        .left,
        .middle,
        .right{
            position:relative;/*相对定位*/
            float:left;
            min-height:300px;
        }
        .middle{
            width:100%;
            background:#1a5acd;
        }
        .left{
            width:200px;
            background:#f00;
            margin-left:-100%;/*浮动属性下，负边界值会导致模块上移*/
            left:-200px;/*模块向左移200px*/
        }
        .right{
            width:220px;
            background:#30a457;
            margin-left:-220px;/*上移，不能完整填充页面*/
            right:-220px;/*模块右移*/
        }
    </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>这是页面的左侧内容</p>
          </div>
          <div class="right">
              <h4>right1</h4>
              <p>这是页面的右侧内容</p>
          </div>
      </div>
      <div class="footer">
          <h4>footer</h4>
      </div>
</body>
</html>

双飞翼布局：

-经淘宝UED的工程设计师对圣杯布局改良后得出的双飞翼布局；

-去掉相对布局，只需要浮动和副边距。

大概就是：

第一步：中间部分整体左侧浮动；

第二步：在大肚子部分，左右设置副边距；（双飞翼布局在此步，需要写：position：relative；相对布局的意思。）

第三步：左右侧上移；

【左侧上移：margin-left:-100%; 右侧上移：margin-left：*px 】

右侧上移像素为大肚子部分设置的右副边距！

双飞翼布局，中间内容部分变高高：

.main-inner{
    margin-left:200px;
    margin-right:220px;
    background:#30a457;
    min-height:300px;/*页面的中间内容，会变高，写在其他地方没有用哦！*/
}

双飞翼布局全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            min-width:700px;
        }
        .header,
        .footer{
            width:100%;
            float:left;
            height:40px;
            background:#ddd;
            text-align:center;
            line-height:40px;
        }
        .sub,.main,.extra{
            float:left;
            min-height:300px;
        }
        .main{
            width:100%;
            min-height:300px;
        }
        .main-inner{
            margin-left:200px;
            margin-right:220px;
            background:#30a457;
            min-height:300px;/*页面的中间内容，会变高，写在其他地方没有用哦！*/
        }
        .sub{
            width:200px;
            background:#f00;
            margin-left:-100%;
        }
        .extra{
            width:220px;
            background:#1a5acd;
            margin-left:-220px;
        }
    </style>
</head>
<body>
      <div class="header">
          <h4>header</h4>
      </div>
      <div class="main">
          <div class="main-inner">
              <h4>main</h4>
              <p>这是页面的中间内容这是页面的中间内容这是页面的中间内容
                  这是页面的中间内容这是页面的中间内容这是页面的中间内容
                  这是页面的中间内容这是页面的中间内容这是页面的中间内容</p>
          </div>
      </div>
      <div class="sub">
          <h4>sub</h4>
          <p>这是页面的左侧内容</p>
      </div>
      <div class="extra">
          <h4>extra</h4>
          <p>这是页面的右侧内容</p>
      </div>
      <div class="footer">
          <h4>footer</h4>
      </div>
</body>
</html>

双飞翼布局里面：

为什么footer的脚丫子没了，

要用

.footer{
    width:100%;
    float:left;

这个来补上脚丫子？？？？？？？？？

课程总结：

双飞翼布局和圣杯布局区别：

cutebright00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20180616-CSS-网页布局-经典布局/总结

圣杯布局：布局要求：上右下左padding:0 220px 0 200px;相对定位：position:relative;/*相对定位*/模块上移策略：margin-left:-100%;/*浮动属性下，负边界值会导致模块上移*/left:-200px;/*模块向左移200px*/上移方法二：margin-left:-220px;/*上移，不能完整填充页面*/right:-220px;/*模块...
复制链接

扫一扫

专栏目录