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天

知道了
亚洲28 www.956906.com-hk百彩网-| www.jp97.com-王者彩票下载手机版| www.cai5066.com贵州快三开奖查询| www.036776.com-下载旺彩彩票| www.837369.com-广西竞彩返点率| www.968512.com-乐彩vip输钱| www.cp7378.com-北京快三来开奖结果| www.rw66.com-快三输的倾家荡产| www.331555.com-趋势王彩票分析官网| www.810925.com-北单竞彩官网app| www.850401.com-菏泽风俗订婚彩礼| www.304758.com-福彩快3数字图表| www.64.me-福彩高管贪污| www.099059.com-哪个平台可以买快三| www.19171.com-新任福彩主任是谁| www.91099.com-炫彩界面库帮助文档| www.029062.com-彩票开奖查询地方彩| www.246131.com-足球竞彩网比分直播| www.377685.com-福彩投注几点结束| www.508580.com-福利彩票店返点| www.277383.com-彩票赔-| www.443605.com-福彩娱乐app| www.597449.com-分分快三会不会作弊| www.735361.com-外围彩票稳赢打法| www.867156.com-昨天的好彩票开奖| www.971329.com-3d彩迷天地联销图| www.hl02.cc-福彩1d稳赚-| www.257827.com-01cc官方彩票| www.477171.com-2019年福彩时间| www.499994.com-必发彩票线路导航| www.585028.com-三地彩票走势地图| www.33jn.com-春节体彩上班时间| www.331595.com-3d晚报乐彩网| www.029028.com-彩神大发快三下载| www.365937.cc-彩票29平台-| www.173621.com-彩神1-| www.2bx.cc-买福利彩票时间表| www.91ij.com-百合网交友博彩被骗| www.273007.com-福利彩票种类| www.95492.com-体育彩票能买中超吗| www.446218.com-时时彩app源码| 大赢家彩票平台www.507932.com| www.qp55.com-dd福彩快三-| www.454038.com-什么是彩金项链| www.17gc.com-彩票基本原理| www.61um.com-全民足球彩票靠谱吗| www.654279.com-风之彩是传销窝点吗| www.754487.com-旺彩彩票靠谱吗| www.835292.com-炫彩鸡米花图片大全| www.901738.com-彩票奖金计算| www.972674.com-彩铅画人物手绘| www.cp5662.com-快三游戏下载| www.736727.com-双色球乐彩网首页| www.1878.biz-福彩3d图今天的图| www.55624.com-彩漆方格十字纹竹席| www.456626.com-菲律宾彩票下载| www.766922.com-3b彩报图库-| www.12323.cc-新浪网福彩3d预测| www.51605.com-鸿运彩票网下载安装| www.6739.net-九龙彩票449t| www.44138.cc-彩票打码量-| www.213873.com-约彩365-| www.329565.com-深圳福彩网开奖结果| www.844971.com-5360彩票网-| www.937788.com-快三胆码速查表| www.990443.com-体彩排列三今日推荐| www.5dg.com-河内彩-| www.160022.com-彩八彩票苹果版下载| www.35189.cc-福利彩票朋友圈评论| www.835272.com-福利彩票藏机图| www.086508.com-好彩客旧版下载| www.191971.com-湖北快三号码| www.1598.in-腾讯分分彩过号器| www.888626.com-快三团队屠龙| www.999846.com-福彩定胆杀号| www.md46.com-快彩乐老11选5| www.96qu.com-快彩软件是真的么| www.882913.com-中国彩礼排行榜| www.716485.com-彩票中奖后的人下场| www.808486.com-刷彩票贴吧-| www.901901.cc-黑彩打工员工什么罪| www.970349.com-体彩任选三开奖| www.cai34.com-新快三网站-| www.14181.cc-彩票官网注册| www.161915.com-铭发彩票是骗人的吗| www.277387.com-有没有1赔1的彩票| www.368719.com-七星彩2283期| www.466017.com-极速秒秒彩是真的吗| www.550584.com-火星彩票网-| www.647772.com-玩彩全输光了| www.799829.com-买彩票的规则| www.078823.com-七星彩领奖地址| www.ub67.com-彩票趋势分析理论| www.340977.com-熊猫腾讯分分彩计划| www.762832.com-大发购彩网-| www.092513.com-9号彩票app-| www.vb50.com-彩票平台哪些赔率高| www.13sv.cc-体彩投注站编号查询| www.sp25.com-e球彩2码聪明组合| www.398707.com-怎么查福彩中奖号码| www.534418.com-七乐彩单式开奖| www.964754.com-1分时时彩开奖号码| www.710888.com-中国人福彩-| www.812799.com-巨彩51中奖-| www.901589.com-最新福彩开奖结果| www.994720.com-福彩3地试机号口诀| www.eu84.com-分分中彩票-| www.tg77.com-快彩中奖助手漏洞号| www.447258.com-竞彩1800万大奖| www.621809.cc-福彩816试机号| www.128037.com-彩虹宝宝免费观看| www.213355.com-彩神1软件-| www.613142.com-福彩布衣1234| www.58402.cc-人人网彩票官方| www.021840.com-258竞彩下载| www.737398.com-福彩三d今晚开奖号| www.833786.com-彩票机选还是自选好| www.899598.com-快三二同怎么看| www.1254.xyz-快三豹子号奖金多少| www.3613.org-福彩七乐彩中奖情况| www.476479.com-今曰七乐彩开奖公告| www.177313.com-大发快三规律破解器| www.618013.com-曾体彩中心曾志刚| www.25wv.com-彩票新手入门| www.147569.com-d8彩票官网-| www.095039.com-新彩吧网络图迷画迷| www.075000.com-民治福利彩票投注站| www.341206.com-沧州体彩网-| www.542152.com-36o体育彩票| www.627516.com-9彩计划网页版| www.706143.com-河南福彩快三计划| www.797991.com-易彩计划软件| www.018962.com-彩票缩水专家软件| www.728767.com-大连体彩兑奖| 500彩票www.3126b.com| www.yo71.com-湖北省福彩中心地址| www.540910.com-宁夏快三跨度表| www.858510.com-六開彩開獎現場直播| www.923532.com-高频彩万能码数据| www.985339.com-皇冠竞彩是什么| www.aj32.com-够力表七星彩| www.389573.com-哈尔滨市彩票站转| www.522705.com-5oo彩票-| www.621906.com-彩虹8-| www.702505.com-竞彩怎样买才稳赚| www.102533.com-什么叫时彩-| www.652243.com-四川福彩刮刮乐最新| www.720203.com-七星彩规则| www.xv62.com-足彩分析app| www.37pn.com-太康县结婚彩礼多少| www.063212.com-彩票店可以转让吗| www.166522.com-快三助手中奖宝典| 500彩票www.338053.com| www.gq51.com-易彩快三计划1分钟| www.397504.com-福彩网用户登录| www.303939.com-河北快三时间开奖| www.378086.com-爸妈要100万彩礼| www.225288.com-福彩打法技巧大全| www.571579.com-87彩店手机客户端| www.530093.com-加拿大28彩票软件| www.708277.com-彩票争霸ll平台| www.801087.com-郎咸平讲彩票| www.891337.com-福彩刮刮奖广告语| www.958418.com-满堂彩58599|