纯css固定宽度，头部，菜单的布局

惜晨宝贝

于 2021-06-17 23:39:11 发布

阅读量275

点赞数

分类专栏：布局样式文章标签： html css

本文链接：https://blog.csdn.net/weixin_50639421/article/details/118004155

版权

布局样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

纯css固定宽度，头部，菜单的布局

- html
- css

页面要求：

宽度1440px，两侧留白，居中对齐
菜单和头部固定
主要内容随意滚动

直接看图吧
在这里插入图片描述

html

代码片.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layout.css"/>
	</head>
	<body>
		<div class="center">
			<div class="Sider">
				<div class="logo">
					logo
				</div>
				<div class="menu">
					<div class="" style="height: 1500px;">
						菜单内容
					</div>
				</div>
				<div class="username">
					username
				</div>
			</div>
			<div class="layout">
				<div class="Header">
					Header
				</div>
				<div class="Content">
					<div style="height: 1000px;">
						Content
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css

*{
	margin: 0;
	padding: 0;
}
.center{
	display: flex;
	width: 1440px;
	margin: auto;
}
.Sider{
	background-color: #FFBB33;
	height: 100vh;
	width: 200px;
	position: fixed;
}
.layout{
	background-color: aquamarine;
	width: 100%;
	margin-left: 200px;

}
.Header{
	background-color: #6C5DD3;
	position: fixed;
	height: 80px;
	width: calc(1440px - 200px);
}
.Content{
	background-color: #A0D7E7;
	margin-top: 80px;
}
.logo{
	position: absolute;
	top: 0;
	background-color: #FF0000;
	height: 80px;
	width: 100%;
}
.menu{
	margin-top: 80px;
	overflow: auto;
	height: 700px;
}
.username{
	position: absolute;
	bottom: 0;
	background-color: #FF0000;
	height: 80px;
	width: 100%;
}

惜晨宝贝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css固定宽度，头部，菜单的布局

纯css固定宽度，头部，菜单的布局htmlcss页面要求：宽度1440px，两侧留白，居中对齐菜单和头部固定主要内容随意滚动直接看图吧html代码片.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="layout.c
复制链接

扫一扫

专栏目录