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.029181.com-大乐透购彩模拟器| www.598248.com-彩票行业赚钱吗| www.404975.com-头彩彩票-| www.874252.com-大吉大利彩票| www.915667.com-私彩哪些靠谱大平台| www.481.xyz-河北福彩7位数| www.6230.in-聚福彩票成立时间| www.679153.com-彩票至尊宝典| www.772832.com-238彩票app-| www.523817.com-河内时时彩-| www.254090.com-大发快三18种算法| www.53161.cc-福彩排列五开奖日期| www.cf82.com-大发一分快三平台| www.366112.com-彩铅画自学能学会吗| www.685703.com-彩票137不给提款| www.am32.cc-十分快三是骗人的么| www.11iv.cc-河内五分彩遗漏统计| www.2998.pw-众投彩官网下载| www.308796.com-68彩票网是真的吗| 大赢家彩票平台www.817336.com| www.k58.org-快三害死多少人| www.93vr.com-福彩3d久久彩吧| www.582963.com-全球彩平台-| www.695389.com-传统足彩投注比例| www.791033.com-广西福彩官网开奖| www.de49.com-福利彩票一共几位数| www.97zb.com-博彩哪里找客源| www.4834.biz-物超所值的彩票程序| www.09265.com-广东体彩电话业务| www.95178.cc-中国足彩比分直播网| www.091171.com-老彩民app下载| www.343994.com-48彩票靠谱吗| www.437030.com-福彩刮刮乐网上试刮| www.9938.biz-彩7彩票开奖结果| www.326186.com-彩票游戏软件下载| 500万彩票www.876061.com| www.611159.com-彩38领导者-| www.788531.com-七星彩十专家预测号| www.528144.com-研究彩票的规律| www.867549.com-七星彩2280-| 网易彩票www.071wy.com| www.bo91.com-彩票帮投犯法吗| www.yp52.com-彩票统计分析器| www.39nz.com-中国彩礼最高的省份| www.110.tv-567彩票推荐版| www.45072.com-三地中彩网预测| 汇丰彩票www.hf0866.com| www.et54.com-优信彩票最高邀请码| www.wl37.com-中彩啦app安卓版| www.08yy.cc-中奖彩票店主没了| www.04382.com-彩票店扫码出票软件| www.242222.com-33个数学破解彩票| www.450878.com-彩票816的邀请码| www.645258.com-九龙彩坛资料大全| www.797077.com-98彩票网靠谱吗| www.936297.com-分分彩五码简单技巧| www.ca54.com-湖北福彩快三预测号| www.283963.com-福利彩票几位数子| www.1800.tv-网上高频彩-| www.15600.cc-k彩平台骗人吗| www.872992.com-支持花呗的彩票软件| www.78ec.com-竞彩足球是赌博吗| www.187851.com-时时彩改为20分钟| www.0726.org-锋彩直播官网4.0| www.162301.com-129彩票-| www.615371.com-福利彩票真会中奖吗| www.747767.com-大富豪彩票游戏| www.438549.com-张家口福彩中心地址| www.608329.com-彩票3d200-| 中彩网www.81233x.com| www.722123.com-体育彩票门头图片| www.871577.com-3d彩票缩水软件| www.964147.com-86彩票人工计划| 福彩天下www.807839.com| www.ks34.com-快三怎么分析大小| www.k42.com-彩神争大发快三| www.863400.com-彩票是什么性质| www.966908.com-吉林快三群走势| www.dl04.com-澳门六星彩搅珠结果| www.299661.com-今日中彩最新版| www.879012.com-七星彩二等奖多少钱| www.51749.cc-三d福彩藏机诗| www.522470.com-乐我时时彩计划网| www.662639.com-竞彩误差-| www.1903.tv-人人彩票官网安卓版| www.30470.com-辽宁体彩网官网首页| www.19833.cc-玩私彩属于赌博吗| www.667017.com-彩票公式精算师破解| www.3710.vip-福彩三d走式图| www.38522.cc-海南七星彩计划软件| www.442250.com-邯郸结婚彩礼| www.525986.com-竞彩投注计划方案| www.581690.com-彩神霸百姓彩票网| www.581092.com-大众彩票网吧| www.233740.com-快三豹子遗漏安徽| www.072326.com-cp彩票大全-| www.245103.com-足彩比分500| www.855090.com-福利彩票位数| www.939686.com-北京11选5爱乐彩| www.995056.com-网上黑彩票怎么赚钱| www.ag71.com-123彩票官网下载| www.059201.com-我的k彩-| www.32123.com-易彩堂邀请码给一个| www.365296.com-3亿巨奖彩票图| www.89342.com-顶级彩app-| www.610506.com-北京福彩多投连期| www.689234.com-福彩微信公众号账户| www.873690.com-c02彩票平台| www.158851.com-龙江体彩大乐透查询| www.676153.com-好彩店彩票下载安装| www.94491.com-电脑彩资料-| www.nv65.com-彩票输了7万了| www.8jh.cc-北京口袋彩店二维码| www.103047.com-好彩先锋最新资料报| www.253635.com-大学生中彩票49亿| www.609157.com-彩民推出新粤彩| www.755335.com-双色球旺彩网预测| www.4924.pw-足彩胜负彩开奖时间| www.787111.cc-海南七星彩开码结果| www.926279.com-旺旺彩票靠谱吗| www.pk12.cc-甘肃快三软件| www.783.biz-中国数字彩票| www.027657.com-爱彩网-| www.189646.com-河南481彩票| www.314076.com-玩赚彩票-| www.468368.com-体彩顶呱刮玩法| www.603833.com-足彩怎么玩球详解| www.730069.com-大家乐彩票注册| www.858259.com-足彩大赢家网站| www.981457.com-快三中奖号码| www.iu96.com-足彩今日稳胆| www.647845.com-正规网络彩票网站| www.765906.com-晓风彩票软件下载| www.882231.com-87彩票-| www.974579.com-众彩娱乐下载地址| www.cj59.com-下载中国福利彩快三| www.061023.com-5a彩票-| www.617075.com-彩票可以冒领吗| www.699339.com-北京时时彩购彩平台| www.59869.com-彩吧开机号试机号| www.98906.com-时时彩如何科学倍投| www.065411.com-水溶彩铅画教程| www.26991.cc-新彩彩票网站| www.k21.club-彩票代打兼职去哪找| www.45ra.com-盛大彩票正规吗| www.423.in-97彩票网官方网站| www.90mv.com-沁县彩英说唱| www.rx62.com-安徽快三是违法的吗| www.93yj.com-广东福彩36-| www.cp873.com-中国第一快3彩票网| 吉利彩票www.66376f.com| www.z55.cc-宋代红绿彩瓷器鉴定| www.874710.com-北京快三还有半顺吗| www.954480.com-口袋彩票店二维码| www.998686.com-西华体育彩票| www.bb40.com-彩票代理市场收集| www.su07.com-时时彩五星稳定条件| www.1lz.com-北京福彩哪里兑奖| www.1534.me-湖北福彩无纸化投注| www.6927.cc-最贵的七彩鱼图片| www.04520.com-彩票app正规的| www.974635.com-皇室彩票官网| www.mi7.cc-内蒙快三遗漏号码| www.tq90.com-安徽快三正规吗|