jQuery网络科技公司网站头部设计代码免费下载

分类栏目:焦点图

123

条评论

素材描述:

1、head引入css文件

1
2
3
4
5
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
 
<!--动画库-->
<link rel="stylesheet" type="text/css" href="statics/css/anim.css" />

2、head引入js文件

1
2
3
4
<script src="statics/js/jquery-1.11.0.js"></script>
<script src="statics/js/jquery.SuperSlide.2.1.1.js"></script>
<script src="statics/js/jquery.ckSlide.js"></script>
<script src="statics/js/waypoints.min.js"></script>

3、body引入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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<div class="holer"></div>
<div id="headdiv">
    <div class="top01">
        <div class="gy2">
            <span class="l">欢迎您光临深圳市网络科技有限公司!</span>
            <div class="top01_center">
                <img src="statics/images/top_tel_icon.png" width="18" height="18"> 全国热线:xxxx-xxxx 深圳:0755-xxxxxxxxx
            </div>
        </div>
    </div>
    <div class="top02">
        <div class="top02_center">
            <div class="logo">
                <a href="#"><img src="statics/images/logo.png" width="180" height="60"></a>
                <div>
                    <div class="logo-year">10年</div>
                    <div class="logo-text">专注网站建设行业优质供应商</div>
                </div>
            </div>
            <!-- 导航 -->
            <div class="nav">
                <ul>
                    <li id="m1" class="m on">
                        <a href="#" class="aa1 mmm" id="sel">首页</a>
                    </li>
                    <li id="m3" class="m">
                        <a href="#" class="aa3 mmm">网站建设</a>
                        <div class="sub">
                            <div class="nav_xiao">
                                <div class="xiao_one">
                                    <ul>
                                        <li>
                                            <a href="#"><i class="bgs1"></i>企业营销型网站建设</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs2"></i>创意品牌型网站建设</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs3"></i>购物商城型网站建设</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs4"></i>手机微信网站建设</a>
                                        </li>
 
                                    </ul>
 
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="m6" class="m">
                        <a href="#" class="aa6 mmm">产品服务</a>
                        <div class="sub">
                            <div class="nav_xiao">
                                <div class="xiao_six">
                                    <ul>
                                        <li class="bgs1">
                                            <div class="xiao_six_con">
                                                <h2 class="xiao_six_l">网站建设</h2>
                                                <a href="#">- 企业营销</a>
                                                <a href="#">- 响应式网站</a>
                                                <a href="#">- 创意品牌</a>
                                                <a href="#">- 营销型网站建设</a>
                                                <a href="#">- 购物商城</a>
                                                <a href="#">- 网站改版</a>
                                                <a href="#">- 手机微信</a>
                                                <a href="#" class="a bgs1">建站免费报价</a>
                                            </div>
                                        </li>
                                        <li class="bgs2">
                                            <div class="xiao_six_con">
                                                <h2 class="xiao_six_l">移动业务</h2>
                                                <a href="#">- 手机网站</a>
                                                <a href="#">- O2O电商</a>
                                                <a href="#">- 微信商城</a>
                                                <a href="#">- 小程序</a>
                                                <a href="#">- 微信分销</a>
                                                <a href="#" class="a bgs2">手机网站设计</a>
                                            </div>
                                        </li>
                                        <li class="bgs3">
                                            <div class="xiao_six_con">
                                                <h2 class="xiao_six_l">基础业务</h2>
                                                <a href="#">- 域名注册</a>
                                                <a href="#">- 虚拟主机</a>
                                                <a href="#">- 企业邮箱</a>
                                                <a href="#" class="a bgs3">在线咨询</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
 
                            </div>
                        </div>
                    </li>
                    <li id="m4" class="m">
                        <a href="#" class="aa4 mmm">成功案例</a>
                        <div class="sub">
                            <div class="nav_xiao max1100">
                                <div class="xiao_five">
                                    <img src="statics/images/cr_img1.png">
                                </div>
                                <div class="xiao_five2">
                                    <p>
                                        <a href="#"><i class="bgs1"></i>- 企业营销</a>
                                        <a href="#"><i class="bgs2"></i>- 移动应用</a>
                                    </p>
                                    <p>
                                        <a href="#"><i class="bgs3"></i>- 购物商城</a>
                                        <a href="#"><i class="bgs4"></i>- 外贸网站</a>
                                    </p>
                                    <p>
                                        <a href="#"><i class="bgs5"></i>- 行业门户</a>
                                        <a href="#"><i class="bgs6"></i>- 创意品牌</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li id="m8" class="m">
                        <a href="#" class="aa8 mmm">解决方案</a>
                        <div class="sub">
                            <div class="nav_xiao">
                                <div class="xiao_four l">
                                    <h2>解决方案</h2>
                                    <ul class="ul">
                                        <li>
                                            <a href="#"><i class="bgs1"></i><b>企业网站建设解决方案</b>更贴身、易落地、高性价比</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs2"></i><b>营销型网站建设解决方案</b>可精准流量统计与效果分析</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs3"></i><b>行业门户网站建设解决方案</b>能及时、准确、动态地更新</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs4"></i><b>外贸网站解建设决方案</b>视觉、功能系统,展示产品</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs5"></i><b>品牌形象网站建设解决方案</b>操作方便、结构先进的优点</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs6"></i><b>购物商城网站建设解决方案</b>方便快捷购物车、购物指南</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs7"></i><b>政府网站建设解决方案</b>可轻松定制风格各异、频道</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs8"></i><b>手机网站建设解决方案</b>可隐藏、访问限制、可管理</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="xiao_four r">
                                    <div class="ul2">
                                        <h2>我们的产品</h2>
                                        <ul>
                                            <li>
                                                <a href="#"><b>企业营销型网站建设</b>注重网站优化SEO结构</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>微信电商<i></i></b>便捷、高效、开放、一站式管理</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>购物商城型网站建设<i></i></b>量身定制,以销售产品为目标</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>微信分销</b>分销分佣,更广阔的业务前景</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>创意品牌型网站建设</b>适合注重美工形象的客户</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>B2B2C电商</b>经营模式支撑,招商、全支持</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>手机微信网站建设</b>随时、随地、随身访问的优势</a>
                                            </li>
                                            <li>
                                                <a href="#"><b>O2O电商</b>全方位流量平台支持</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
 
                        </div>
                    </li>
                    <li id="m5" class="m">
                        <a href="#" class="aa5 mmm">新闻动态</a>
                        <div class="sub">
                            <div class="nav_xiao">
                                <div class="xiao_three">
                                    <ul>
                                        <li>
                                            <a href="#"><img src="statics/images/nav_news.jpg">最新签约</a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="statics/images/nav_news5.jpg">公司新闻</a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="statics/images/nav_news2.jpg">网站优化</a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="statics/images/nav_news3.jpg">建站知识</a>
                                        </li>
                                        <li>
                                            <a href="#"><img src="statics/images/nav_news4.jpg">行业资讯</a>
                                        </li>
 
                                    </ul>
                                </div>
 
                            </div>
                        </div>
                    </li>
                    <li id="m2" class="m">
                        <a href="#" class="aa2 mmm">关于我们</a>
                        <div class="sub">
                            <div class="nav_xiao">
                                <div class="xiao_two">
                                    <ul>
                                        <li>
                                            <a href="#"><i class="bgs1"></i>公司介绍</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs2"></i>汇款方式</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs3"></i>公司团队</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="bgs4"></i>发展历程</a>
                                        </li>
                                    </ul>
 
                                </div>
 
                            </div>
                        </div>
                    </li>
 
                    <li id="m7" class="m">
                        <a href="#" class="aa7 mmm">联系我们</a>
                    </li>
                </ul>
 
            </div>
            <!-- 导航 end -->
        </div>
    </div>
