-
Notifications
You must be signed in to change notification settings - Fork 208
/
FlexLayout.html
163 lines (163 loc) · 5.26 KB
/
FlexLayout.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>自适应布局导航栏</title>
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
box-sizing: border-box;
}
.services-section {
background: #333;
background-size: cover;
padding: 60px 0;
}
.inner-width {
width: 100%;
max-width: 1200px;
margin: auto;
padding: 0 20px;
overflow: hidden;
}
.section-title {
text-align: center;
color: #ddd;
text-transform: uppercase;
font-size: 30px;
}
.border {
width: 160px;
height: 2px;
background: #82ccdd;
margin: 40px auto;
}
.services-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service-box {
max-width: 33.33%;
padding: 10px;
text-align: center;
color: #ddd;
cursor: pointer;
}
.service-icon {
display: inline-block;
width: 70px;
height: 70px;
border: 3px solid #82ccdd;
color: #82ccdd;
transform: rotate(45deg);
margin-bottom: 30px;
margin-top: 16px;
transition: 0.3s linear;
}
.service-icon i {
line-height: 70px;
transform: rotate(-45deg);
font-size: 26px;
}
.service-box:hover .service-icon {
background: #82ccdd;
color: #ddd;
}
.service-title {
font-size: 18px;
text-transform: uppercase;
margin-bottom: 10px;
}
.service-desc {
font-size: 14px;
}
@media screen and (max-width: 960px) {
.service-box {
max-width: 45%;
}
}
@media screen and (max-width: 768px) {
.service-box {
max-width: 50%;
}
}
@media screen and (max-width: 480px) {
.service-box {
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="services-section">
<div class="inner-width">
<h1 class="section-title">Our Service</h1>
<div class="border"></div>
<div class="services-container">
<div class="service-box">
<div class="service-icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本功能都是类似的。所谓店铺装修,就是用户可以在
PC端进行移动页辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-brush"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-object-ungroup"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本功能都是拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
PC端进行移动页面的制作,只需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fas fa-database"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制。所谓店铺装修,就是用户可以在
PC端进行移动页面的制作,只需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
<div class="service-box">
<div class="service-icon">
<i class="fab fa-android"></i>
</div>
<div class="service-title">Web Design</div>
<div class="service-desc">
做过电商项目的同学都知道,店铺装修是电商系统必备的一个功能,在某些场景下,可能是广告页制作、活动页制作、微页面制作,但基本需要通过简单的拖拽就可以实现页面的编辑,属于用户高度自定义的功能。最终编辑的结果。
</div>
</div>
</div>
</div>
</div>
</body>
</html>