-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflex.html
164 lines (162 loc) · 4.47 KB
/
flex.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
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>flex布局练习</title>
<meta http-equiv="X-UA-Comatible" content="IE=Edge">
<link rel="stylesheet" href="flex.css">
</head>
<body>
<div class="hd">
<div class="nav">
<img src="https://github.com/Pangzhihui/test/blob/master/%E7%BF%BB%E8%AF%91/test/nav.png?raw=true" alt="图片未加载">
<div class="nav-list">
<ul>
<li>HOME</li>
<li>PRODUCT</li>
<li>SUPPORT</li>
<li>ABOUT</li>
</ul>
</div>
</div>
</div>
<div class="banner">
<div class="bn-1">
<div class="bn-text">
<p class="text-sm">HELLO</p>
<P class="text-sm">WORLD</P>
<P class="text-lg">PRODUCE</P>
</div>
</div>
<div class="bn-2">
</div>
</div>
<div class="ct">
<div class="articles">
<div class="box">
<div class="box-tt">
<p class="box-tt-1">One</p>
<p class="box-tt-2">Level1 Title</p>
</div>
<img src="https://github.com/Pangzhihui/test/blob/master/%E7%BF%BB%E8%AF%91/test/head1.png?raw=true">
<div class="box-ct">
1、昔我往矣,杨柳依依；今我来思,雨雪霏霏.
译：回想当初出征时,杨柳轻轻飘动.如今回家的途中,雪花粉粉飘落. <br/>
2、知我者,谓我心忧,不知我者,谓我何求.
</div>
</div>
<div class="box box-2">
<div class="box-tt">
<p class="box-tt-1">Two</p>
<p class="box-tt-2">Level2 Title</p>
</div>
<img src="https://github.com/Pangzhihui/test/blob/master/%E7%BF%BB%E8%AF%91/test/head2.png?raw=true">
<div class="box-ct">
3、一日不见,如三秋兮.<br>
4、青青子衿,悠悠我心.<br>
译：你的衣领青又青,悠悠思君伤我心.<br>
5、所谓伊人,在水一方.<br>
6、巧笑倩兮,美目盼兮.
</div>
</div>
<div class="box">
<div class="box-tt">
<p class="box-tt-1">Three</p>
<p class="box-tt-2">Level3 Title</p>
</div>
<img src="https://github.com/Pangzhihui/test/blob/master/%E7%BF%BB%E8%AF%91/test/head3.png?raw=true">
<div class="box-ct">
8、他山之石,可以攻玉.<br>
9、靡不有初,鲜克有终. <br>
10、桃之夭夭,灼灼其华.<br>
译：桃树繁茂,桃花灿烂. <br>
</div>
</div>
</div>
<div class="sld">
<img src="https://github.com/Pangzhihui/test/blob/master/%E7%BF%BB%E8%AF%91/test/scroll.png?raw=true">
<p class="sld-tt">山川河流</p>
</div>
<div class="tab">
<div class="tab-hd">
<div class="tab-lst">TABONE</div>
<div class="tab-lst active">TABTWO</div>
<div class="tab-lst">TABTRD</div>
<div class="tab-lst">TABFOR</div>
</div>
<div class="tb">
<p class="tb-tt">Table Caption</p>
<table>
<thead>
<tr>
<th></th>
<th>Free Version</th>
<th>Personal Version</th>
<th>Company Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature A</td>
<td>Bangalore</td>
<td>560001</td>
<td>some text some text some text some text</td>
</tr>
<tr>
<td>Feature B</td>
<td>Mumbai</td>
<td>400003</td>
<td>邮编</td>
</tr>
<tr>
<td>Feature C</td>
<td>Pune</td>
<td>411027</td>
<td>邮编</td>
</tr>
<tr>
<td>Feature D</td>
<td>Pune</td>
<td>411027</td>
<td>邮编</td>
</tr>
<tr>
<td>PRICE</td>
<td class="price-1">Free</td>
<td class="price-2">
<span>$9.99/</span>
<sup>mo</sup>
</td>
<td class="price-3">
<span>$99.99/</span>
<sup>mo</sup>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="info">
<div class="fm">
<select class="fm-sel">
<option disabled selected hidden>select your country</option>
<option>美国</option>
<option>中国</option>
</select>
<select class="fm-sel">
<option disabled selected hidden>select your country</option>
<option>美国</option>
<option>中国</option>
</select>
<div>
<input class="fm-ipt" type="text" placeholder="input your email address">
<button type="button" class="btn">submit</button>
</div>
</div>
</div>
</div>
<div class="ft">
<span>© 2017IFE</span>
</div>
</body>
</html>