简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS弹性布局案例1 - 九期线上班
Blogger Information
Blog 34
fans 0
comment 0
visits 21643
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS弹性布局案例1 - 九期线上班
只猫
Original
556 people have browsed it

一、手机端通用样式布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手机端页面</title>
	<link rel="stylesheet" type="text/css" href="static/css/style1.css">
</head>
<body>
	<header>标题</header>
	<main>主体部分</main>
	<footer>
		<a href="">网站首页</a>
		<a href="">我的课程</a>
		<a href="">个人中心</a>
	</footer>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #000;
}
body{
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}
header,footer{
	box-sizing: border-box;
	background-color: #ccc;
	height: 50px;
	display: flex;
	justify-content: center;
}
main{
	box-sizing: border-box;
	background-color: lightcyan;
	flex: 1;
}
footer>a{
	border-right: 1px solid white;
	flex:1;
	display: flex;
	justify-content: center;
	align-items: center;
}
footer>a:last-of-type{
	border-right: none;
}

效果展示

1573096946682411.png

二、圣杯布局的flex实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局flex模式</title>
	<link rel="stylesheet" type="text/css" href="static/css/style2.css">
</head>
<body>
	<header>头部</header>
	<main>
		<!-- 主题内容区优先渲染 -->
		<article>主体</article>
		<aside class="left">左边栏</aside>
		<aside class="right">右边栏</aside>
	</main>
	<footer>底部</footer>
</body>
</html>

*{
	padding: 0;
	margin: 0;
}
body{
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}
header,footer{
	box-sizing: border-box;
	background-color: #ccc;
	height: 50px;
	text-align: center;
}
main{
	box-sizing: border-box;
	background-color: lightcyan;
	flex: 1;
	display: flex;
}
article{
	flex: 1;
}
aside{
	box-sizing: border-box;
	width: 200px;
	background-color: lightgreen;
}
.left{
	order: -1;
}


三、酷炫登陆窗口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登陆窗口</title>
	<link rel="stylesheet" type="text/css" href="static/css/style3.css">
</head>
<body>
	<div class="container">
		<h3>管理员登陆</h3>
		<form action="" method="">
			<div>
				<label for="email">邮箱：</label>
				<input type="email" name="email" id="email" placeholder="example@email.com">
			</div>
			<div>
				<label for="password">密码：</label>
				<input type="password" name="password" id="password" placeholder="不少于6位">
			</div>
			<div>
				<button>登陆</button>
			</div>
		</form>
	</div>
</body>
</html>
*{
	padding: 0;
	margin: 0;
	/*outline: 1px dashed #999;*/
}
body{
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	color: #444;
	font-weight: lighter;
	background: linear-gradient(lightblue,white,lightblue);
}
.container{
	box-sizing: border-box;
	width: 300px;
	padding: 20px;
	position: relative;
	top:-40px;
	flex-flow: column nowrap;
}
.container > h3{
	text-align: center;
	margin-bottom: 15px;
	font-weight: lighter;
	letter-spacing: 3px;
}
.container > form{
	flex-flow: column nowrap;
	padding: 15px;
	border:1px solid gray;
	border-radius: 10px;
	background: linear-gradient(to right bottom,wheat,white);
}
.container > form:hover
{
	background: linear-gradient(to left top,wheat,white);
	box-shadow: 0px 0px 3px #888;
}
.container > form > div
{
	margin: 10px 0;
	display: flex;
}
.container > form > div > input
{
	flex: 1;
	padding-left: 6px;
	border-radius: 6px;
	border:1px solid gray;
}
.container > form > div > button
{
	flex: 1;
	background-color: lightseagreen;
	color: white;
	text-align: center;
	height: 24px;
	border: none;
	border-radius: 6px;
	letter-spacing: 15px;
}
.container > form > div > button:hover
{
	background-color: blue;
	box-shadow: 0 0 5px #888;
}

效果展示

1573106731441785.png

手抄

1573113536428983.png

1573113570739661.png

布局一个管理后台

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>系统管理后台</title>
<link rel="stylesheet" type="text/css" href="static/css/style4.css">
</head>
<body>
	<header>
		<h1>后台管理系统</h1>
		<p>当前登录：admin</p>
	</header>
	<main>
		<section class="search">
			<label for="search1">查询：</label>
			<input type="text" name="search1" id="search1">
			<button>搜索</button>
		</section>
		<section class="function">
			<button>添加</button>
			<button>删除</button>
			<button>备注</button>
		</section>
		<section class="sys-body">
		<div>
			系统主体
		</div>
		<aside>
			<a href="">统计分析</a>
			<a href="">报表分析</a>
			<a href="">业绩排名</a>
			<a href="">通知发布</a>
			<a href="">角色管理</a>
			<a href="">系统设置</a>
		</aside>
		</section>
	</main>
	<footer>
		<p>版权所有© 2020</p>
	</footer>
</body>
</html>

*{
	margin:0;
	padding: 0;
}
body{
	height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}
a{
	text-decoration: none;
	color: #000;
	font-size: 1.3rem;
	margin: 15px 5px;
	border-bottom: 1px solid white;
}
header{
	box-sizing: border-box;
	height: 60px;
	background:linear-gradient(to right,blue,lightblue);
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}
header>h1{
	color: white;
	text-shadow: 1px 1px 1px black;
	letter-spacing:1px;
}
footer{
	box-sizing: border-box;
	height: 40px;
	background-color: #ccc;
	text-align: center;
}
main{
	flex:1;
	display: flex;
	flex-flow: column nowrap;
	background-color: lightcyan;
	padding-top: 20px;
}
.search,.function{
	align-self: center;
}
.search>button{
	border: none;
	border-radius: 4px;
	padding: 3px 5px;
	letter-spacing: 2px;
	background-color: lightblue;
}
.search > input{
	height: 24px;
	border:1px solid #ccc;
	border-radius: 4px;
	margin-right: 10px;
}
.search>button:hover{
	background-color: cyan;
}
.function{
	position: relative;
	right: 300px;
}
.function > button{
	border: 1px solid #D8BFD8;
	padding: 3px 6px;
	margin:3px 6px;
	letter-spacing: 2px;
	background-color: #FFF0F5;
}
.function>button:hover{
	background-color: thistle;
}
.sys-body{
	display: flex;
	flex: 1;
}
.sys-body > div{
	flex: 1;
	order: 1;
	background-color: lightyellow;
}
aside{
	display: flex;
	width: 150px;
	flex-flow: column nowrap;
	display: flex;
	flex-flow: column nowrap;
	background-color: lightblue;
}

效果展示

1573120076909329.png

总结：通过实战案例，学习过的属性慢慢可以灵活运用，自己做的东西还很简陋。有很多不足需要改进。

Correction status：qualified

Teacher's comments：对于学习者, 做对, 远比做的好看重要
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！