</div>
 
<!--slider-->
<div class="fuSlide ck-slide imgs rel">
    <ul class="ck-slide-wrapper">
        <li class="li6" style="background-image: url(statics/images/banner.jpg); "> <img src="statics/images/banner.jpg" style="display:none;" class="img">
            <div class="banner_con">
                <div class="f48 banner1_one leftto">
                    <h2 class="f90">十年高端网站设计经验</h2>网络 . 您身边的网站建设专家
                </div>
                <div class="banner1_two anim-1">
                    <span class="f30">集团客户<b class="f72">200+</b></span>
                    <span class="f30">企业客户<b class="f72">5000+</b></span>
                </div>
            </div>
        </li>
        <li class="li5" style="background-image: url(statics/images/banner2.jpg); "> <img src="statics/images/banner2.jpg" class="img">
            <div class="banner_con">
                <div class="gy2">
                    <div class="banner2_one">
                        <h2 class="f72 anim-1">全网覆盖 四网合一</h2>
                        <p class="f36 anim-2">完美兼容PC、手机、微信、IPad全终端给您良好的浏览体验。</p>
                    </div>
                </div>
            </div>
        </li>
        <li class="li1" style="background-image: url(statics/images/banner3.jpg); ">
            <a href="#"><img src="statics/images/banner3.jpg" class="img">
                <div class="banner_con">
                    <div class="gy2">
                        <div class="banner2_one">
                            <h2 class="f72 anim-1">精雕细琢 再鉴真品</h2>
                            <p class="f36 anim-2">我们一次又一次的蜕变,只为陪您走的更远</p>
                            <em class="leftto">查看案例</em>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li class="li2 current" style="background-image: url(statics/images/banner4.jpg);"> <img src="statics/images/banner4.jpg" class="img">
            <div class="banner_con">
                <div class="gy2">
                    <div class="banner4_one">
                        <h2 class="f72 anim-1">10年持续追求更高品质</h2>
                        <p class="f30 anim-2">专注于提供高端定制互联网应用服务,让我们的服务<br>帮助您的品牌更有效率的传播! </p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="index-waper-box">
        <div class="index-back-box digital">
            <div class="sub-arrows bx-controls-direction">
                <i class="icom prev bx-prev ck-prev"></i>
                <i class="icom next bx-next ck-next"></i> </div>
            <div class="sub-mouse">
                <span><img src="statics/images/sub-mouse.png" ></span> </div>
 
        </div>
    </div>
 
