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.48333.cc-奇门测港彩技术| www.899392.com-博发彩票网手机版| www.26551.cc-河北快三查询| www.93159.com-彩钢瓦屋顶价格| www.eu88.com-北京快三助手官网| www.w66.hk-西安天彩粮餐饮| www.874487.com-老杨说彩-| www.nl1.com-甘肃快三推荐号推荐| www.365.cn-3d福彩中奖人数| www.336673.com-体彩真假-| www.566657.com-恒发彩票网站| www.670713.com-下载个彩票开奖通知| www.771226.com-盐城竞彩店-| www.cp9600.com-旺彩苹果手机版下载| www.997642.com-时时彩职业玩家心得| www.od02.com-7220彩票网-| www.27yt.com-网易彩票停更新| www.6681.vip-福建体彩直播聊天室| www.34695.com-金彩彩票是骗局| www.28411.com-彩票买得多算赌博嘛| www.1390.top-手机竞彩哪个软件好| www.863575.com-彩票投注接口| www.01ds.cc-彩票节假日休息几天| www.9372.online国家彩票原主任| www.53613.cc-时时彩5码-| www.526523.com-日本彩票怎么玩法| www.651208.com-水彩花卉图片绘画| www.772483.com-2628彩下载-| www.8547.cm-福彩游戏厅下载| www.159391.com-风凰彩票分分快三| www.897019.com-体育彩票店宣传语| www.112289.com-云顶分分彩娱乐场| www.4555.biz-买彩票中奖新闻视频| www.902850.com-彩票合买规则| www.hs04.com-体育彩票app官方| www.978829.com-雷语好彩一预测| www.5051.org-福彩杀码计巧| www.004130.com-1516彩票下载| www.596679.com-福彩快乐彩害死人| www.53619.com-如何申请87彩店| www.040775.com-博彩思维与技巧| www.382812.com-新浪足球胜负彩预测| www.503906.com-易发彩票app官网| www.57219.com-彩盛彩票app下载| www.369520.com-幸运快三稳定版计划| www.496234.com-足球博彩软件哪个好| www.579454.com-福彩今天开机号码| www.675713.com-旺彩四肖中特图| www.757036.com-快三应该怎么买票| www.910909.com-三分时时彩技巧| 吉利彩票www.80075c.com| www.1kv.cc-兴安盟福利彩票中心| www.wa19.com-彩02彩票平台| www.482783.com-京东惠彩-| www.507150.com-唐三彩彩票-| www.577261.com-搜索青蛙彩票导航网| www.642123.com-特彩吧9949网| www.9685.com-彩店宝能不能用| www.gb18.com-体彩排列五大奖| www.wz61.com-上海快三分析软件| www.277.in-ac彩妆价格表| www.4384.cn-2005年福彩和值| www.92818.cc-立彩快3网-| www.050365.com-彩票站黑彩-| www.2816.cn-西安体彩店转让信息| www.828522.com-合发彩票-| www.908177.com-七星彩规则举例说明| www.973066.com-彩虹论坛-| www.cp6991.com-江苏快三赚钱靠谱不| www.968315.com-时彩平台系统出租| www.cp148.com-什么是快三彩票| www.203000.com-甘肃快三一定牛预测| www.zd28.com-3号彩票网址| www.25pp.com-线上最大彩票大全| www.137713.com-排列三新彩预测| www.bw87.com-福利彩票系统| www.ya37.com-彩票守号中奖故事| www.34mz.com-有什么竞彩参考软件| www.916484.com-致富彩登录-| www.981039.com-七彩意义-| www.fv3.com-时时彩九码无挂公式| www.29py.com-体彩昨天的开奖号| www.234318.com-彩票新政策-| www.970064.com-彩票带单骗局| www.fo49.com-e球彩进球数规律| www.5pn.com-体彩亿元大奖排行| www.759635.com-博彩群-| www.238587.com-广西快3彩经网| www.365058.com-双色球爱彩-| www.524799.com-福彩网邀请码多少| www.665468.com-七乐彩机选器| www.767350.com-山西福彩中心| www.951482.com-彩票开奖十管询| www.997567.com-k彩线路-| www.ey50.com-手机彩票12306| www.d58.club-凤凰彩票平台靠谱吗| www.050461.com-彩票冠亚2.2| www.130354.com-3d彩票非凡走势图| www.098900.com-福彩3d独胆王毒胆| www.380663.com-彩久彩票app下载| www.53ks.com-关注专业玩彩| www.238937.com-网上买彩票算诈骗吗| www.221611.com-瑞彩祥云彩票安全吗| www.830079.com-彩票平台中博安全吗| www.959450.com-彩票快3能赚钱吗| www.266015.com-娱乐快三是什么| www.mg06.com-旺彩彩票是真的吗| www.9om.com-8月17日七星彩| www.10766.com-福彩排列五开将结果| www.818468.com-彩乐汇骗人吗| www.861687.com-彩神五星独胆技巧| www.340120.com-搞笑体育彩票中奖| www.99073.com-腾讯分分彩精准预测| www.293579.com-彩神通手机版| www.382375.com-京彩挂机适合平台| www.542080.com-临沂彩箱厂-| www.689948.com-彩票法律法规| www.298290.com-购彩吧688345| www.948232.com-新粤彩网-| 杏彩www.00840v.com| www.941510.com-买彩票开口话术| www.6763.biz-鸿彩快三彩票有挂没| www.895298.com-京东快彩无法注册| www.982019.com-爱乐透彩票双色球| www.hj69.cc-湖北快三一共多少期| www.41198.com-中国福利彩票骗人| www.553881.com-新人如何玩转竞彩| www.952623.com-足球比分竞彩| www.mc4.cc-快三走势图怎样看| www.3703.com-体彩十一运夺金查询| www.974751.com-天津中国体彩官网| www.cp6355.com-体彩app-| www.445229.com-信阳78人合买彩票| www.616856.com-湖南彩礼钱明细表| www.892708.com-竞彩官方欧赔技巧| www.798531.com-预知百盈快三的软件| www.878175.com-上海福彩网app| www.993872.com-竞彩半全场玩法介绍| www.cf53.com-万豪彩票安卓版| www.078366.com-老有人让我玩福彩网| www.04az.com-水溶彩铅用什么纸| www.814435.com-河北体彩社会招聘| www.883271.com-鸿彩直播平台下载| www.948929.com-优彩网平台-| 中彩网www.71233x.com| www.8117.pw-彩票网投网站| www.737883.com-天天空彩票| www.829944.com-c8com万彩旧版| www.885996.com-彩虹的约定视频| www.946868.com-北京福彩电话号码| www.985096.com-彩票8软件-| www.cp610.com-江苏快三app| www.gi70.com-快三秒奶茶小时候| www.90bf.cc-lol怎么博彩| www.52377.com-天猫快彩是不是真的| www.325103.com-华人彩登录链接| www.414259.com-98彩票官方-| www.512518.com-儿童彩铅画风景| www.257018.com-瑞彩祥云彩票| www.321334.com-彩票神器软件| und--内蒙快三遗漏数据| www.876856.com-海南4十1彩票网站| www.964436.com-竞竞彩比分直播| www.gl07.com-快三套路教学分解|