“品”字布局两种方法

最新推荐文章于 2022-04-25 00:10:19 发布

ysn121101

最新推荐文章于 2022-04-25 00:10:19 发布

阅读量1.6k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/ysn121101/article/details/99332647

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

用定位布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台布局-定位</title>

	<style>
	html {
	color: #333;
	font:normal 12px '微软雅黑','Microsoft YaHei';
    }
    body,ul,ol,p,h1,h2,h3 {
	margin: 0;
	padding: 0;
    }
    ul,ol {
	list-style: none;
    }
    a {
	text-decoration: none;
	color: #333;
    }
	/*使页面占满整个浏览器视口*/
	html,body,.container{
		height: 100%;
	}
	.container{
		position: relative;
	}
	.top{
		height: 120px;
		background-color: lightblue;
		
	}
	.container > .top > .logo {
		font-size: 26px;
		line-height: 120px;
		padding: 0 2em;
		font-weight: bolder;
		text-align: center;
	}
	/*内容框相对于父元素container进行绝对定位*/
	.content{
		position: absolute;
		top:120px;
		bottom: 0;
		width: 100%;
		background: #ededed;
	}
	/*让内容框内左侧框浮动起来*/
	.content > .left{
		width: 200px;
		height: 100%;
		background-color: #FCEDED;
		float: left;
		padding-top: 50px;
		box-sizing: border-box;

	}
	/*让内容框右侧往右移，不要被左侧盖住*/
	.content > .right{
		margin-left: 200px;
		height: 100%;
		padding:1em;
		box-sizing: border-box;
	}
	.content > .right >.wrapper{
		height: 100%;
		background-color: #fff;
		border-radius:5px;
		overflow-y: auto;  /*在y轴方向如果内容过多，会出现滚动条*/
		box-shadow: 0 0 5px #ccc;
	}
	.content > .left >ul>li{
		width: 200px;
		background-color: #ADD8E6;
		border-top: 1px solid #fff;
		line-height: 3em;
		text-align: center;
		font-size: 15px;

	}
	.content > .left >ul>li:first-child{
		border-top:none;
	}
	.content > .left >ul>li>a{
		color:#fff;

	}
	.content > .left >ul>li>a:hover{
		color: #FF9800;
	}
	.content > .left >ul>li:hover {
		box-shadow: inset 0 0 3px #fff; 
	}

</style>
</head>
<body>
	<!-- 整体页面 -->
	<div class="container">
		<!-- 头部 -->
		<div class="top">
			<div class="logo">
				智慧校园-学生选课系统
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 内容左侧 -->
			<div class="left">
				<ul>
					<li><a href="">学生管理</a></li>
					<li><a href="">教师管理</a></li>
					<li><a href="">课程管理</a></li>
					<li><a href="">班级管理</a></li>
				</ul>

			</div>
			<!-- 内容右侧 -->
			<div class="right">
				<!-- 内容右侧滚动框 -->
				<div class="wrapper">
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>		
				</div>
			</div>
		</div>
	</div>
</body>
</html>

效果展示

在这里插入图片描述

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台布局-flex</title>
	<style>
	html {
	color: #333;
	font:normal 12px '微软雅黑','Microsoft YaHei';
    }
    body,ul,ol,p,h1,h2,h3 {
	margin: 0;
	padding: 0;
    }
    ul,ol {
	list-style: none;
    }
    a {
	text-decoration: none;
	color: #333;
    }
	/*使页面占满整个浏览器视口*/
	html,body,.container{
		height: 100%;
	}
	/*container定义为伸缩盒，其子元素在y轴排列*/
	.container{
		display: flex;
		flex-direction: column;
	}
	.top{
		/*基础高度为120px*/
		flex-basis: 120px;
		background-color: lightblue;
		
	}
	.container > .top > .logo {
		font-size: 26px;
		line-height: 120px;
		padding: 0 2em;
		font-weight: bolder;
		text-align: center;
	}
	/*内容框分配剩余空间,内容框作为伸缩盒，让子元素在x轴排列*/
	.content{
		flex-grow: 1;
		background: #ededed;
		display: flex;
		flex-direction: row;
		overflow-y: scroll;	
	}
	
	.content > .left{
		/*基础宽度200px*/
		flex-basis: 200px;
		padding-top: 50px;
		background-color: #FCEDED;
		

	}
	/*right 分配content的剩余空间*/
	.content > .right{
		flex-grow: 1;
		padding:1em;
		box-sizing: border-box;
	}
	.content > .right >.wrapper{
		height: 100%;
		background-color: #fff;
		border-radius:5px;
		overflow-y: auto;  /*在y轴方向如果内容过多，会出现滚动条*/
		box-shadow: 0 0 5px #ccc;
	}
	.content > .left >ul>li{
		width: 200px;
		background-color: #ADD8E6;
		border-top: 1px solid #fff;
		line-height: 3em;
		text-align: center;
		font-size: 15px;

	}
	.content > .left >ul>li:first-child{
		border-top:none;
	}
	.content > .left >ul>li>a{
		color:#fff;

	}
	.content > .left >ul>li>a:hover{
		color: #FF9800;
	}
	.content > .left >ul>li:hover {
		box-shadow: inset 0 0 3px #fff; 
	}
</style>
</head>
<body>
	<!-- 整体页面 -->
	<div class="container">
		<!-- 头部 -->
		<div class="top">
			<div class="logo">
				智慧校园-学生选课系统
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<!-- 内容左侧 -->
			<div class="left">
				<ul>
					<li><a href="">学生管理</a></li>
					<li><a href="">教师管理</a></li>
					<li><a href="">课程管理</a></li>
					<li><a href="">班级管理</a></li>
				</ul>

			</div>
			<!-- 内容右侧 -->
			<div class="right">
				<!-- 内容右侧滚动框 -->
				<div class="wrapper">
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
					<br>
				</div>
			</div>
		</div>

	</div>
</body>
</html>

效果展示

在这里插入图片描述

ysn121101

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
“品”字布局两种方法

用定位布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后台布局-定位</title> <style> html { color: #333; font:normal 12px '微软雅黑','Micros...
复制链接

扫一扫

专栏目录