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天

知道了
1分快三 发彩www.50732d.com| www.yh92.cc-四川体彩怎样才中奖| www.274906.com-腾信分分彩走势图| www.446933.com-黑圣手一彩吧图库| www.604238.com-688彩票官方网站| www.707172.com-彩票app制作成本| www.872053.com-买体育彩票几位数字| www.980292.com-一分钟的彩票能玩吗| www.67ed.com-足球人宝贝体彩绘图| www.849068.com-汪彩下载-| www.964401.com-人人快三骗局| www.cai918.com-内蒙快三开奖走势图| www.st30.com-七星彩怎样才能中奖| www.125.live-彩虹屁文字表情包| www.cm29.com-彩报中心彩报图库| www.ux60.com-老谢说彩150| www.818556.com-买彩票有工资吗| www.819810.com-网络彩票怎么玩| www.938111.com-易彩彩票专用计算器| 500彩票网www.65707w.com| www.811389.com-彩票工具历史比较器| www.906936.com-中国福彩双色球规则| 500彩票www.314377.com| www.1787.tv-速8彩票-| www.442622.com-福彩3b预测彩巴| www.8195.pw-澳彩五星指数app| www.805312.com-山东彩色母粒厂| www.904223.com-体彩合买平台| www.976332.com-彩礼多少-| www.964776.com-体彩排列三彩吧图库| www.th47.com-安徽快三技巧与分析| www.13rd.com-万彩吧资料大全| www.99jr.com-五行绝算彩票原文| www.760991.com-体彩中奖说明| www.314790.com-篮彩预测-| www.592340.com-无人机彩虹-| www.1683.vip-t乐彩走势图| www.760507.com-购彩票中奖技巧| www.128061.com-华彩彩票官网| www.6588.net-彩票白菜网址| www.28169.cc-凤彩双色球字谜| www.4635.biz-喜欢买彩票的人心里| www.7598.com-淘宝彩票世界杯赔率| www.69882.cc-如何看彩票是否中奖| www.178105.com-北京快三跨度| www.xw47.com-彩票网贴吧-| www.5330.vip-浙江福彩双色球预测| www.86829.cc-竞彩猫曲昌春| www.773630.com-托班彩虹伞亲子游戏| www.861866.com-qq彩票网福利彩票| www.876055.com-买黑彩会挣钱吗| www.dh09.com-福彩湖北快三开奖号| www.4954.me-in下载盛源彩票| www.xc39.com-七星彩连线走势图表| www.516375.com-趣彩彩票骗局揭秘| www.622076.com-秒速时时彩助赢软件| www.715190.com-这彩票是真不能买了| www.797990.com-彩票版区139cn| www.869858.com-福彩3d杀号牛材网| www.944486.com-体育彩票竞彩| www.998800.com-天津福运快三走势图| www.cc39.com-福彩3d质合走势图| www.b58.cc-福彩助手官网| www.582559.com-时时彩二星胆码| www.413831.com-福彩中的高频彩| www.580348.com-彩票站几点关门| www.620081.com-福彩票6838cc| www.892616.com-成化五彩-| www.219415.com-福彩6-| www.55ey.com-周一是体彩还是福彩| www.1226.date-易悠快三-| www.7663.pw-福彩头像-| www.23wl.com-福彩50倍-| www.203051.com-优游彩票平台下载| www.269074.com-登峰彩票-| www.ps3.cc-快三派彩手机走势图| www.765547.com-彩75app-| www.58681.cc-福彩3d正版大花猫| www.49zp.com-3d职业彩民心得| www.0741.biz-彩票7乐彩中奖规则| www.507818.com-19043期7星彩| www.54854.com-天际彩票登录| www.963400.com-被黑彩票平台骗了| www.cp5033.com-福彩甘肃快三玩法| www.b92.cc-河南福彩跑马奖金| www.kb8.cc-河北福彩夸度走势图| www.356300.com-国外彩票算法| www.513521.com-三彩丽雪没有官网吗| www.607672.com-春节快三开奖嘛| www.729304.com-有多少人彩票中奖| www.629596.com-赢钱彩是什么| www.24345.com-超级彩票助手平台| www.065659.com-南国七星彩投注网| 国彩彩票www.98779.com| www.720959.com-天马彩票-| www.791845.com-福彩数字三开奖号码| www.865985.com-五星彩票简介| www.919068.com-河南快三跨度遗落| www.974297.com-澳彩官方网站app| www.sy18.com-彩种大厅下载手机版| www.450649.com-天下彩一378us| www.812384.com-178彩票客户端| www.602153.com-梦到中彩票买了辆车| www.680685.com-宁夏体彩票十一选五| www.792656.com-快三数据专家触屏版| www.866524.com-快三对子全包打法| www.917348.com-红快三走势图带连线| www.969521.com-酷彩中国专柜| www.cai9982.com苏州快三开奖查询| www.761777.com-山东省彩票兑奖中心| www.s37.cn-今晚七彩码开奖| www.07pw.com-彩票大奖号码| www.0800.mobi-彩播-| www.27727.com-复杂彩铅画图片大全| www.273795.com-宝典时时彩-| www.550400.com-腾讯竞猜华夏彩票| www.923549.cc-彩票中奖者的自述| www.5jf.com-几块快三官网| www.tn22.com-3d彩吧彩报第一版| www.069950.com-彩神11下载-| www.215322.com-达人彩票网-| www.300792.com-下载吉林快三走势| www.383842.com-010彩票app-| www.970508.com-安徽体彩网论坛| www.1275.cn-快三路线北京| www.06330.com-牛彩网字谜汇总大全| www.68693.cc-网上买快三倾家荡产| www.623795.com-胜负彩媒体预测| www.30723.com-今天3d彩吧图库| www.438199.com-k彩登入-| www.121285.com-快乐双彩历史走势图| www.977377.com-河南两万彩礼摄像头| www.jd51.com-什么叫彩票信用玩法| www.991069.com-海口七星彩彩版| www.hl61.com-大发快三倍投攻略| www.32vy.com-体彩25日开奖结果| www.92115.cc-顺丰彩票ios| www.0697.cm-西安彩票店生意转让| www.892480.com-竞彩足球有漏洞吗| www.9667.top-彩宝网app-| www.as83.com-彩票坊注册-| www.101491.com-彩票aqq下载大全| www.304183.com-甘肃快三图下载| www.918871.com-有多少人玩大地彩票| www.731078.com-最近的彩票快3开奖| www.17600.com-买彩票被骗能追回么| www.9372.xyz-彩票在哪里买最好| www.021890.com-世界博彩公司网站| 大赢家彩票平台www.976821.com| www.110.cm-彩神iii-| www.1101.org-竞彩胜平什么意思| www.4780.cc-甘肃快三的玩法| www.384360.com-网上时时彩犯法吗| www.6789.hk-北海的彩票专栏| www.243.in-福州快三赔率| www.61965.cc-体彩排三字谜图谜| www.495244.com-百亿彩票巨奖| www.934283.com-智博彩票是真的假的| www.187345.com-时时彩输了追回案例| www.308018.com-彩票时时彩稳赚技巧| www.292175.com-彩界独王-| www.393535.com-彩铅画简单风景画| www.717507.com-彩库开奖-| www.571390.com-华人彩官方网站|