Skip to content

Commit dba49b7

Browse files
anbanganbang
committed
MODI
1 parent 1c5cca5 commit dba49b7

4 files changed

Lines changed: 50 additions & 211 deletions

File tree

‎test-file.html‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,14 @@
88
<title>Document</title>
99
<link rel="stylesheet" href="./test.css">
1010
</head>
11-
<body class="flex-wrap col-flex">
12-
<header class="midCenter flex-wrap row-flex">我是标题flex布局</header>
13-
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>
19-
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>
27-
28-
<section id="four-col" class="flex-wrap row-flex">
29-
<div></div>
30-
<div></div>
31-
<div></div>
32-
<div></div>
33-
</section>
34-
35-
<section id="two-col" class="flex-wrap row-flex">
36-
<div></div>
37-
<div></div>
38-
</section>
39-
40-
<section id="three-col" class="flex-wrap row-flex">
41-
<div></div>
42-
<div></div>
43-
<div></div>
44-
</section>
45-
</div>
11+
<body>
12+
<div class="flex-demo">
13+
<ul class="flex-container second">
14+
<li class="flex-item">1</li>
15+
<li class="flex-item">2</li>
16+
<li class="flex-item">3</li>
17+
<li class="flex-item">4</li>
18+
</ul>
4619
</div>
47-
<footer class="flex-wrap row-flex">
48-
<div></div>
49-
<div></div>
50-
<div></div>
51-
<div></div>
52-
</footer>
5320
</body>
5421
</html>

‎test.css‎

Lines changed: 24 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,31 @@
1-
html{ height:100%; }
2-
body{ background: #fff; margin:0; padding:0; width: 100%; height: 100%; }
3-
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;
15-
}
16-
17-
/** 垂直伸缩容器**/
18-
.col-flex{
19-
/* -moz-box-orient: vertical;
20-
-webkit-box-orient: vertical;
21-
-moz-box-direction: normal;
22-
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;*/
1+
ul { padding: 0; }
2+
li { list-style: none; }
3+
.flex-container {
374
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;
5+
background: deepskyblue;
706
width: 100%;
717
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;
8+
margin: 5px auto;
949
}
9510

9611

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;
12+
.flex-container.second {
13+
flex-flow: row wrap;
14+
-webkit-flex-flow: row wrap;
15+
}
16+
.flex-item {
17+
background: tomato;
18+
padding: 5px;
19+
/*width: 50%;
20+
height: 50%;*/
21+
flex-grow:100;
22+
margin: 5px;
23+
line-height: 80px;
24+
color: white;
25+
font-weight: bold;
26+
font-size: 2em;
27+
text-align: center;
28+
}
29+
.flex-demo {
30+
display: flex;
17631
}

‎表达式和运算符/README.MD‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,15 @@ ECMAScript里用于操作数据值的运算符也叫操作符，只是叫法不
6565
console.log(targetTime);
6666
//思考：等于多少天，多少小时，多少分，多少秒
6767

68+
##### 操作数类型和结果类型
69+
70+
运算符通常会根据需要对操作数进行类型转换；比如【*】【/】的时候，可以把字符串转为数值；
71+
72+
console.log("5"+"3");//53
73+
console.log("5"-"3");//2
74+
console.log("5"*"3");//15
75+
console.log("15"/"3");//5
76+
6877

6978
##### 赋值操作符
7079

@@ -415,6 +424,10 @@ ECMAScript里用于操作数据值的运算符也叫操作符，只是叫法不
415424
trueOrFalse([]);
416425
trueOrFalse(1);
417426

427+
三元/三目是根据操作数的个数来分的，比如 a-b，计算2个数属于二元元算数，而-b就是一元运算符（将操作数b求负数，只操作b这个一个数）；而?:是计算三个数的，所以叫三元运算符;
428+
429+
而三目是三元的另外一种叫法
430+
418431
上面的利用三元运算符来判断值的真假；
419432

420433
- typeof，类型判定运算符

‎表达式和运算符/算术运算符.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@
3131
num%3;
3232
console.log(num);
3333

34-
34+
//操作数类型和结果类型
35+
console.log("5"+"3");//53
36+
console.log("5"-"3");//2
37+
console.log("5"*"3");//15
38+
console.log("15"/"3");//5
3539

3640

3741

0 commit comments

Comments
 (0)