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.28518.cc-福彩在线有手机版吗| www.ft77.com-快三兼职是真的吗| www.v55.pw-拉萨体彩中奖| www.610880.com-快三昨天未开号| www.369807.com-体彩5d南京走势| www.481983.com-吉林快三群信誉群| www.251817.com-官方手机彩票软件| www.042920.com-彩票网店宣传| www.954182.com-新彩吧3d字迷总汇| www.gj1.com-彩票都有哪些彩种| www.vi94.com-玩彩票会被警察抓吗| www.748148.com-大富豪彩票下载中心| www.886988.com-微信骗你买彩票| www.993915.com-下载玩彩票-| www.jy17.com-七星彩奖金规则表图| www.822382.com-香港668彩票网| www.983355.com-体彩都有什么彩种| www.49vc.com-十四场足彩比分直播| www.4942.cn-彩帝彩票是合法吗| www.59879.com-彩票双色球研究方法| www.470158.com-竞彩赚钱真难| www.351116.com-网冠彩是真的吗| www.866285.com-山东体彩手机版| www.729055.com-体彩七位数和值走势| www.864722.com-下彩网安卓-| www.951314.com-中彩拉app-| 彩民网www.76520s.com| www.7810.org-足彩14场中奖技巧| www.320377.com-360彩票购采大厅| www.cai5567.com快三怎么看走势图| www.n55.biz-世界彩票最大奖| www.865741.com-339彩票网-| www.cp9698.com-好彩网-| www.sd81.com-彩票幸运号码占卜| www.083466.com-东彩娱乐是真的吗| www.161585.com-外围竞彩app| www.754105.com-彩经彩票代理| www.35687.cc-体彩编号查询| www.907170.com-彩票7位数中5位| www.381271.com-七乐彩今晚几点开奖| www.066850.com-香港博彩税税率| www.60mn.com-中了福利彩票去哪领| www.755793.com-福彩好运四开奖结果| www.677531.com-用不了彩娃彩票| www.301679.com-彩库宝典苹果版下载| www.jb99.com-14胜负彩对阵表| www.84292.com-彩色混凝土颜料批发| www.394245.com-彩虹论坛box| www.525995.com-重庆福彩网打不开了| www.167506.com-江苏快三是骗局吗| www.830583.com-千福彩票骗局揭秘| www.70gy.com-彩票给彩金的平台| www.092986.com-彩票预测神器怎么样| www.905647.com-福建省彩票管理| 乐盈彩票www.lyc55.com| www.ij30.com-福彩端app-| www.015845.com-体彩山东扑克牌玩法| www.232354.com-上海快三三同号预测| www.280.cm-中国十大彩妆| www.8918.in-彩乐乐网娱-| www.67108.com-邢台福彩中心地址| www.659459.com-彩之星是真的假的| www.14lg.com-牛人选体彩排五技巧| www.441195.com-体彩下期中奖号码| www.644624.com-青岛一等奖彩票排行| www.728887.com-京东彩票是什么意思| www.796802.com-台湾快三-| www.867740.com-快三全骰什么意思| www.969275.com-彩票首页路线导航| www.kp9.cc-彩票开奖大全| www.022318.com-时时采彩官方app| www.121425.com-竞彩足球新浪网| www.199248.com-一分快三是官方彩吗| www.281086.com-买私彩怎么判刑| www.365722.cc-彩铅森林主题画| www.457511.com-足球彩票软件大全| www.980175.com-七星彩预测号| www.947568.com-彩票诈骗案-| 500彩票www.66653f.com| www.wf58.com-幸运彩票注册| www.904205.com-足彩及时比分500| www.285411.com-第一套休闲快三教学| www.843977.com-福彩与慈善的含义| www.909207.com-福彩b今天试机询| www.964154.com-江苏快三彩乐乐遗漏| 吉利彩票www.80075b.com| www.25db.com-下载彩天下-| www.894988.com-彩票理财-| www.yx97.com-神圣彩票计划| www.956820.com-红松石七彩-| www.0897.date-全民彩票vip| www.22113.com-2元彩票中100万| www.83222.cc-彩票加倍什么意思| www.043403.com-百彩网手机免费资料| www.586998.com-贵宾会彩票网址| www.677682.com-彩票销售点有钱挣吗| www.035570.com-卖体育彩票的广告语| www.cai5666.com河南快三视频直播| www.490811.com-支付宝能买彩票| www.649558.com-澳门博彩娱-| www.726552.com-手机咋玩彩票| www.20226.com-时时彩总和大小判断| www.712562.com-福彩3d全天计划群| www.595607.com-彩票序列号-| www.99290.com-时时彩遗漏报警手机| www.055316.com-体育彩票容易中奖吗| www.130868.com-立彩app下载地址| www.355636.com-打彩怎么玩-| www.468195.com-时时彩第72位| www.949927.com-福彩快开彩票骗局| www.cp9596.com-快三中奖金额是多少| www.mq09.com-时时彩五星大底方案| www.753172.com-3d真福彩早早报| www.853398.com-诚信彩票-| www.923983.com-买彩票是看运气吗| www.979852.com-驻马店快三开奖结果| www.dh03.com-瑞彩祥云平台| www.wn44.com-内蒙古快三3| www.414266.com-你太出彩了什么意思| www.232608.com-天天中彩网合法吗| www.313105.com-038彩票预测| www.883278.com-鸿彩网平台怎么样| www.973172.com-正版彩虹主站| www.bm76.com-彩票大小单双玩法| www.p27.shop-购买体育彩票| www.365440.cc-彩铅画玫瑰花线稿| www.454354.com-新加坡乐星彩生肖表| www.538155.com-网上时时彩有几种| www.440636.com-彩票网站跑路了| www.550514.com-博彩楼论坛-| www.608325.com-中彩网3d走式图| www.685238.com-时时彩购彩-| www.768208.com-如意彩网-| www.62hf.com-牛彩纽约一分彩| www.723755.com-广东体彩大奖| www.823645.com-山东彩钢卷板| www.931385.com-55彩票有被骗的吗| 幸运彩票www.339208.com| www.tt52.cc-华夏彩票登录| www.qs51.cc-中国彩票发展史| www.224022.cc-uu快三输了很多钱| www.8096.com-中国福彩一倍多少钱| www.770077.com-七彩文鸟-| www.922677.com-人人竞彩正规吗| 大赢家彩票网www.83033b.com| www.185337.com-好彩1合法彩票吗| www.609171.com-彩票采集修复教程| www.912806.com-中华彩票网合法吗| www.rk20.com-釉彩大瓶的主要成分| www.122068.com-福彩便民民-| www.44471.cc-河北快三对子推荐| www.tx8.com-易彩彩民福地登录| www.24098.com-彩票双色球下载安装| www.wc77.com-上海快三登录| www.499111.com-安徽快三网站| www.632825.com-体彩欧洲杯-| www.750671.com-爱彩彩票可以赚钱吗| www.858834.com-海口福彩快2在哪买| www.62020.com-彩吧论坛首页彩票| www.076865.com-福利彩票害人输千万| www.136557.com-下载利彩软件| www.jo95.com-七天彩网址-| www.32hm.com-58彩网站-| www.5510.biz-最近体育彩票销售点|