Skip to content

Commit c512963

Browse files
anbanganbang
committed
表达式
1 parent 3ceaa9f commit c512963

6 files changed

Lines changed: 976 additions & 56 deletions

File tree

‎test-file.html‎

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,54 @@
11
<!doctype html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
58
<title>Document</title>
6-
<link rel="stylesheet" href="test.css"/>
7-
<style>
8-
#test{
9-
width: 200px;height: 200px;background-color: #002d32;
10-
position: absolute;
11-
top: 300px;
12-
left: 20px;
13-
}
14-
</style>
9+
<link rel="stylesheet" href="./test.css">
1510
</head>
16-
<body>
17-
<div id="test">2222222222</div>
11+
<body class="flex-wrap col-flex">
12+
<header class="midCenter flex-wrap row-flex">我是标题flex布局</header>
1813

19-
<script>
14+
<div class="page flex-wrap col-flex">
15+
<div class="scroll-wrap">
16+
<section class="midCenter flex-wrap" id="banner">
17+
<div>我是banner</div>
18+
</section>
2019

21-
var a;
22-
// a 的值是 undefined
23-
console.log("The value of a is " + a);
20+
<section id="quirk" class="flex-wrap row-flex">
21+
<div>2</div>
22+
<div class="flex-wrap col-flex">
23+
<div>3</div>
24+
<div>4</div>
25+
</div>
26+
</section>
2427

25-
// Uncaught ReferenceError: b is not defined
26-
// console.log("The value of b is " + b);
28+
<section id="four-col" class="flex-wrap row-flex">
29+
<div></div>
30+
<div></div>
31+
<div></div>
32+
<div></div>
33+
</section>
2734

28-
// c 的值是 undefined
29-
console.log("The value of c is " + c);
30-
var c;
35+
<section id="two-col" class="flex-wrap row-flex">
36+
<div></div>
37+
<div></div>
38+
</section>
3139

32-
// Uncaught ReferenceError: x is not defined
33-
console.log("The value of x is " + x);
34-
let x;
35-
</script>
40+
<section id="three-col" class="flex-wrap row-flex">
41+
<div></div>
42+
<div></div>
43+
<div></div>
44+
</section>
45+
</div>
46+
</div>
47+
<footer class="flex-wrap row-flex">
48+
<div></div>
49+
<div></div>
50+
<div></div>
51+
<div></div>
52+
</footer>
3653
</body>
37-
</html>
54+
</html>

‎test.css‎

