QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery网络科技公司网站头部设计代码

原创商用 jQuery网络科技公司网站头部设计代码

jQuery制作橙色大气的网络科技公司网站头部布局,宽屏的下拉导航菜单图标,大屏的banner轮播图片,页面滚动导航固定在顶部效果代码。ps:代码内有清晰的注释,每个部位都有注释说明。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<!--主要样式-->
<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文件

<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代码

<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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
七乐彩票 www.md17.com-中原彩票网网址| www.300089.cc-免费送彩金-| www.511725.com-胜负彩九场奖金| www.633433.com-买彩票到哪里买安全| www.753297.com-中华彩吧合法吗| www.907603.com-嘉定机选中奖彩民| 博友彩www.371j.cc| www.nn78.com-竞彩平局特点| www.762588.com-世界上彩票最高奖金| www.889935.com-机选彩票会中奖吗| www.981123.com-河北彩花漏打| www.ip86.cc-烟台福彩中心| www.w62.club-京东彩票赛车直播| www.88wk.com-500彩票网邀请码| www.3459.vip-双色球指彩票电子报| www.010799.com-海南七星彩私彩网站| www.293101.com-快三怎么看出二同号| www.374700.com-极速⑥和彩-| www.930287.com-彩票助赢计划最准| www.991921.com-三分彩玩法介绍| www.vj3.com-华人彩平台可信吗| www.36942.cc-彩宝贝杀号定胆| www.qi63.com-廣東彩王-| www.338915.com-中国购彩网-| www.465600.com-彩票综合预测| www.559081.com-3d安全购彩杀号| www.641253.cc-体彩图纸今天| www.728298.com-彩8娱乐会员登录| www.810808.com-买福利彩票靠谱吗| www.928538.com-最新七星彩奖表图| www.435813.com-彩凤是什么神兽| www.105097.com-牛彩网开机号| www.795099.com-六福彩坛-| www.575867.com-e乐服app福彩| www.pp09.com-彩票投注手机平台| www.559.in-时时彩龙虎计划网| www.755840.com-彩晶膜怎么样| www.949161.com-传统彩下载-| www.km83.com-宝赢彩票软件| www.560198.com-腾讯分分彩四星破解| www.190957.com-快三预测号码| www.659044.com-财神彩票网骗局| www.467033.com-彩票几点封机| www.038586.com-福彩二分快三| www.240550.com-快三如何跳-| www.111532.com-澳洲3分彩全天计划| www.043768.com-彩票代理拉人骗局| www.753079.com-彩神计划是真的吗| www.fq23.com-重庆体育彩票官网| www.v77.cn-体彩微信群赚钱| www.043059.com-竞彩宣传图片| www.004394.com-bb3d是黑彩吗| www.522309.com-刘雪龙黑彩赚了多少| www.598158.com-买彩票号码怎么选| www.0162.com-意大利色彩岛| www.356719.com-彩票店铺公告| www.489596.com-彩51彩票是骗人吗| www.565208.com-彩票频道万彩吧| www.632988.com-力彩芽-| www.710912.com-网络刷彩违法吗| www.783835.com-13彩网站-| www.865690.com-网易彩票官方版| www.929535.com-彩牛彩票是合法的| www.982757.com-共享彩票盈利| www.22nw.com-吉祥彩票是真的吗| 福彩www.86267n.com| www.04dv.com-漳州体育彩票店转让| www.8403.shop-天天乐福彩-| www.71086.com-浙江福彩一定牛| www.067330.com-举报私彩有什么奖励| www.973230.com-彩虹岛当年很火吗| www.cp9799.com-快三豹子最大遗漏| www.984131.com-幸运之门彩票| www.604779.com-盛源彩票怎么下载| www.716219.com-福彩开奖的真实性| www.805567.com-风云彩票-| www.oy61.com-福彩3d奖金是多少| www.cp0663.com-买高频彩必输原因| www.639359.com-漳州彩票店-| www.vm17.com-手机彩票提现失败| www.12860.cc-彩票兑奖要几天| www.77006.cc-彩票分析大师破解版| www.25148.com-彩铅画优点-| www.680300.com-什么是彩钢夹芯板| www.789220.com-南阳彩礼多少| www.859816.com-甘肃快三最大遗漏值| www.931411.com-江苏体彩7位数玩法| www.979940.com-彩票店打票员工资| www.cp934.com-福建福彩网-| www.mx87.com-网上彩票平台合法么| www.xc85.com-河南省双色球彩票| www.7242.cn-庆典彩虹机哪家好| www.21102.com-国外彩票投注app| www.642087.com-一出好戏彩票| www.91206.com-好彩四色爆珠多少钱| www.41kj.cc-彩妆代理微商代理| www.658.me-时时彩概率计算软件| www.4056.in-大中华彩票多少年了| www.653688.com-吉林快三合值跨度| www.228176.com-河南太康彩礼| www.w68.net-排三开机南方双彩网| www.69sc.com-彩票至尊宝典破解版| www.902666.cc-快三每天几点开始| www.c4.biz-人人快三-| www.022898.com-中心彩报-| www.093017.com-彩钢围挡安装图片| www.176698.com-江苏快三中奖金额| www.34157.com-彩虹代刷网正版源码| www.jw76.com-彩虹的寓意是什么| www.et27.com-福彩中彩网官网| www.759646.com-体育彩票时时彩11| www.725.cm-帮人玩彩票赚佣金| www.123148.com-福彩快一定牛走势图| www.149698.com-苏州彩票中奖记录| www.257433.com-093彩票安卓版| www.892656.com-101彩票app-| www.965007.com-今天体彩开奖时间| www.cai55.cc-河北快三推荐号| www.292566.com-青海福利彩票网| www.374370.com-下载体彩彩票软件| www.466117.com-高频彩官方网| www.602909.com-c16彩票官方网站| www.733301.com-快三套路教学| www.884482.com-福彩3d3期计划| www.140102.com-狗州app足彩| www.460031.com-福彩3d无错断组| www.96539.com-体彩机竞彩怎么打票| www.69rz.com-用手机怎么打彩票| www.501151.com-易彩堂能赢钱吗| www.568984.com-福彩刮刮乐坑| www.152833.com-彩票自动兑奖软件| www.257236.com-快三数据分析app| www.5779.in-彩票伪造头奖| www.175702.com-吉林快三助手app| www.128904.com-看彩票是在什么频道| www.0939.date-可以网上买彩票吗| www.11299.cc-烟台福彩交流群| www.8572.biz-像m5彩票的有| www.144580.com-河北快三能组多少组| www.309826.com-中国体彩足球胜平负| www.615020.com-来韩国旅游中彩票了| www.365859.cc-七乐彩开奖顺序号码| www.tp47.com-体彩算号器-| www.78531.com-八仙过海韩湘子艳彩| www.050027.com-福彩3d黑彩倍率| www.1584.net-彩票收藏展-| www.36268.com-北京快三公交时刻表| www.954128.com-彩票助赢76276| www.ej57.com-爱彩乐可靠吗| www.19cb.com-星期五什么彩票奖| www.7243.cn-彩虹无人机演变| www.060113.com-聚华体彩店app| www.i98.space-彩运网手机版客户端| www.78fu.cc-国外有胜负彩吗| www.657301.com-中国福彩游戏机加盟| www.752060.com-易彩彩票注册| www.13185.com-怎么下载中彩网购彩| www.vq04.com-e球彩有多少种玩法| www.271935.com-湖北福彩网快3| www.443543.com-搜索青蛙彩-| www.567241.com-信博彩票-| www.661634.com-足球竞彩太难中了| www.272.pw-美国加州彩票网站| www.85014.com-聚象彩骗人套路|