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.789289.com-彩妆店加盟-| www.cp5200.com-今日贵州快三开奖号| www.088216.com-彩票压大小-| www.161618.com-3cc彩票-| www.239509.com-快三计划师-| www.892139.com-福彩快乐彩玩法| www.290238.com-彩铅画作品古风女| www.515438.com-彩票8亿涉案| www.710089.com-彩票台子-| www.905821.com-快赢彩票app下载| www.54xx.com-3d出号走势图彩吧| www.8735.me-福彩3d奖直播| www.503627.com-易彩网络平台| www.682549.com-福彩3d彩报网| www.827398.com-快乐3分彩技巧| www.985742.com-开看球俱乐部加竞彩| www.iw67.com-爱彩投注平台| www.932351.com-699彩票下载安卓| 500彩票www.401271.com| www.pa69.com-快购彩票安全吗| www.7326.biz-彩虹六号免费辅助| www.797605.com-浩博彩票家破人亡| www.486581.com-竞彩四串五玩法讲解| www.598776.com-七星彩第35期| www.699367.com-七乐彩开奖中奖规则| www.800458.com-彩票app白菜| www.879688.com-赢彩票是真的吗| www.986336.com-金手指的彩票专栏| www.cm04.com-湖北快三选号| www.xp40.com-怎么去彩票店买彩票| www.41kl.com-七星彩下单平台| www.0186.org-爱心彩票app| www.641421.com-台湾五分彩开奖记录| www.535550.com-生肖彩票网站最新| www.217875.com-其他平台有百盈快三| www.474094.com-福彩3d一点通图| www.595619.com-彩票兑换流程| www.719683.com-彩票对刷漏洞| www.838062.com-甘肃福彩快三跨度表| www.957773.com-台湾乐透彩开奖网址| www.984397.com-安徵快三时时彩网| www.112233.com-极速赛车彩票能玩吗| www.841803.com-烟台福彩书法| www.947125.com-高频彩是骗局吗| 金掌柜www.83993k.com| www.029715.com-彩霸王论坛高手| www.441151.com-大发云彩神88| www.546453.com-易彩堂彩票正规| www.686095.com-澳门足球彩票公司| www.760514.com-西安三彩集团怎么样| www.543459.com-彩报二版-| www.688024.com-江苏新福彩快三号码| www.254880.com-时时彩平台租用| www.369151.com-梦见合买彩票中奖| www.501383.com-周易彩票预测法| www.624899.com-香港彩富网官方网站| www.087978.com-机盘老快三游戏下载| www.826689.com-a3彩票可以买吗| www.918189.com-一分快三是不是私彩| www.982176.com-3地字谜总汇新彩网| www.dx8.com-三分快三是不是骗局| www.370831.com-新宝娱乐彩票| www.292572.com-福彩真精华布衣2| www.789.tv-今天彩票指南电子报| www.358140.com-博友彩的邀请码分享| www.45nq.com-一号彩票安卓版下载| www.209387.com-黑彩员工判几年| www.534342.com-七星彩中一个多少钱| www.356764.com-体彩顶呱刮中国红| www.2613.cc-如意彩免费资料大传| www.1003.org-红精灵预测彩票| www.36jy.com-七星彩今晚开奖规律| www.613183.com-6768彩票官网| www.92ut.com-福彩售卖点的位置| www.77bv.com-北京富雷科自助彩票| www.318241.com-彩虹伞打地鼠教案| www.9530.vip-海南私彩如何包码| www.47729.com-实时彩计划群骗局| www.6392.xyz-丹麦快乐彩app| www.28982.cc-福彩到底能不能中奖| www.82805.com-搜狐彩票网好不好| www.752113.com-ok彩票网能玩吗| www.031170.com-澳客赢家彩票苹果版| www.151317.com-重庆时彩计划| 天天彩票www.203882.com| www.34xn.com-港彩48倍-| www.584955.com-彩报王663299| www.666911.com-福彩3d概率统计| www.ck2.com-快三如何玩中奖率高| www.211352.com-东北人玩彩独胆| www.755395.com-鸿运网快三正规吗| www.911327.com-民彩网安全吗| 豪彩VIPwww.001537.com| www.151217.com-8816.彩票官网| www.358493.com-环彩国际下载app| www.5715.cn-布都和三彩什么关系| www.95717.com-竞彩返还率是多少| www.78838.cc-132彩票新版下载| www.122044.com-福彩是真的吗| www.838294.com-中国体彩七星彩开奖| www.953937.com-彩票追号最多多少期| www.fa44.com-瑞彩祥云是什么套路| www.07rh.com-乾特火箭彩票vip| www.lg2.com-甘肃省快三开奖遗漏| 尊彩www.900406.com| www.781865.com-黑彩快3-| www.868296.com-今天体彩5d走势图| www.965994.com-直播快三-| 尊彩www.083065.com| www.279499.com-彩票267-| www.343304.com-大连体彩申请投注站| www.442256.com-结婚彩礼顺口溜五金| www.533329.com-北京长乐快三| www.wo85.com-怎么预测彩票的走势| www.886197.com-彩票676-| www.619735.com-上海磐彩涂料| www.2251.vip-梦到买彩票中大奖了| www.8720.vip-字谜图迷新彩吧| www.602403.com-中国彩票假的| www.8206.net-彩票徐州有多少中奖| www.172158.com-彩票开奖结果往期| www.326934.com-湖北湖北福彩快三| www.495563.com-七星彩册子论坛| www.024821.com-赢彩票与你同行| www.240170.com-北京快三走势图今天| www.36uu.cc-cc彩票四不像| www.893509.com-极速快三官网网站| www.uj73.com-大发快三不给提现| www.698635.com-彩铅房子风景画简单| www.972246.com-8k彩票计划-| www.2yg.cc-哪家黑彩靠谱一点| www.75565.com-足球竞彩软件推荐| www.961627.com-体彩天下名钻8兑奖| www.621414.com-双色球彩票福利彩票| www.749809.com-500万彩票正规不| www.806163.com-江苏体彩前三直选| www.860800.com-好彩246天天好采| www.910582.com-蓝光乐彩城二期| www.963840.com-彩票刮刮乐怎么玩| 佰萬彩票www.982pk.com| www.387189.com-987彩票真的假的| www.719543.com-河北快三app| www.623600.com-汇晨彩票-| www.rz28.com-五福彩票官方下载| www.219674.com-彩票投注模式| www.55797.com-彩票十二生肖怎么玩| www.7143.pw-七彩影城爱建店| www.27281.cc-彩宝网首页电脑版| www.020760.com-彩票代销者-| www.224539.com-兼职帮投福彩游戏| www.55762.com-亚博足彩-| www.3480.vip-海南41体彩奖金| www.984766.com-彩运网客服-| www.dl4.com-分分快三骗-| www.133237.com-七星彩最近十期号码| www.37wc.com-体彩大乐透主任是谁| www.717780.com-学彩铅风景画| www.04871.com-福利彩票3d藏机图| www.89274.com-彩票查询中奖软件| www.663767.com-眉山众彩生活林总| www.cp6679.com-搜索湖北快三预测| www.3939.hk-中彩堂app-| www.062437.com-瑞彩祥云邀请码大全| www.137284.com-做彩票兼职-|