</div>
<!--slider end-->
<!--优势begin-->
<div class="i_bg">
    <div class="gy2 i_one">
        <div class="i_service_t anim anim-1 anim-show">
            <h2>优势之道·素谓天成</h2>
            <p>用心、用责、 用情、人无我有、人优我特;敬天惜福,爱人有度。</p>
        </div>
 
        <div class="priorities">
            <div class="advantage">
 
                <div class="num_box anim anim-1 anim-show">
 
                    <div class="num" data-num="10">10</div>
 
                    <h3>10年高端网站设计经验</h3>
 
                </div>
 
                <div class="num_box anim anim-2 anim-show">
 
                    <div class="num" data-num="28">28+</div>
 
                    <h3>28+政府单位的认可</h3>
 
                </div>
 
                <div class="num_box anim anim-3 anim-show">
 
                    <div class="num"  data-num="56">56+</div>
 
                    <h3>56+上市公司的选择</h3>
 
                </div>
 
                <div class="num_box anim anim-4 anim-show">
 
                    <div class="num" data-num="800">800+</div>
 
                    <h3>800+品牌客户的选择</h3>
 
                </div>
 
                <div class="num_box anim anim-5 anim-show">
 
                    <div class="num" data-num="5000">5000+</div>
 
                    <h3>5000+企业客户的选择</h3>
 
                </div>
 
            </div>
        </div>
    </div>
</div>
<!--优势end-->
 
<script src="statics/js/main.js">//主要逻辑代码</script>

全部评论 / 0