-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
138 lines (119 loc) · 6.11 KB
/
index.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
<html>
<head>
<meta charset="utf-8">
<title>华为手机</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/init-animate.css">
</head>
<body>
<div class="box">
<header class="header">
<a href="#screen-1" class="header__logo">手机网上商城</a>
<nav class="header__nav">
<a href="javascript:;" class="header__nav-item header__nav-item_status_active header__nav-item_i_1">外观</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_2">配置</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_3">型号</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_4">说明</a>
<a href="javascript:;" class="header__nav-item header__nav-item_i_5">其他产品</a>
<a href="javascript:;" class="header__nav-item header__nav-item_custom_button">立即购买</a>
<div class="header__nav-item-tip"></div>
</nav>
</header>
<section class="screen-1">
<div class="screen-1__wrap">
<div class="screen-1__heading"><b>华为手机</b> 让你的生活更精彩</div>
</div>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</section>
<section class="screen-2">
<div class="screen-2__wrap">
<div class="screen-2__heading">优美的设计，更令人着迷</div>
<div class="screen-2__subheading">采用受欢迎的设计，让它更加出色。
<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
<div class="screen-2__phone">
<div class="screen-2__point screen-2__point_i_1">高清摄像</div>
<div class="screen-2__point screen-2__point_i_2">超薄机身</div>
<div class="screen-2__point screen-2__point_i_3">大屏显示</div>
<div>
</div>
</section>
<section class="screen-3">
<div class="screen-3__wrap">
<div class="screen-3__heading">外形小巧，功能强大的手机</div>
<div class="screen-3__subheading">采用受欢迎的设计，让它更加出色。
<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</div>
<div class="screen-3__phone"></div>
<div class="screen-3__features">
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_1">
5.7
</span>英寸大屏
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_2">
1200
</span>万像素
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_3">
3D
</span>touch
</div>
<div class="screen-3__features-item">
<span class="screen-3__features-item-number screen-3__features-item_i_4">
A9
</span>处理器
</div>
</div>
</div>
</section>
<section class="screen-4">
<div class="screen-4__wrap">
<div class="screen-4__heading">丰富的手机型号</div>
<div class="screen-4__subheading">找到适合你的手机</div>
<div class="screen-4__type">
<div class="screen-4__type-item screen-4__type-item_i_1">
<div class="screen-4__type-item-name">慕课红</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_2">
<div class="screen-4__type-item-name">土豪金</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_3">
<div class="screen-4__type-item-name">太空灰</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
<div class="screen-4__type-item screen-4__type-item_i_4">
<div class="screen-4__type-item-name">绅士黑</div>
<div class="screen-4__type-item-storage">16G/32G/64G</div>
</div>
</div>
</section>
<section class="screen-5">
<div class="screen-5__wrap">
<div class="screen-5__heading">游戏、学习、拍照、有这一部就够了</div>
<div class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</div>
</div>
<div class="screen-5__back"></div>
</section>
<section class="buy">
<a href="#" class="buy__button">立即购买</a>
</section>
<footer class="footer">
© 2018 weizuhua
</footer>
</div>
<div class="outline">
<a href="javascript:;" class="outline__item outline__item_i_1">外观</a>
<a href="javascript:;" class="outline__item outline__item_i_2">配置</a>
<a href="javascript:;" class="outline__item outline__item_i_3">型号</a>
<a href="javascript:;" class="outline__item outline__item_i_4">说明</a>
<a href="javascript:;" class="outline__item outline__item_i_5">其他</a>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>