身无彩凤【双飞翼】，心有灵犀一点通。

双飞翼布局

一、页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h4>双飞翼布局</h4>
    <div class="container">
        <div class="header">header</div>
        <div class="wrapper clearfix">
            <div class="center floatLeft">
                <div class="center-wrap">center</div>
            </div>
            <div class="left floatLeft">left</div>
            <div class="right floatLeft">right</div>
        </div>
        <div class="footer">footer</div>
    </div>

</body>
</html>

二、样式文件

@charset 'utf-8';

* {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}

h4 {
  margin: 15px 0;
}

.floatLeft {
  /* 中间部分的left、center、right均做左浮动处理 */
  float: left;
}

.header,
.footer {
  height: 80px;
  background: rgb(97, 206, 106);
}

.center {
  /* 中间的center部分是屏幕宽度的100% */
  width: 100%;
  background-color: rgb(161, 88, 88);
}

.center-wrap {
  /* 注意：该标签宽度为为屏幕宽度-左margin-右margin */
  margin: 0 100px 0 100px;
  /* 因为该标签宽度与left、right区域高度不等，所以下面出现了高度差的留白 */
  height: 200px;
}

.left,
.right {
  width: 100px;
  height: 300px;
  background-color: rgb(213, 238, 213);
}

.left {
  /* 使其位于最左侧 */
  margin-left: -100%;
}

.right {
  /* 使其位于最左侧 */
  margin-left: -100px;
}

/* 清除浮动专用的样式 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

三、效果图

四、温馨提示

所有的样式作用及分析，已经在代码中注释完成。

身无彩凤【双飞翼】，心有灵犀一点通。

双飞翼布局

猜你喜欢