Skip to content

Commit bcb6469

Browse files
zhouxiaotianzhouxiaotian
committed
20170808
1 parent dfb8363 commit bcb6469

5 files changed

Lines changed: 200 additions & 0 deletions

File tree

‎WEEK3/DAY1/css/index.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
html, body {
2+
width: 100%;
3+
overflow-x: hidden;
4+
background: #F4F4F4;
5+
6+
font-size: 14px;
7+
color: #555;
8+
}
9+
10+
.container {
11+
margin: 20px auto;
12+
width: 1200px;
13+
overflow: hidden;
14+
}
15+
16+
/*--MENU--*/
17+
.menu {
18+
background: #FFF;
19+
}
20+
21+
.menu span, .menu a {
22+
float: left;
23+
}
24+
25+
.menu span {
26+
width: 90px;
27+
line-height: 50px;
28+
text-align: center;
29+
}
30+
31+
.menu a {
32+
padding: 0 15px;
33+
line-height: 50px;
34+
color: #999;
35+
}
36+
37+
.menu a:hover {
38+
color: #E01D20;
39+
}
40+
41+
/*--LIST--*/
42+
.mallList {
43+
width: 1210px;
44+
margin-top: 20px;
45+
}
46+
47+
.mallList li {
48+
float: left;
49+
background: #FFF;
50+
margin: 0 10px 10px 0;
51+
}
52+
53+
.mallList li a {
54+
display: block;
55+
padding: 0 16px;
56+
width: 194px;
57+
border: 3px solid transparent;
58+
overflow: hidden;
59+
}
60+
61+
.mallList li a img {
62+
display: block;
63+
width: 100%;
64+
}
65+
66+
.mallList li a span {
67+
display: block;
68+
line-height: 40px;
69+
color: #999;
70+
}
71+
72+
.mallList li a .price {
73+
color: #555;
74+
}
75+
76+
.mallList li a:hover {
77+
border-color: #E01D20;
78+
}

‎WEEK3/DAY1/css/reset.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎WEEK3/DAY1/img/1.jpg‎

11.4 KB
Loading

‎WEEK3/DAY1/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>华为商城-列表排序</title>
6+
7+
<!--import css-->
8+
<link rel="stylesheet" href="css/reset.min.css">
9+
<link rel="stylesheet" href="css/index.css">
10+
</head>
11+
<body>
12+
<div class="container">
13+
<!--MENU-->
14+
<div class="menu clearfix">
15+
<span>排序:</span>
16+
<a href="javascript:;">
17+
上架时间
18+
<i class="up"></i>
19+
<i class="down"></i>
20+
</a>
21+
<a href="javascript:;">
22+
价格
23+
<i class="up"></i>
24+
<i class="down"></i>
25+
</a>
26+
<a href="javascript:;">
27+
热度
28+
<i class="up"></i>
29+
<i class="down"></i>
30+
</a>
31+
</div>
32+
33+
<!--LIST-->
34+
<ul class="mallList clearfix" id="mallItem">
35+
<li><a href="#">
36+
<img src="img/1.jpg" alt="">
37+
<span class="title">华为运动蓝牙耳机</span>
38+
<span class="price">￥422</span>
39+
</a></li>
40+
</ul>
41+
</div>
42+
43+
<!--import js-->
44+
<script src="js/utils.js"></script>
45+
<script src="js/index.js"></script>
46+
</body>
47+
</html>

‎WEEK3/DAY1/json/product.json‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
[
2+
{
3+
"id": 1,
4+
"title": "华为运动蓝牙耳机",
5+
"price": 499,
6+
"time": "2017-03-15",
7+
"hot": 198,
8+
"img": "img/1.jpg"
9+
},
10+
{
11+
"id": 2,
12+
"title": "华为碎屏服务宝",
13+
"price": 129,
14+
"time": "2017-02-08",
15+
"hot": 25,
16+
"img": "img/1.jpg"
17+
},
18+
{
19+
"id": 3,
20+
"title": "华为最牛逼的产品三",
21+
"price": 895,
22+
"time": "2017-01-25",
23+
"hot": 568,
24+
"img": "img/1.jpg"
25+
},
26+
{
27+
"id": 4,
28+
"title": "华为最牛逼的产品四",
29+
"price": 1895,
30+
"time": "2016-12-30",
31+
"hot": 20000,
32+
"img": "img/1.jpg"
33+
},
34+
{
35+
"id": 5,
36+
"title": "华为最牛逼的产品五",
37+
"price": 3587,
38+
"time": "2016-01-30",
39+
"hot": 1032654,
40+
"img": "img/1.jpg"
41+
},
42+
{
43+
"id": 6,
44+
"title": "华为最牛逼的产品六",
45+
"price": 992,
46+
"time": "2018-01-01",
47+
"hot": 1,
48+
"img": "img/1.jpg"
49+
},
50+
{
51+
"id": 7,
52+
"title": "华为最牛逼的产品七",
53+
"price": 564,
54+
"time": "2017-02-19",
55+
"hot": 400,
56+
"img": "img/1.jpg"
57+
},
58+
{
59+
"id": 8,
60+
"title": "华为最牛逼的产品八",
61+
"price": 420,
62+
"time": "2017-01-25",
63+
"hot": 240,
64+
"img": "img/1.jpg"
65+
},
66+
{
67+
"id": 9,
68+
"title": "华为最牛逼的产品九",
69+
"price": 12,
70+
"time": "2014-01-01",
71+
"hot": 12345678,
72+
"img": "img/1.jpg"
73+
}
74+
]

0 commit comments

Comments
 (0)