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.537275.com-彩色的含义-| www.723598.cc-福彩双色球中大大奖| www.807542.com-体彩足球胜平负| www.889164.com-易彩快三计划平台| 辉煌彩票www.2875i.com| www.895511.com-网投彩票能赚钱吗| www.986447.com-基诺彩票游戏| www.al28.com-七星彩软件-| www.64ry.com-爱趣彩彩票网| www.cp0332.com-彩票快三技巧秘密| www.0fg.com-乐彩网登录-| www.92vj.com-高频彩必输-| www.3023.cn-体彩排列三荐号| www.601909.com-大发彩票旧版网| www.766759.com-北京十一选五彩票图| www.900500.cc-福彩61生肖中奖表| 500彩票www.701489.com| www.77627.cc-彩16安官方下载| www.068844.com-809彩票app-| www.699083.com-体彩副主任魏吉祥| www.992858.com-网上玩彩票赚钱吗| www.wt52.com-快三安徽形态走势图| www.33825.com-快三计划软件哪个准| www.028699.com-黑彩代理-| www.155747.com-好彩客安卓版本| www.299104.com-大发时时彩网页计划| www.6376.org-足球胜负彩下载| www.46281.com-一张彩票提成多少| www.029132.com-玩彩票最忌讳什么| www.118777.com-辽宁省体育彩票兑奖| www.216053.com-中彩票要交多少税| www.32900.com-江苏体彩客服电话| www.385826.com-彩票怎么买新手| www.616026.com-体彩五等奖多少钱| www.710032.com-大发快三和值怎么玩| www.820509.com-福彩3d怪字-| www.888904.com-易彩堂网页-| www.960341.com-ios彩票彩金| 彩69www.899495.com| www.ws22.com-贵卅快三和值走势图| www.53ci.com-中彩票的方法有哪些| www.4678.cm-两人特殊买彩票| www.14089.com-有人中过彩票上亿吗| www.58729.cc-竞彩牛师傅-| www.8560.cc-今天体肓彩票结果| www.34929.com-内蒙古快三分析出号| www.957871.com-爱彩乐注册要收费吗| www.fb92.com-手机黑彩票破解器| www.53yt.com-遵义买彩票-| www.2789.cc-彩票可以注销吗| www.f99.space-彩票统计软件| www.84ly.com-重庆时时彩咋封盘了| www.7696.loan-乐彩33兼职-| www.009600.com-987彩票app-| www.36713.com-今日3d老虎图彩报| www.960043.com-彩票网开户送28彩| www.ge.cc-贵州快三一定牛今天| www.tq51.com-申请福利彩票站| www.21933.com-竞彩分析师-| www.019362.com-快乐彩如何胆拖投注| www.yd41.com-彩票新韩国快三| www.87st.com-澳门十分彩-| www.7797.biz-葡京财神分分彩| www.71597.com-太原福彩怎么样| www.866985.com-彩票哪年网上停售| www.963634.com-彩库宝典1.3.0| www.q90.org-有正规的福彩快三吗| www.8895.vip-竞彩串关中奖概率表| www.554828.com-快三最长的龙有多长| www.649582.com-彩票导航天齐网| www.731249.com-306彩票官网| www.820787.com-旧彩钢板大量出售| www.893175.com-49彩票手机开奖| www.973066.com-彩虹论坛-| www.lv78.com-竞彩猫app下载| www.128039.com-彩虹的美丽图片| www.571214.com-红快三360-| www.661604.com-足彩八串一中奖概率| www.139718.com-盈彩会是真的假的| www.231192.com-上海快三查询| www.404464.com-彩铅房子风景画图片| www.652362.com-福彩刮刮乐最新代码| www.fw96.com-福彩公益金使用宗旨| www.1447.cn-高手彩宝贝杀号| www.8048.vip-名家水彩画作品欣赏| www.589024.com-福建省彩票开奖查询| www.690321.com-3d牛彩藏机图正版| www.776379.com-利彩彩票是正规的吗| www.853648.com-重庆时时彩今天开奖| www.914001.com-购买彩票的网站| www.972384.com-彩铅画写生胡萝卜| www.cg36.com-甘肃福彩快三一定牛| www.ti97.com-公益彩票app| www.8gg.com-我破译了彩票| www.18ob.com-福彩周五开什么彩票| www.825363.com-七星彩竞彩网| www.016334.com-彩票多周k线| www.92003.com-快频彩是正规的吗| www.255070.com-排列三试机号彩宝网| www.390080.com-世界杯彩票买多少钱| www.532311.com-福彩站有任务吗| www.605266.com-大有彩票注册网址| www.686789.com-中彩那天的那篇课文| www.971241.com-最新彩迷天地联销图| www.qx17.com-皇家时时彩-| www.14xa.com-亿博彩票计划| www.78uw.com-快三组六有多少组| www.1161.date-肇庆福彩网-| www.5896.top-高手资料中彩网cc| www.436191.com-大乐透还是七星彩| www.544445.com-香港小财神彩票网| www.629208.com-福利彩票怎么网上买| www.701813.com-十四场足彩竞猜结果| www.897991.com-竞彩彩票店-| www.980413.com-怎么买彩票暴富| www.il40.com-陕西福彩app| www.0ne.com-e球彩胜平负走势图| www.19646.cc-大发500时时彩| www.464904.com-竞彩足球信息网| www.673792.com-苹果怎么设置彩铃| www.769338.com-好彩来赚钱-| www.842638.com-公益彩票金如何使用| www.910368.com-今天湖南快三| www.976287.com-查询彩票双色球开奖| www.198954.com-彩神网-| www.308698.com-吉吉林快三开奖| www.404055.com-积石山彩陶王价格| www.520101.com-财神爷彩票下载| www.601411.com-一品彩票22-| www.698721.com-众赢彩票平台| www.59228.cc-5d彩超-| www.552915.com-盈彩网开奖号| www.675080.com-快彩网官方直营| www.753656.com-彩票包赔骗局| www.807253.com-玛雅吧彩票-| www.866646.com-3d彩票开奖试机号| www.917933.com-彩虹宝宝图片| www.968569.com-中乐彩75秒-| 七彩www.53900d.com| www.34654.com-众彩网子墨专家汇总| www.91579.com-炫彩微商-| www.4715.vip-男子身无分文彩票| www.15300.com-嘉兴体育彩票店转让| www.60180.com-校长预测福彩胆码| www.95665.com-365天天彩票真假| www.049647.com-彩票打单技巧| www.143006.com-买黑彩彩民犯法么| www.867768.com-彩吧论坛双色球字谜| www.969909.com-福彩被捉-| www.ca46.com-河北福彩排5| www.rs59.com-快三游戏手机版下载| www.8ld.com-黑彩平台能活多久| www.78fg.com-足彩老是输-| www.2333.cn-七彩捞腌菜下载网址| www.7679.cc-双色球彩票上的编码| www.908792.com-湖南省福彩发行中心| www.966997.com-网络彩票投注站| 500彩票www.50080g.com| www.839986.com-澳客彩票手机版| www.904738.com-彩票中奖就这几招| www.962043.com-山东手机体彩| 六福彩票www.66ffx.com| www.cy90.com-快三定胆口诀大全| www.xl93.com-80彩票高手计划|