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.2275.vip-腾讯分分彩开奖数据| www.365208.cc-中国破译彩票牛人| www.526686.com-vr重庆时时彩| www.661181.com-128福彩网站兼职| www.772401.com-toto彩开奖结果| www.872054.com-遵义福彩千万双色球| www.957888.com-北京爱彩乐快3| 大奖彩票www.88djcp.com| www.83xn.com-大六壬预测彩票号码| www.5137.org-体彩排列三双双字迷| www.887438.com-世界杯足彩赔付率表| www.7475.net-体彩店有销售任务吗| www.44242.com-908彩票-| www.085527.com-够力七星彩解梦查询| www.238560.com-彩票导师套路| www.355826.com-玩彩票搞死人| www.473397.com-以前中彩票的号码| www.578245.com-体彩自助售卖机价格| www.668395.com-各个省份彩票种类| www.752537.com-竞彩跟单哪个平台好| www.996358.com-北单竞彩怎么购买| www.ea63.com-彩票幸运农场软件| www.58yy.cc-四川彩票官网首页| www.4649.loan-彩票没人买了| www.19526.cc-公司发彩票中大奖| www.65443.com-哪个软件能买福彩| www.684922.com-投资彩票店要多少钱| www.824377.com-明三彩-| www.923396.com-开彩票店怎么提成| www.995255.com-北京福彩论坛3d| www.ze9.cc-福彩双色球开奖号| www.si81.com-福彩3d走势图福| www.86596.cc-福利彩票单式选4| www.079724.com-足球体彩玩法| www.163651.com-福利彩票赛车| www.811016.com-福彩快三的奥妙| www.885570.com-利彩彩票工具下载| www.967019.com-网上买时时彩亏大了| www.cp4789.com-彩票外挂手机版| www.rq81.com-致富彩票网是真的吗| www.283818.com-福彩p62中奖规则| www.542.net-下载广东彩票| www.5988.cc-潍坊体彩兑奖| www.117538.cc-初级彩票教育指导师| www.3524.xyz-谦喜彩票提现不到账| www.28688.cc-u9彩票u9.cc| www.83158.cc-快赢网快三推荐号码| www.53ui.com-福彩三地最大值走势| www.8698.com-欢迎光临金利彩票网| www.dn5.cc-牛彩票-| www.zc39.cc-彩票预测软件破解版| www.67ha.com-七星彩每星期几开奖| www.1817.com-时时彩被骗-| www.8518.org-彩贝游戏的兑换码| www.923062.com-人人天天彩票| 网易彩票www.068wy.com| www.iw54.com-竞彩2串1月入万元| www.790969.com-爱趣彩触屏版| www.915835.com-福彩端是什么| www.983890.com-郑州彩票兑奖中心| www.ak28.com-快彩11选5助手| www.sy75.cc-开6位数的彩票| www.46sy.com-福彩3d晒票-| www.172785.com-广东快三开奖结果| www.619723.com-田伟实战足彩| www.695623.com-大奖彩票过万必黑| www.773534.com-澳洲时时彩彩开奖| www.bh.cc-河北福彩快3规则| www.rl03.com-分分快三免费全天| www.400398.com-五分彩微信群| www.570538.com-七彩云南翡翠买亏了| www.666936.com-乐彩是否是骗局| www.752983.com-被雪中彩影坑了| www.910325.com-乐合彩官网-| www.970397.com-天天乐彩038| 开心彩票www.310657.com| www.la38.com-腾讯彩票下载安装| 易彩网www.36166l.com| www.6037.biz-奇门测彩票位置法| www.3667.wang-足彩滚球是什么意思| www.318102.com-福彩开奖是星期几| www.464241.com-摸彩票有什么技巧| www.572916.com-购彩大厅江西快三| www.640540.com-麦久彩票网首页| www.797657.com-老彩民彩票网app| www.870287.com-福彩3d计算器| www.931895.com-彩票数字范围| www.981530.com-大公鸡七星彩电脑| www.cai6400.com马来3分彩开奖| www.07189.com-福利彩票怎么下载| www.001078.com-重庆时时彩老群| www.099691.com-炫乐彩票五年实力| www.712952.com-cpcp彩票平台| www.79oh.com-彩票开出相同号码| www.6773.top-多赢钱彩票-| www.660350.com-章鱼彩票官网页版| www.864662.com-老时彩开奖号码| www.442286.com-易购彩可靠吗| www.557900.com-万彩c8-| www.617702.com-燕赵风釆福彩| www.748189.com-下载大富彩票app| www.34665.com-好运快三的计算公式| www.cai797.cc-福彩快三是什么东西| www.vi21.com-乐彩vip大发快三| www.062443.com-瑞彩祥云登陆| www.286875.com-福利彩票站申请流程| www.66303.cc-排列三走势图彩终网| www.068435.com-开发一个彩票软件| www.158742.com-黑龙江体彩开奖查询| www.236996.com-浙江体彩中心| www.318102.com-福彩开奖是星期几| www.393707.com-福利三分彩查询| www.546908.com-皇冠彩票真的假的| www.623901.com-彩神帝app下载| www.701419.com-竞彩足球188| www.789061.com-足彩竞猜胜负下载| www.11016.com-宝赢彩票软件apk| www.80852.com-竞彩计划群-| www.054546.com-大连体彩店出租合作| www.330070.com-中国足球彩票新浪网| www.413084.com-卖福彩提成-| www.507419.com-3355购彩cc-| www.567171.com-苏州福彩中奖信息| www.627319.com-腾讯分分彩八手必中| www.686722.com-中彩那天课文图片| www.775595.com-彩富网香港-| www.838832.com-彩票丹麦28-| www.895239.com-七彩彩票网能信吗| www.953965.com-华人彩官网登录| www.997803.com-福彩3d独和差方法| www.bs63.com-福彩快三预测软件| www.191813.com-湖北快三预测豹子| www.299853.com-体彩屋靠谱吗| www.379627.com-兰州市福彩投诉电话| www.496402.com-网上代买彩票软件| www.564855.com-最可靠的87彩店| www.626023.com-福彩三d两天计划| www.685220.com-首页1216彩票| www.767265.com-今日竞彩比分直插| www.827511.com-福利彩票千禧关注号| www.907225.com-彩票p图软件| www.965393.com-福彩自助下载app| 福利彩票www.99677w.com| www.367798.com-双色球全国联销彩谜| www.489878.com-华宇时时彩平台代理| www.565649.com-澳门时时彩走势图| www.623373.com-鸿彩网手机-| www.683333.com-彩票组合软件手机版| www.750447.com-豪彩v1p-| www.804059.com-泉州福建体彩聊天室| www.868244.com-uk彩骗局-| www.961846.com-买彩票能发财吗| 众发彩票www.589zf.com| www.tg5.com-今天青海快三走势图| www.ol41.com-福彩种类及规则| www.11962.com-福利彩票数字3单式| www.70691.com-一品彩票网-| www.070967.com-易约约彩客服电话| www.852853.com-巨人彩票靠谱吗| www.931262.com-大吉彩票真黑| 吉利彩票www.66376y.com| www.556918.com-会员登录一永利彩票| www.966120.com-全民快三是正规的吗| 凤凰彩票www.88266u.com|