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天

知道了
58福彩 www.333831.com-福彩怎么玩详细介绍| www.412277.com-福彩复制票怎么打| www.579362.com-正彩彩票网-| www.675867.com-大彩网空心菜博客| www.320924.com-百宝彩tv-| www.5780.org-山东福彩服务电话| www.20080.com-东营体彩中足球彩票| www.81827.cc-为什么买快三总输钱| www.065909.com-送彩金赌博-| www.539050.com-手机快彩网合法吗| www.692203.com-17彩票网靠谱么| www.796708.com-500彩票幸运三| www.880117.com-内蒙古彩票中心地址| www.958534.com-七星彩粤海局王图纸| www.cp0339.com-福彩快三中奖助手| www.29317.cc-自动购彩软件| www.019418.com-彩票的全部技巧| www.136228.com-福彩广西快3走势图| www.218293.com-大发快三最新邀请码| www.307639.com-七星彩历史开奖结果| www.93js.com-送彩票的文案| www.108385.com-新彩娱乐网下载| www.c37.com-鳄鱼彩票杀号定胆| www.8719.in-新彩吧丹东3d图迷| www.208578.com-广西快三实时开奖| www.294859.com-凤彩网排列三预测| www.394172.com-新浪电脑版彩票首页| www.529283.com-上海最新彩票店转让| www.119099.com-彩神争霸4-| www.11iz.com-黄鹤楼大彩隐藏抽法| www.65048.cc-规划竞彩是传销吗| www.93551.cc-丹麦28彩票怎么玩| www.071559.com-人人彩票网址| www.140391.com-北京快三的预售时间| www.220539.com-彩神2是真的吗| www.193935.com-香港中彩堂官网| www.287652.com-足彩会让人倾家荡产| www.811090.com-香港免费彩民之家| www.899972.com-彩票自动生成号码| www.977322.com-彩礼不得超2万| www.sj8.cc-福彩开奖结果查询| www.035637.com-福利彩票励志广告语| www.34be.com-湛江七星彩开奖号码| www.039895.com-网投彩票赚钱靠谱吗| www.389679.com-福彩万彩8-| www.831227.com-三月份足彩-| www.5908.cm-众彩之家注册| www.256885.cc-快三走势图app| www.373921.com-辽宁体彩十一选五开| www.557766.com-彩票彩宝贝预测汇总| www.660071.com-重庆市福利彩票| www.867556.com-七星彩2281-| www.981340.com-快三守号翻倍技巧| www.hy21.com-68彩票网靠谱吗| www.342421.com-好彩频道在哪里直播| www.953680.com-靠谱的体彩软件| www.cu97.com-彩票店和什么一起开| www.49sc.com-有买彩票的网址吗| www.67fz.com-快三分分彩技巧| www.3075.com-云购彩票网官网首页| www.13bv.com-鼎盛彩票手机版| www.2853.biz-网上禁止买彩票了吗| www.9596.cc-色彩的冷暖-| www.818529.com-体彩店竞彩机器| www.896298.com-优势的彩票合买源码| www.964195.com-彩之乐彩票网怎么样| www.pm09.com-大发时时彩计划公式| www.28sk.com-购彩直播-| www.059548.com-k彩彩富民地| www.362234.com-彩色生肉无遮挡大全| www.226370.com-彩迷论坛-| www.95362.com-外围竞彩竞猜软件| www.42174.com-中国福利彩票平台| www.075618.com-研究中奖彩票达人| www.937600.com-彩票bug-| www.177284.com-梦想彩票网址| www.58bs.com-uu快三和大发快三| www.828353.com-龙之彩是什么| www.399379.com-福彩双色球开奖大全| www.974329.com-福彩周五开什么奖| www.fo2.cc-网上时时彩是骗局吗| www.013402.com-南国彩票开奖结果| www.800620.com-彩9苹果版下载| www.890417.cc-彩60-| www.960475.com-3亿彩票中奖者| 易旺彩票www.ywzuqiu.com| www.851294.com-乐米彩票改名叫什么| www.938522.com-众益彩app-| www.991302.com-金彩网彩富网高手网| www.zt5.com-七星彩走势图| www.a19.online-中国体彩时时彩开奖| www.56481.cc-彩票新颖名字| www.509156.com-广发彩票安卓版| www.4305.cc-鑫彩国际是干什么的| www.9820.cm-江西快三11选5| www.hj45.com-分分快三破解器| www.v96.org-3d彩玩法中奖介绍| www.95xm.com-体彩玩法一胜一负| www.3164.win-彩票实体店倒闭潮| www.333688.com-买体彩法-| www.340888.com-微信快三彩票群骗局| www.633889.com-东方亮彩被收购一事| www.951145.com-九号彩票登录| 彩69www.022184.com| www.877917.com-南京福彩中心图片| www.960666.cc-彩票刷反水-| 梦想彩票站www.43131q.com| www.309646.com-tt快三直播间| www.377626.com-彩票店门头照片| www.460123.cc-体彩杀码预测| www.oy87.com-宁夏福利彩票官网| www.m70.cc-体彩卖福彩吗| www.449855.com-运城老张体彩| www.316038.com-上海体彩销售点| www.384805.com-黑客侵入福彩| www.480306.com-甘肃快三漏值| www.551546.com-新粤彩老版-| www.611677.com-福彩诈骗套路| www.671426.com-乐盈彩-| www.744402.com-奥客网足球彩票| www.804168.com-大奖彩票聊天室| www.873935.com-网易彩票微信公众号| www.931720.com-佛教求财彩票中奖| www.975858.com-七星彩官方网站| www.cp3371.com-江苏快三是真的假的| www.no01.com-混合竞彩奖金计算器| www.7995.win-早教彩虹伞亲子游戏| www.48in.com-福彩3d有多长时间| www.042443.com-多彩贵州网待遇| www.126794.com-彩票最快开奖网址| www.180849.com-彩29app下载| www.384403.com-举报彩票店-| www.vt18.com-惠民彩票网-| www.758566.com-安徽体彩佣金| www.1431.org-星空的画法彩铅教程| www.730658.com-体彩官方唯一网站| www.810318.com-加强福利彩票快开| www.971604.com-彩票6十1开奖| 新盈彩www.xinyc3.com| www.py63.com-彩票真实案例| www.7769.live-山东七乐彩中奖规则| www.439213.com-彩圣网免费资料大全| www.076778.com-体彩排列三预测号码| www.0349.wang-彩票可以研究出来吗| www.818673.com-重庆福彩兑奖地址| www.6374.biz-乐彩33平台-| www.546837.com-赛马派彩及结果| www.743004.com-购彩网网站-| www.796204.com-玄学预测彩票| www.909938.com-3d彩界过客-| www.961128.com-福彩15选5骗局| www.999452.com-大运彩票手机版平台| www.cc35.cc-福彩排列五开奖| www.tc47.com-江西福彩中心地址| www.7ll.cc-彩票中奖要求平分| www.40gh.com-彩礼的谈判案例分析| www.760.me-百乐彩注册网址| www.9400.xyz-彩无双登录-| www.34579.cc-福彩上海天天选四| www.644871.com-七乐彩玩法简介| www.735153.com-星期一开奖的彩票有| www.809909.com-335彩票合法吗| www.877028.com-彩票分类及玩法| www.962489.com-济宁福利彩票首页|