-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (154 loc) · 5.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<meta name="description" content="Flex布局演示。" />
<style>
body{
margin:0;
height:100vh;
background-color: #eee;
}
/* *{
border: 1px solid black;
} */
.yinying{
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.flex{
display: flex;
}
.baise{
background-color: white;
}
.flex1{
flex: 1;
}
.column{
flex-direction: column;
}
.mg8{
margin: 8px;
}
.mgr8{
margin-right: 8px;
}
.mgt8{
margin-top: 8px;
}
.daohang{
padding: 10px 20px;
border-bottom: 2px solid rgb(204, 204, 204);
font-size: 16px;
color:#666
}
/* 当屏幕宽度宽度小于 600 像素，则1.隐藏侧边栏2.内容区竖向排列3.数据区竖向排列 4.数据块上下0，左右8px
5.flex:auto利用剩余空间，各自的尺寸按照各自内容进行分配（多用于内容动态适配） */
@media (max-width: 600px) {
.cebian {
display:none;
}
.neirong{
flex-direction: column;
}
.shujuqu{
flex-direction: column;
}
.youqu{
margin-left: 8px;
}
.shuju{
margin:0 8px;
flex: auto;
}
}
/*隐藏滚动条 .neirong::-webkit-scrollbar{display:none;} */
</style>
</head>
<body class="flex">
<!-- 侧边栏 -->
<div style="width: 200px;z-index: 2;" class="baise yinying cebian">
<!-- 头像栏 -->
<div
style="padding:5px;
justify-content:center; align-items:center;
border-bottom: 1px solid gray;"
class="flex"
>
<!-- Lighthouse中只有最佳做法78分，其余均满分。
原因：用了第三方图像转为链接的平台 -->
<img
src="https://pic.imgdb.cn/item/66695edcd9c307b7e97fb431.webp"
alt="头像" width="50px" height="50px" >
<div style="margin-left: 10px;">昵称</div>
</div>
<!-- 导航栏 -->
<div class="flex1">
<div style="height:30px;" class="daohang">导航</div>
<div style="height:30px;" class="daohang">导航</div>
<div style="height:30px;" class="daohang">导航</div>
<div style="height:30px;" class="daohang">导航</div>
<div style="height:30px;" class="daohang">导航</div>
<div style="height:30px;" class="daohang">导航</div>
</div>
</div>
<!-- 主区域 -->
<div class="flex flex1 column">
<!-- 头部栏 -->
<div style="height: 60px; z-index: 1;" class="baise yinying"></div>
<!-- 内容栏 -->
<div style="overflow:auto" class="flex flex1 neirong">
<!-- overflow:auto能让子项只在内容栏滚动；但这样会导致头部栏被压在下面，所以用z-index置于内容栏上层;
为了避免侧边栏被头部栏压着所以值2>1 -->
<!-- 左区 -->
<div style="flex: 3;" class="flex column mg8">
<!-- 数据区 -->
<div class="flex shujuqu">
<!-- 数据块 -->
<div style="height:100px;" class="shuju flex1 baise yinying mgr8">数据内容哦</div>
<div style="height:100px;" class="shuju flex1 baise yinying mgr8">
<h3 class="mg8">具体数据</h3>
<p>123456789</p>
</div>
<div style="height:100px;" class="shuju flex1 baise yinying mgr8"></div>
<div style="height:100px;" class="shuju flex1 baise yinying "></div>
</div>
<!-- 列表区 -->
<div class="flex column">
<!-- 列表项 -->
<div style="height:170px;" class="baise yinying mgt8"></div>
<div style="height:170px;" class="baise yinying mgt8">
<p>某某区域<b>今年销售</b>人员</p>
</div>
<div style="height:170px;" class="baise yinying mgt8"></div>
<div style="height:170px;" class="baise yinying mgt8"></div>
<div style="height:170px;" class="baise yinying mgt8"></div>
</div>
</div>
<!-- 右区 -->
<div style="flex: 1;" class="youqu column mgr8 mgt8">
<!-- 提示区 -->
<div style="height: 150px;" class="baise yinying">
提示内容
</div>
<!-- 消息区 -->
<div style="height: 400px;" class="baise flex1 yinying mgt8 breakword">
消息内容消息内容消息内容消息内容
<p>未读数</p>
</div>
</div>
</div>
</div>
<!-- 若用户的浏览器支持Service Worker功能，当网页加载完成后，会加载sw.js文件，开启pwa功能 -->
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("sw.js");
});
}
</script>
</body>
</html>