网站基本布局CSS
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 60px;
background: #79EDEE;
}
.warp {
height: calc(100vh - 60px);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.left {
width: 20%;
height: 100%;
position: relative;
}
.right {
background-color: #CDFDEA;
width: 100%;
height: 100%;
overflow-y: auto;
}
.left-top {
background-color: #C1ECEA;
height: 80%;
box-sizing: border-box;
overflow-y: auto;
}
.left-bottom {
background-color: #D0F5BE;
height: 20%;
box-sizing: border-box;
overflow-y: auto;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb{
background-color: #9f9f9f;
border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track{
background-color: #fcfcfc;
border-radius: 10px;
}
.collapse {
height: 30px;
width: 20px;
border: 1px solid lightgray;
display: flex;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div class="header">
<div class="menu-btn">
<button class="collapse" id="collapse" onclick="collapse()">关</button>
<button class="collapse" id="collapse" onclick="extend()">开</div>
</div>
</div>
<div class="warp">
<div class="left" id="left-menu">
<div class="left-top" id="left-top"></div>
<div class="left-bottom" id="left-bottom"></div>
</div>
<div class="right" id="right"></div>
</div>
</div>
</body>
<script type="text/javascript">
let leftTopEl = document.getElementById('left-top')
for (let i = 0; i < 100; i++) {
leftTopEl.innerHTML += `<div>${i}</div>`;
}
let leftBottomEl = document.getElementById('left-bottom')
for (let i = 0; i < 100; i++) {
leftBottomEl.innerHTML += `<div>${i}</div>`;
}
let rightEl = document.getElementById('right')
for (let i = 0; i < 1000; i++) {
rightEl.innerHTML += `<div>${i}</div>`;
}
function collapse() {
document.getElementById('left-menu').style.display = 'none'
}
function extend() {
document.getElementById('left-menu').style.display = 'block'
}
</script>
</html>
效果
原文地址：https://blog.csdn.net/m0_46608027/article/details/140657853
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！