网站基本布局CSS

news2024/11/15 12:44:30

代码

<!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>