Skip to content

Commit 4153d02

Browse files
java-cssjava-css
committed
task10
1 parent fa08bd5 commit 4153d02

File tree

5 files changed

+527
-0
lines changed

5 files changed

+527
-0
lines changed

‎task10/images/arrow.png

1.13 KB
Loading

‎task10/images/qrcode.png

12.7 KB
Loading

‎task10/images/sprite.png

1.45 KB
Loading

‎task10/task10.css

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
@charset "utf-8";
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
ul {
9+
list-style: none;
10+
}
11+
12+
html {
13+
font-size: 62.5%;
14+
font-family: Microsoft YaHei, serif;
15+
font-weight: normal;
16+
}
17+
18+
@media screen and (max-width: 480px) {
19+
html {
20+
font-size: 50%;
21+
}
22+
}
23+
24+
@media screen and (max-width: 400px) {
25+
html {
26+
font-size: 40%;
27+
}
28+
}
29+
/* 未被访问的链接 */
30+
a:link {
31+
color: #999;
32+
text-decoration: none;
33+
}
34+
/* 已被访问过的链接 */
35+
a:visited {
36+
color: #999;
37+
text-decoration: none;
38+
}
39+
/* 鼠标悬浮在上的链接 */
40+
a:hover {
41+
color: #1277dc;
42+
text-decoration: none;
43+
}
44+
/* 鼠标点中激活链接 */
45+
a:active {
46+
color: #999;
47+
text-decoration: none;
48+
}
49+
50+
.header {
51+
overflow: hidden;
52+
background: #1277dc;
53+
}
54+
.header-top {
55+
overflow: hidden;
56+
width: 1200px;
57+
margin: 0 auto;
58+
font-size: 14px;
59+
line-height: 40px;
60+
color: #fff;
61+
vertical-align: middle;
62+
}
63+
64+
.header .header-top ul {
65+
float: right;
66+
}
67+
68+
.header .header-top ul li {
69+
display: inline-block;
70+
width: 55px;
71+
text-align: center;
72+
}
73+
74+
.header .header-top ul li:hover {
75+
width: 100px;
76+
color: #333;
77+
background: #fff;
78+
}
79+
.header-bottom {
80+
overflow: hidden;
81+
82+
background: #f9f9f9;
83+
}
84+
85+
.header-bottom .nav {
86+
overflow: hidden;
87+
width: 1200px;
88+
margin: 0 auto;
89+
}
90+
.header-bottom .nav ul {
91+
float: right;
92+
padding: 28px 0;
93+
}
94+
95+
.header-bottom .nav ul li {
96+
display: inline-block;
97+
margin-left: 60px;
98+
padding: 15px;
99+
font-size: 16px;
100+
color: #333;
101+
border-radius: 5px;
102+
background: #fff;
103+
104+
}
105+
106+
.header-bottom .nav ul li:hover {
107+
background: #1277dc;
108+
}
109+
110+
/*main*/
111+
.main {
112+
overflow: hidden;
113+
width: 1200px;
114+
margin: 0 auto;
115+
}
116+
117+
.main .step {
118+
overflow: hidden;
119+
font-size: 0;
120+
padding: 50px 0;
121+
}
122+
.step ul {
123+
float: right;
124+
}
125+
126+
.step ul li {
127+
display: inline-block;
128+
text-align: center;
129+
width: 160px;
130+
color: #ccc;
131+
border-top: 3px solid #ccc;
132+
}
133+
134+
.step p {
135+
position: relative;
136+
top: -12px;
137+
left: 70px;
138+
width: 20px;
139+
height: 20px;
140+
text-align: center;
141+
font-size: 16px;
142+
color: #fff;
143+
background: #ccc;
144+
border-radius: 50%;
145+
}
146+
147+
.step h4 {
148+
padding: 10px 0;
149+
font-size: 18px;
150+
}
151+
152+
.main .step ul li.step1 {
153+
color: #ff7f00;
154+
border-color: #ff7f00;
155+
}
156+
157+
.main .step ul li.step1 p {
158+
color: #fff;
159+
background: #ff7f00;
160+
}
161+
162+
.main .guidance {
163+
margin:10px 0;
164+
padding-left: 10px;
165+
font-size: 22px;
166+
line-height: 22px;
167+
border-left: 3px solid #1277dc;
168+
}
169+
170+
.main .type,
171+
.main .size,
172+
.main .texture {
173+
padding: 10px 0;
174+
font-size: 18px;
175+
color: #1277dc;
176+
background:#f3f3f3;
177+
}
178+
179+
.main .type1,
180+
.main .size1,
181+
.main .size2,
182+
.main .texture1 {
183+
padding: 20px;
184+
font-size: 18px;
185+
color: #666;
186+
background: #fbfcff;
187+
border:1px solid #e7e7e7e;
188+
}
189+
190+
.main .size1 {
191+
border-bottom: none;
192+
}
193+
194+
.main .size2 {
195+
border-top: none;
196+
}
197+
198+
.main label {
199+
margin-right: 50px;
200+
}
201+
202+
.main i {
203+
display: inline-block;
204+
margin: 5px 10px;
205+
vertical-align: middle;
206+
background-image: url("images/sprite.png");
207+
}
208+
.main .type i {
209+
width: 23px;
210+
height: 19px;
211+
background-position: -28px 0;
212+
}
213+
.main .size i {
214+
width: 26px;
215+
height: 24px;
216+
background-position: 0 -30px;
217+
}
218+
.main .texture i {
219+
width: 19px;
220+
height: 24px;
221+
background-position: -28px -26px;
222+
}
223+
224+
.main .btn {
225+
box-sizing: border-box;
226+
margin: 0 auto;
227+
text-align: center;
228+
border:1px solid #e7e7e7;
229+
border-top: none;
230+
}
231+
232+
.main .btn button {
233+
margin: 50px 0 40px;
234+
padding: 10px 20px;
235+
font-size: 24px;
236+
color: #fff;
237+
background: #e34f4f;
238+
border-radius: 5px;
239+
}
240+
241+
.main .box {
242+
width: 70px;
243+
height: 30px;
244+
}
245+
246+
.main .hidden {
247+
opacity: 0;
248+
position: absolute;
249+
}
250+
251+
.main input[type=radio] + span {
252+
box-sizing: border-box;
253+
display: inline-block;
254+
width: 14px;
255+
height: 14px;
256+
margin: 0 10px;
257+
border:1px solid black;
258+
border-radius: 7px;
259+
}
260+
261+
.main input[type=radio]:checked + span {
262+
box-sizing: border-box;
263+
display: inline-block;
264+
width: 16px;
265+
height: 16px;
266+
margin: 0 10px;
267+
border: solid 6px #1277dc;
268+
border-radius: 8px;
269+
}
270+
271+
.main .select1,
272+
.main .select3 {
273+
float: right;
274+
margin-top: -7px;
275+
}
276+
277+
.main .select2 {
278+
float: right;
279+
margin-top: -45px;
280+
}
281+
282+
.main select {
283+
padding: 10px 35px 10px 15px;
284+
font-size: 14px;
285+
color: #a9a9a9;
286+
border: solid 1px #e8e8e8;
287+
appearance:none;
288+
-moz-appearance:none;
289+
-webkit-appearance:none;
290+
background: url(images/arrow.png) 90% center no-repeat;
291+
}
292+
293+
.main select::-ms-expand {
294+
display: none;
295+
}
296+
297+
.footer {
298+
overflow: hidden;
299+
margin-top: 40px;
300+
padding-top: 50px;
301+
font-size: 14px;
302+
color: #999;
303+
background: #f9f9f9;
304+
}
305+
306+
.footer .footer-top {
307+
overflow: hidden;
308+
width: 1200px;
309+
margin: 0 auto;
310+
}
311+
312+
.footer .footer-top .footer-top-left {
313+
float: left;
314+
width: 40%;
315+
padding-bottom: 120px;
316+
font-size: 18px;
317+
}
318+
319+
.footer .footer-top .footer-top-middle {
320+
float: left;
321+
width: 30%;
322+
}
323+
324+
.footer .footer-top .footer-top-middle ul li {
325+
display: inline-block;
326+
margin: 10px;
327+
}
328+
329+
.footer .footer-top .footer-top-middle ul li span {
330+
color: #1277dc;
331+
}
332+
333+
.footer .footer-top .footer-top-right {
334+
float: left;
335+
}
336+
337+
.footer .footer-top .footer-top-right ul {
338+
display: inline-block;
339+
}
340+
341+
.footer .footer-top .footer-top-right ul li {
342+
padding: 10px;
343+
}
344+
345+
.footer .footer-bottom {
346+
padding: 10px 0;
347+
font-size: 12px;
348+
text-align: center;
349+
color: #fff;
350+
background: #1277dc;
351+
}
352+
353+
354+
355+
356+
357+
358+
359+
360+
361+

0 commit comments

Comments
 (0)