一、课堂介绍了三个小案例, 自己动手写一遍, 再抄一遍
手抄如下：
二、用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;}
运行结果如下：
手抄代码：
