![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
批改状态：合格
老师批语：完成的相当出色
收藏
收藏
收藏
弹性布局(Flex box)创建手机端通用布局
HTML代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> 弹性布局(Flex box)创建手机端通用布局 </title> </head> <body> /* ---- 顶部 页头---- */ <header> PHP 你开始学了吗？ </header> /* ------ 主要内容区域 ------*/ <main> 这里是内容 </main> /* ---- 底部页脚 ---- */ <footer> <a href="">网站主页</a> <a href="">论坛社区</a> <a href="">课程视频</a> </footer> </body> </html>
CSS代码
*{
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
a {
color: #F2F2F2;
text-decoration: none;
}
a:hover{
color: #fff725;
}
main {
flex:1;
background: #F2F2F2;
border-top: 1px solid #587d62;
border-bottom: 1px solid #587d62;
box-sizing: border-box;
}
header,footer {
box-sizing: border-box;
padding: 0 15px;
background: #389bff;
display: flex;
flex-flow: row nowrap;
height: 40px;
justify-content: left;
align-items: center;
color: #FFFFFF;
}
footer {
justify-content: center;
padding: 0;
}
footer > a{
display: flex;
flex-flow: row nowrap;
flex: 1;
border-right: 1px dashed #6b9bb9;
justify-content: center;
align-items: center;
}
footer > a:last-child {
border: none;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 弹性布局(Flex box)创建手机端通用布局 </title>
<style>
*{
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
a {
color: #F2F2F2;
text-decoration: none;
}
a:hover{
color: #fff725;
}
main {
flex:1;
background: #F2F2F2;
border-top: 1px solid #587d62;
border-bottom: 1px solid #587d62;
box-sizing: border-box;
}
header,footer {
box-sizing: border-box;
padding: 0 15px;
background: #389bff;
display: flex;
flex-flow: row nowrap;
height: 40px;
justify-content: left;
align-items: center;
color: #FFFFFF;
}
footer {
justify-content: center;
padding: 0;
}
footer > a{
display: flex;
flex-flow: row nowrap;
flex: 1;
border-right: 1px dashed #6b9bb9;
justify-content: center;
align-items: center;
}
footer > a:last-child {
border: none;
}
</style>
</head>
<body>
<header>
PHP 你开始学了吗？
</header>
<main>
这里是内容
</main>
<footer>
<a href="">网站主页</a>
<a href="">论坛社区</a>
<a href="">课程视频</a>
</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 弹性布局(Flex box)圣杯布局 </title>
<style>
*{
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
a {
color: #F2F2F2;
text-decoration: none;
}
a:hover{
color: #fff725;
}
main {
flex:1;
background: #F2F2F2;
border-top: 1px solid #587d62;
border-bottom: 1px solid #587d62;
box-sizing: border-box;
display: flex;
}
aside {
width: 200px;
background: #FD482C;
box-sizing: border-box;
}
aside:first-of-type {
background: #2F4056;
order: -1;
}
article {
flex: 1;
background: #c1b9ed;
}
header,footer {
box-sizing: border-box;
padding: 0 15px;
background: #389bff;
display: flex;
flex-flow: row nowrap;
height: 40px;
justify-content: left;
align-items: center;
color: #FFFFFF;
}
footer {
justify-content: center;
padding: 0;
background: #5FB878;
}
footer > a{
display: flex;
flex-flow: row nowrap;
flex: 1;
border-right: 1px dashed #6b9bb9;
justify-content: center;
align-items: center;
}
footer > a:last-child {
border: none;
}
</style>
</head>
<body>
<header>
头部
</header>
<main>
<article>
中间主体内容部分
</article>
<aside>
左边栏
</aside>
<aside>
右边栏
</aside>
</main>
<footer>
这是底部
</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 弹性布局(Flex box)创建登录页面 </title>
<style>
*{
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #0ea2ff, #49a2b8,#000);
}
h2 {
color: #FFF;
font-weight: lighter;
text-align: left;
margin-bottom: 15px;
border-bottom: 1px solid #92B8B1;
height: 40px;
font-size: 20px;
}
.box {
width: 350px;
padding: 15px;
box-sizing: border-box;
position: relative;
top: -100px;
border: 2px solid #5fc864;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.5s;
}
.box > form {
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
transition: all .5s;
}
.box:hover {
box-shadow: 1px 1px 50px #2F4056;
background: linear-gradient(to bottom, #57759b, #007DDB,#F6F6F6);
border-color: #dbb100;
}
form >div {
display: flex;
margin: 10px 0;
height: 40px;
}
form >div >lable {
line-height: 30px;
color: #fff;
}
form > div >input {
flex: 1;
height: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #fff;
padding: 0 15px;
}
form > div >input:focus {
color: #eb7350;
}
form > div >button {
flex: 1;
background: #8bbb85;
border: none;
color: #FFFFFF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
}
.box:hover>form > div >button {
background: linear-gradient(to top, #2F4056, #007DDB,#F6F6F6);
}
</style>
</head>
<body>
<div class="box">
<h2>用户登录</h2>
<form action="">
<div>
<lable for="name">账号：</lable>
<input type="text" name="name" id="name" placeholder="admin" autofocus>
</div>
<div>
<lable for="pwd">密码：</lable>
<input type="password" name="name" id="pwd" placeholder="">
</div>
<div>
<button onclick="return false;">登录</button>
</div>
</form>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后台页面布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 1rem;
}
body {
display: flex;
background: #F2F2F2;
flex-flow: column nowrap;
}
nav {
box-sizing: border-box;
padding: 0 15px;
height: 50px;
background: #000000;
color: #FFF;
display: flex;
align-items: center;
}
main {
display: flex;
height: 100vh;
flex-flow: row nowrap;
background: firebrick;
}
main > aside {
width: 200px;
background: #228B22;
}
main > article {
flex: 1;
background: #CCCCCC;
display: flex;
}
main > article > iframe {
display: flex;
flex: 1;
border: 0;
}
</style>
</head>
<body>
<nav>
这里是页头
</nav>
<main>
<aside>
这里是左侧
</aside>
<article>
<iframe src="https://www.php.cn"></iframe>
</article>
</main>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
