1. 实现页面布局的方法 ：
1. 浮动布局
2. 定位布局
3. 响应式布局
4. 弹性布局
6. 网格布局
7. 表格布局
2. 三栏布局
1. 假设高度已知, 请写出三栏布局, 其中 左栏 、 右栏 宽度各为 300px, 中间自适应 。
2. 解决方法: 浮动 / 绝对定位 / 弹性布局 / 网格布局 / 表格布局
绝对顶方法--代码
<!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>
</head>
<style>
/* 注意: 此方法不能设置 html、body height: 100% */
/* 公共样式设置 */
html * {
padding: 0;
margin: 0;
}
/* 中间内容部分 */
.left-right-center {
position: relative;
min-width: 800px;
}
#left {
height: 100%;
width: 300px;
position: absolute;
left: 0;
background-color: aquamarine;
}
.w_l-c {
background-color: tan;
height: 90%;
}
.center {
height: 100%;
margin-left: 300px;
background-color: #666;
}
/* 头部 */
.w_head-top {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: steelblue;
}
.w_h-right {
display: flex;
justify-content: flex-start;
align-items: center;
}
.w_h-right p {
padding: 0 12px;
}
/* 底部 */
.w_foot-bot {
height: 160px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: steelblue;
}
</style>
<body>
<!-- 头部 -->
<header class="w_head-top">
<h1>XXX 有限公司</h1>
<div class="w_h-right">
<p>头像</p>
<p>通知消息</p>
</div>
</header>
<!-- 内容部分 -->
<section class="layout float">
<article class="left-right-center">
<div id="left">
<p class="w_l-c">左侧</p>
<p>验证子元素设置 百分比 高度, 是否生效</p>
</div>
<div class="center">
<h2>绝对定位的解决方案</h2>
<h2>这是一个三栏布局中间内容部分</h2>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
<p>增加高度</p>
</div>
</article>
</section>
<!-- 底部 -->
<footer class="w_foot-bot">
<div>
外链
</div>
<address>
地址, 联系方式
</address>
<div>
二维码
</div>
</footer>
</body>
<script type="text/javascript">
// window.onload = function() {
// visibleAreaMinHeight()
// }
// 设置元素的最小高度
document.addEventListener('DOMContentLoaded', function() {
// DOM 渲染完即可, 此时图片、 视频可能还没有加载完 。
visibleAreaMinHeight()
});
// 监听窗口变化
window.onresize = function () {
visibleAreaMinHeight()
}
// 获取最小高度
function visibleAreaMinHeight() {
let visibleArea = window.innerHeight - 240 + 'px'
document.getElementsByClassName("center")[0].style.minHeight = visibleArea
document.getElementById('left').style.minHeight = visibleArea
}
</script>
</html>
绝对顶方法--图例
1-绝对定位的解决方案 .png
弹性盒子方法--代码
<!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>
</head>
<style>
/* 公共样式设置 */
html * {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
/* 中间内容部分 */
.layout {
/* 注意这里不能使用: min-height: 100% */
/* min-height: 100%; */
height: 100%;
/* height: calc(100% - 240px) */
}
.left-right-center {
display: flex;
min-width: 900px;
/* 注意这里: 不能使用 height: 100%, 否则 当内容高度大于 body 高度时, 内容高度等于 body 高度(始终等于 window.innerHeight 获取的值); 超出部分将溢出, */
/* height: 100%; */
/* 当布局不需要头部与底部时的设置 */
/* min-height: 100%; */
/* 布局有头部与底部 */
min-height: calc(100% - 240px);
}
.left {
width: 300px;
background-color: aquamarine;
/* height: 100%; */
}
.right {
width: 300px;
background-color: brown;
}
.center {
background-color: #666;
/* 中间自适应的原理 */
/* flex-grow: 1; */
flex: 1;
}
/* 头部 样式设置 */
.w_h-top {
height: 80px;
background-color: tan;
}
/* 底部 样式设置 */
.w_f-bot {
height: 160px;
background-color: blueviolet;
}
</style>
<body>
<section class="layout">
<header class="w_h-top">
<p>头部</p>
</header>
<article class="left-right-center">
<div class="left">
左侧
</div>
<div class="center">
<h2> flexbox 《弹性布局的方式》 的解决方案</h2>
<h2>这是一个三栏布局中间内容部分</h2>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<!-- <br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>s
<br><br><br><br><br><br><br>s<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>s -->
<p>增加高度</p>
<p>增加高度</p>
</div>
<div class="right">右侧</div>
</article>
<footer class="w_f-bot">
<p>底部</p>
</footer>
</section>
</body>
</html>
弹性盒子方法--图例
2-弹性盒子解决方案.png
网格布局方法--代码
<!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>
</head>
<style>
html * {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
/* 内容部分 */
.layout {
/* height: 100%; */
height: calc(100% - 240px)
}
.left-right-center {
min-height: 100%;
min-width: 900px;
/* overflow: hidden; */
/* 声明为网格布局 */
display: grid;
width: 100%;
/* grid-template-rows: 100px; */
grid-template-columns: 300px auto 300px;
}
.left {
width: 300px;
background-color: aquamarine;
}
.right {
width: 300px;
background-color: brown;
}
.center {
background-color: #666;
}
/* 头部 样式设置 */
.w_h-top {
height: 80px;
background-color: tan;
}
/* 底部 样式设置 */
.w_f-bot {
height: 160px;
background-color: blueviolet;
}
</style>
<body>
<section class="layout float">
<header class="w_h-top">
<p>头部</p>
</header>
<article class="left-right-center">
<div class="left">左侧</div>
<div class="center">
<h2> 网格布局的方法 解决方案</h2>
<h2>这是一个三栏布局中间内容部分</h2>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<p>增加高度</p>
<!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->
<p>增加高度</p>
</div>
<div class="right">右侧</div>
</article>
<footer class="w_f-bot">
<p>底部</p>
</footer>
</section>
</body>
</html>
网格布局方法--图例
3-网格布局解决方案.png