Lines changed: 172 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,176 @@
1-
body{ background-color: #008CD7; }
1+
html{ height:100%; }
2+
body{ background: #fff; margin:0; padding:0; width: 100%; height: 100%; }
23

3-
.test-min{
4-
min-width: 140px;padding: 0 15px;
4+
/** 水平伸缩容器**/
5+
.row-flex{
6+
/*-moz-box-orient: horizontal;
7+
-webkit-box-orient: horizontal;
8+
-moz-box-direction: normal;
9+
-webkit-box-direction: normal;
10+
-moz-box-lines: multiple;
11+
-webkit-box-lines: multiple;
12+
-ms-flex-flow: row wrap;
13+
-webkit-flex-flow: row wrap;*/
14+
flex-flow: row wrap;
515
}
616

17+
/** 垂直伸缩容器**/
18+
.col-flex{
19+
/* -moz-box-orient: vertical;
20+
-webkit-box-orient: vertical;
21+
-moz-box-direction: normal;
722
8-
.tabs > li { float: left; border: 1px solid #e7e7eb; margin-left: -1px; border-bottom: 3px solid #e7e7e7; text-align: center; min-width: 170px;padding: 0 10px;}
23+
-moz-box-lines: multiple;
24+
-webkit-box-lines: multiple;
25+
-webkit-flex-flow: column wrap;
26+
-ms-flex-flow: column wrap;*/
27+
flex-flow: column wrap;
28+
}
29+
30+
/** 伸缩容器**/
31+
.flex-wrap{
32+
/** 各种版本兼容**/
33+
/*display: -webkit-box;
34+
display: -moz-box;
35+
display: -ms-flexbox;
36+
display: -webkit-flex;*/
37+
display: flex;
38+
}
39+
40+
/** 垂直居中**/
41+
.midCenter{
42+
/** 垂直居中核心**/
43+
/*-moz-box-pack: center;
44+
-webkit-box-pack: center;
45+
box-pack:center;
46+
-moz-box-align: center;
47+
-webkit-box-align: center;
48+
box-align: center;
49+
box-pack:center;
50+
-ms-flex-pack:center;
51+
display: -ms-flexbox;
52+
-ms-flex-align:center;*/
53+
justify-content:center;
54+
align-items: center;
55+
}
56+
57+
/** 占位器**/
58+
.page{
59+
/*-webkit-box-flex: 1;
60+
-moz-box-flex: 1;
61+
-ms-flex: 1;
62+
-webkit-flex: 1;*/
63+
flex: 1;
64+
overflow: hidden;
65+
}
66+
67+
/** 真正滚动**/
68+
.scroll-wrap{
69+
position: relative;
70+
width: 100%;
71+
height: 100%;
72+
overflow: scroll;
73+
-webkit-box-flex: 1;
74+
-moz-box-flex: 1;
75+
-webkit-flex: 1;
76+
-ms-flex: 1;
77+
flex: 1;
78+
}
79+
80+
/** 头和尾巴**/
81+
header,footer{
82+
background:#f7f7f7;
83+
height:44px;
84+
}
85+
86+
footer>div{
87+
-webkit-box-flex: 1;
88+
-moz-box-flex: 1;
89+
-ms-flex: 1;
90+
-webkit-flex: 1;
91+
flex: 1;
92+
border:1px solid #666;
93+
margin:4px;
94+
}
95+
96+
97+
98+
section{
99+
margin:3px 5px;
100+
}
101+
102+
/** 真正设置高度 **/
103+
#banner{
104+
border:2px solid #999;
105+
margin:1px;
106+
height:100px;
107+
}
108+
#quirk,#four-col{
109+
height:150px;
110+
}
111+
#three-col,#two-col{
112+
height:100px;
113+
}
114+
115+
116+
/** 内部组件**/
117+
#four-col>div,#three-col>div,#two-col>div{
118+
-webkit-box-flex: 1;
119+
-moz-box-flex: 1;
120+
-ms-flex: 1;
121+
-webkit-flex: 1;
122+
flex: 1;
123+
}
124+
#four-col>div{
125+
background: #aaebbe;
126+
margin:0 2px;
127+
}
128+
#three-col>div{
129+
background: #8f82bc;
130+
margin:0 2px;
131+
}
132+
#two-col>div{
133+
background: #f7baba;
134+
margin:0 2px;
135+
}
136+
137+
#quirk>div{
138+
margin:0 2px;
139+
}
140+
141+
#quirk>div:nth-child(1){
142+
background: #b9e2ee;
143+
-webkit-box-flex: 200;
144+
-moz-box-flex: 200;
145+
-ms-flex: 200;
146+
-webkit-flex: 200;
147+
flex: 200;
148+
}
149+
150+
#quirk>div:nth-child(2){
151+
-webkit-box-flex: 175;
152+
-moz-box-flex: 175;
153+
-ms-flex: 175;
154+
-webkit-flex: 175;
155+
flex: 175;
156+
157+
}
158+
#quirk>div:nth-child(2)>div:nth-child(1){
159+
background: #b9e2ee;
160+
161+
-webkit-box-flex: 60;
162+
-moz-box-flex: 60;
163+
-ms-flex: 60;
164+
-webkit-flex: 60;
165+
flex: 60;
166+
margin-bottom: 4px;
167+
}
168+
#quirk>div:nth-child(2)>div:nth-child(2){
169+
background: #b9e2ee;
170+
171+
-webkit-box-flex: 30;
172+
-moz-box-flex: 30;
173+
-ms-flex: 30;
174+
-webkit-flex: 30;
175+
flex: 30;
176+
}

0 commit comments

Comments
 (0)