一、课堂介绍了三个小案例, 自己动手写一遍, 再抄一遍
手抄如下:
二、用flex模仿一个后台布局
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站后台首页</title>
<link rel="stylesheet" type="text/css" href="css/admin.css">
</head>
<body>
<nav>
<div><img src="static/images/logo.png"></div>
<div>
<div>
<img src="static/images/pay-icon.png">
<p>收款码</p>
</div>
<div>
<img src="static/images/email-icon.png">
<p>信息</p>
</div>
<div>
<img src="static/images/25561275y3g_540_960.jpg">
<p>创鑫店</p>
</div>
<div>
<img src="static/images/zhangwu_icon_normal.png">
<p>退出 </p>
</div>
</div>
</nav>
<main>
<content>
<div>
<img src="static/images/index-banner-2.png">
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</content>
<aside>
<div><a href=""><img src="static/images/index-house-view-icon.png" alt="">
<p>房源</p>
</img></a></div>
<div><a href=""><img src="static/images/zuwu_icon_normal.png" alt="">
<p>租务</p>
</img></a></div>
<div><a href=""><img src="static/images/pay-icon.png" alt="">
<p>财务</p>
</img></a></div>
<div><a href=""><img src="static/images/house_icon_normal.png" alt="">
<p>设备</p>
</img></a></div>
<div><a href=""><img src="static/images/index-customer-call-icon.png" alt="">
<p>审批</p>
</img></a></div>
<div><a href=""><img src="static/images/jinrong_icon_normal.png" alt="">
<p>金融</p>
</img></a></div>
<div><a href=""><img src="static/images/set_icon_normal.png" alt="">
<p>设置</p>
</img></a></div>
<div><a href=""><img src="static/images/index-more-oper.png" alt="">
<p>出房宝</p>
</img></a></div>
</aside>
</main>
<footer>
CopyRight
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
/* background-color: #ededed; */
color: white;
}
nav {
width: 100%;
height: 60px;
/* background-color: goldenrod; */
border: 1px solid yellow;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
nav > div:first-of-type {
width: 100px;
height: 60px;
/* background-color: gray; */
display: flex;
align-items: center;
justify-content: center;
}
nav > div:last-of-type {
width: 400px;
height: 60px;
/* background-color: orange; */
display: flex;
box-sizing: border-box;
justify-content: flex-end;
}
nav > div:last-of-type > div{
width: 100px;
height: 60px;
}
nav > div:last-of-type > div:first-of-type {
/* display: flex; */
/* align-self: center; */
}
nav > div:last-of-type > div:nth-of-type(2) {
/* background-color: purple; */
}
nav > div:last-of-type div:nth-of-type(3) {
/* background-color: wheat; */
}
nav > div:last-of-type > div:last-of-type {
/* background-color: red; */
}
main {
width: 100%;
height: 1000px;
/* background-color: green; */
border: 1px solid yellow;
display: flex;
}
main > aside {
padding-top: 50px;
width: 200px;
height: 1000px;
background-color: black;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
order: -1;
}
main > content {
width: 100%px;
height: 1000px;
background-color: #yellowgreen;
padding: 5px;
display: flex;
flex-flow: column nowrap;
/* flex: 0 1 auto; */
justify-content: space-between;
}
main > content > div:first-of-type > img {
margin-top: 10px;
/* flex-flow: 0 1 auto; */
width: 100%;
height: 200px;
}
main > content > div:nth-of-type(2) {
margin-top: 10px;
padding: 5px;
width: 100%;
height: 600px;
background-color: wheat;
display: flex;
flex-flow: row nowrap;
}
main > content > div:nth-of-type(2) > div{
width: 300px;
height: 600px;
background-color: wheat;
border: 1px solid red;
display: flex;
flex-flow: row nowrap;
flex-grow: 1;
}
main > content > div:last-of-type {
margin-top: 10px;
width: 100%;
height: 200px;
background-color: skyblue;
display: flex;
flex-flow: column nowrap;
}
main > content > div:last-of-type >div {
width: 100%;
height: 200px;
background-color: skyblue;
}
运行结果如下:
手抄代码: