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.40893.com-澳门快5彩骗局| www.76xg.com-彩票有谜语吗| www.wd40.cc-兰州体彩大乐透| www.477739.com-转福利彩票怎么样| www.994006.com-nba竞彩推荐| www.cr24.com-怎样加盟彩票投注站| www.w70.cn-掌上购彩是什么| www.409.cm-中国彩市第一巨奖| www.464.net-彩票托犯法吗| www.066215.com-900彩票下载| www.246299.com-彩票驿站平台正规吗| www.873941.com-杭州福利彩票官网| www.25lq.com-星空彩票提现不了| www.191300.com-怎么看快三要开长龙| www.381583.com-肥城体彩售各点| www.646488.com-下载头奖彩票软件| www.981104.com-福彩快三怎样注销| www.505093.com-竞彩足球怎么抓平局| www.676519.com-好运来大发快三| www.42vf.com-∥彩票开奖-| www.86sj.com-彩工网讲师团崔晓龙| www.033659.com-乐和彩彩票新手测评| www.289256.com-彩神网推荐火爆四肖| www.33760.com-四川体彩快乐12| www.94249.com-如何叫传统戏彩票| www.635661.com-合法正规的彩票网站| www.698941.com-超级3d彩票助手| www.163411.com-双色球彩民村彩民网| www.241957.com-彩票旗舰网-| www.285087.com-彩票靠概率取胜| www.646178.com-2468天天好彩| www.835587.com-最新的彩票预测软件| www.967634.com-手机选彩票软件下载| www.fg97.com-盈彩网app-| www.554677.com-数字型彩票演算规律| www.127981.com-鸿彩彩票平台| www.288176.com-大乐透彩票投注大厅| www.392078.com-福建体彩在线投注| www.691668.com-彩乐瀑app-| www.854422.com-彩票缴款通福彩| www.951312.com-玩分分彩心得| www.cp198.com-快三代理-| www.e65.com-今晚七乐彩开奖视频| www.77df.com-福彩字谜总会| www.37910.com-微信登陆彩票下载| www.94521.com-福利彩票改变什么| www.078090.com-体彩作假吗-| www.166889.com-快三计划群-| www.56uc.com-港澳彩票大全| www.789099.com-足彩中奖是否真实| www.905189.com-伯爵云端彩票| www.wf30.com-新彩吧藏机图| www.40318.com-彩票破了可以兑奖| www.012281.com-彩票网站均暂停售彩| www.65zz.com-武汉福彩兑奖地址| www.ke71.com-下载玩彩票app| www.486563.com-陕西体彩大奖| www.344918.com-奇妙时时彩趋势软件| www.506166.com-彩票黑客论坛| www.599032.com-腾讯五分彩人工计划| www.685488.com-彩票手机在线购买| www.784444.com-网络售彩何时开启| www.525265.com-彩票福彩秘诀| www.948689.com-吉林快三97微信群| 来运彩票www.1111y.cc| www.682517.com-体彩中心官方网站| www.028093.com-彩票app开发商| 大赢家彩票平台www.376163.com| www.268622.com-彩票3d和直走势图| www.376807.com-豪华彩票店装修| www.923054.com-快三宝典app下载| www.985314.com-728彩票安卓| www.83bs.com-和彩印客户端| www.314250.com-好彩门户-| www.487376.com-最新七新彩走势图| www.13wr.com-快三输钱太快了| www.52639.cc-分分彩后三组三技巧| www.451290.com-信博彩票是官方网吗| www.660423.com-彩票刮刮乐透视眼镜| www.233331.com-e球彩两场全包| www.8137.top-体彩那几天开奖| www.0qr.com-西安彩票机转让| www.323613.com-七乐彩开奖历史查询| www.45er.com-体彩六加一开奖结果| www.211080.com-彩票网站注册| www.338752.com-彩尊可靠吗-| www.458620.com-体彩世界杯竞猜结果| www.8080.online3分钟快彩怎么玩| www.31879.com-谁有彩神邀请码| www.073780.com-北京新快三查询| www.813993.com-爱彩人江苏11| www.09040.com-东莞体育彩票中心| www.7je.com-中山体彩中心| www.882.website时时彩大计划群| www.7025.loan-竞彩篮球怎么打票| www.350582.com-手机彩膜正面怎么贴| www.431823.com-同城体育彩票网站| www.512823.com-乐彩彩票是合法的吗| www.570702.com-全国联网福彩3d| www.628726.com-网上买彩票不给提现| www.746078.com-彩天下平台代理| www.914518.com-网赌彩票漏洞赚钱| 快彩在线www.2632d.com| www.769217.com-好彩官网骗局| www.679007.com-彩票送彩金的软件| www.829370.com-彩聊软件下载| www.447118.com-福彩主持人子涵| www.555243.com-大数研彩软件| www.620058.com-世界彩票奖金排名| www.691671.com-新浪彩票数据图表| www.760016.com-陕西福彩自助终端机| www.cd18.com-快三如何能稳赚不赔| www.h31.net-广西快三计划分析| www.183779.com-福彩3d诀窍-| www.273078.com-彩票销售额如何分配| www.104121.com-竞彩直播500| www.9579.cc-手机能打彩票吗| www.356403.com-牛人彩票可以挣钱| www.439932.com-500万开奖彩票| www.537977.com-1彩色-| www.393626.com-风景彩铅画简图图片| www.017065.com-河北快三多少期结束| www.086004.com-麒麟彩票提现不了| www.143533.com-玩长城彩票挣钱吗| www.237411.com-体彩下载官网app| www.338246.com-大家乐彩票是真的吗| www.438456.com-港澳彩平台下载| www.525156.com-彩圣网直接开开奖| www.97378.cc-58同城彩票邀请码| www.328.me-中发彩票是黑平台| www.10421.com-新浪足彩预测网| www.730213.com-新彩吧字谜汇总| www.799920.com-新一代团队计划快三| www.875052.com-中国彩吧图-| 大赢家彩票www.5086l.com| www.hp28.com-彩票号码生成器| www.x94.xyz-彩八仙计划软件| www.49ex.com-青岛七彩格子| www.877.live-彩红直播软件下载| www.015771.com-海南七星彩投注网址| www.492.me-红旗彩票投注站地址| www.503020.com-彩友多中奖-| www.29139.com-河北省福彩中心官网| www.005966.com-彩票app开发网站| www.875092.com-258竞彩官网| www.915373.com-开个彩票站挣钱吗| www.975523.com-重庆市彩后三走势图| www.970954.com-腾讯彩票全天计划| www.sl5.com-体彩论坛-| www.621636.com-彩影手机版官网| www.503892.com-易博彩票网址| www.618656.com-全红彩票app下载| www.775116.com-怎么买一分快三| www.954769.com-中国体彩中心主任| www.vf97.com-国乐彩江苏快三| www.di91.com-湖北快三肖立刚推荐| www.752912.com-重庆福彩报app| www.066853.com-香港博彩税-| www.99909.com-国外国彩票中奖号码| www.415.website彩票八喜怎么| www.71278.cc-网上怎么买足球彩票| www.772858.com-今晚有七乐彩预测| www.128917.com-彩民在线双色球| www.268679.com-鸿彩彩票-|