看到很多人在这过程中想要源代码,但又找不到,在这里给大家总结一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex</title>
<style>
body {
margin: 0;
height: 100vh;
background-color: rgba(252, 249, 249, 0.644);
}.yinYing {
box-shadow: rgb(0 0 0 / 20%) 0px 2px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;
}
.flex {
display: flex;
}
.baiSe {
background-color: rgb(211, 210, 210);
}
.flex1 {
flex: 1;
}.column {
flex-direction: column;
}
.mg8 {
margin: 8px;
}
.mgr8 {
margin-right: 8px;
}
.mgt8 {
margin-top: 8px;
}
.daoHang{
padding: 10px;
border-bottom: 1px solid rgb(145, 143, 143);font-size: 14px;
color: #666;
}
</style>
</head>
<body class="flex">
<!--侧边栏-->
<div style="width: 200px;z-index: 2" class="baiSe yinYing">
<div style="padding: 10px;align-items:center;justify-content: center;border-bottom: 1px solid #999;" class="flex">
<img src="头像.jpg" width="40px" height="40px"
/>
<div style="margin: 10px;">Choice</div>
</div>
<div class="flex1">
<div class="主="></div>
<div class="导航"></div>
<div class="导航"></div>
<div class="导航"></div>
</div>
</div>
<!--主区域-->
<div class="flex1 flex column">
<!--头部栏-->
<div style="height: 60px;z-index: 1" class="baiSe yinYing"></div>
<!--内容区-->
<div class="flex1 flex"><!--左区-->
<div style="flex: 3" class="flex column mg8">
<!--数据区-->
<div class="flex">
<!--数据块-->
<div style="height: 100px" class="flex1 baiSe mgr8 yinYing"></div>
<div style="height: 100px" class="flex1 baiSe mgr8 yinYing"></div>
<div style="height: 100px" class="flex1 baiSe mgr8 yinYing"></div>
<div style="height: 100px" class="flex1 baiSe yinYing"></div>
</div>
<!--列表区-->
<div class="flex column"><!--列表项-->
<div style="height: 160px" class="baiSe mgt8 yinYing"></div>
<div style="height: 160px" class="baiSe mgt8 yinYing"></div>
<div style="height: 160px" class="baiSe mgt8 yinYing"></div>
</div>
</div>
<!--右区-->
<div style="flex: 1" class="flex column mgr8 mgt8"></div>
<!--提示区-->
<div style="height: 150px" class="baiSe yinYing"></div>
<!--消息区-->
<div style="height: 300px" class="baiSe mgt8 yinYing"></div>
</div>
</div>
</body>
</html>
如碰到问题请反馈给我!