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.139214.com-上海福利彩票地址| www.058681.com-佰易彩票-| www.260718.com-北京快三开奖号多少| www.356845.com-复式彩票怎么中奖| www.464601.com-福彩3d形态图| www.635706.com-彩70官网app| www.805970.com-乐透啦彩票安全吗| www.915202.com-盈盈彩票网站| www.985390.com-时时彩人工计划网站| www.tj4.com-江西快三连线走势图| www.yf48.com-67彩是什么平台| www.23xv.com-尼彩i8-| www.041.online-七星彩明月珰番外三| www.3951.pw-一定牛时时彩| www.06874.com-彩计划下载福彩3d| www.54224.com-七七彩票怎么玩法| www.98850.com-微信上玩快三| www.471106.com-湛江市举报打私彩| www.568007.com-辽宁省福彩中心电话| www.652078.com-新匍京彩票-| www.720538.com-17年七星彩开奖号| www.620922.com-寄希望于彩票| www.37957.com-111cp彩票-| www.024580.com-河南福彩网网址| www.314879.com-时彩稳赚方法| www.520503.com-中乐彩是正规公司么| www.675399.com-湖北福彩快乐三| www.805780.com-彩票管理条例修改| www.928700.com-百宝彩账号怎么注册| www.74825.com-彩色母粒定做| www.058765.cc-体彩排三千禧试机号| www.843032.com-下载公益彩票| www.923325.com-彩票店几点营业| www.45084.com-代理福利彩票赚钱吗| www.770020.com-55彩票苹果版| www.866550.com-昨天福利彩票中奖| www.958483.com-彩9彩票安卓版| 500彩票www.50051k.com| www.197000.com-彩票123网站| www.400195.com-下辽宁福利彩票| www.528712.com-福彩3d字谜解今天| www.597152.com-人人快三投注群| www.679078.com-彩麒麟植物养殖方法| www.754759.com-加微信领88元彩金| www.829222.com-x彩票-| www.900529.com-怎样买彩票才能中奖| www.968324.com-中国彩票领导作假| 大赢家彩票平台www.976981.com| www.721411.com-数学天才研究彩票| www.822032.com-彩大发快三破解器| www.913034.com-彩客站提现-| www.976934.com-娘家说帮存彩礼钱| www.cp0411.com-一分钟快三计算软件| www.4637.top-买彩票运气很重要吗| www.22440.com-e彩手机版-| www.412500.cc-新浪爱彩足球资料库| www.534003.com-够力辣椒七星彩奖表| www.p57.xyz-快三现在一天多少期| www.398932.com-找个彩票代打团队| www.807916.com-彩票排列五机选五注| www.879176.com-在线彩票缩水过滤| www.945898.com-周口结婚彩礼多少钱| www.990290.com-多乐彩十一选五官网| www.bx96.com-广西快三登录网站| www.vy09.com-玩快三根本无法赚钱| www.910402.com-官方彩票网-| www.979792.com-快三助手苹果下载| www.7112.cm-彩票93-| www.34898.com-广东体彩网走势图| www.991.online-新2彩票正版论坛| www.292302.com-uu快三谁开的| www.9799.wang-七星彩多长时间过期| www.ue79.com-凤凰彩票属于私彩| www.5428.com-大发快三体验版| www.19900.cc-吉林快三下午推荐号| www.029399.com-体彩大乐透购彩大厅| www.07ph.com-彩铅画人物古风全身| www.469.cc-青岛福彩郑庄养老院| www.3823.biz-福彩小熊猫图谜发布| www.82024.com-5分彩是骗局吗| www.082193.com-118彩票不能提现| www.011015.com-易迅彩票下载| www.267000.com-彩票是骗局揭秘| www.598873.com-彩票源码塔建| www.73288.cc-彩票高手群qq号| www.667756.com-彩票5000本金中| www.269166.com-98彩票网合法吗| www.911753.com-福彩3d一注2块钱| www.06vy.com-上期体彩号码是多少| www.5825.pw-体育彩票代码| www.061991.com-彩客网足球比分| www.466339.com-开奖直播台湾福星彩| www.297213.com-快三怎么在手机上玩| www.098701.com-快购彩网-| www.292308.com-彩神争霸的uu快三| www.65998.com-甘肃快三走势图明天| www.506910.com-中国福彩管理中心| www.27ah.com-快三出现23期龙| www.15as.com-嬴彩天下与你同行| www.418699.com-便利店能卖刮刮彩吗| www.918216.com-体育彩票倍率| www.072213.com-秒速时时彩财神| www.353301.com-移动梦网炫彩版| www.531311.com-彩铅画桃花树| www.617531.com-快三输钱怎么办| www.819813.com-小镇上买彩票| www.909750.com-帝彩塑胶地板| www.979374.com-龙彩铅画-| www.bh02.com-快乐彩历史数据| www.550928.com-福利彩票刮刮奖技巧| www.677929.com-东方红体彩店下载| www.758457.com-有豪模式的彩票平台| www.840880.com-彩票销售点如何盈利| www.921480.com-彩神2软件可靠吗| www.999560.com-河北燕赵风采福彩网| www.mw19.com-网络官方彩票app| www.98.win-万彩吧官方下载| www.88fq.com-体彩排列5中奖注数| www.3549.vip-福彩3d九宫格图| www.757233.com-彩色混凝土路面透水| www.8665.in-青蛙彩票8080㏄| www.30199.cc-中国彩票七星彩| www.851414.com-彩客网足彩预测| www.533553.com-七乐彩如何玩的| www.562681.com-天气网彩吧图| www.247611.com-90彩票快三-| www.310444.com-福彩3d术语大全| www.009384.com-178彩票平台真假| www.083537.com-金彩票-| www.164205.com-乐优彩票官方版下载| www.35793.com-众发彩票下载安装| www.406601.com-巨丰彩票是-| www.988850.com-数字彩票双色球奇偶| www.385035.com-最快竞彩开奖结果| www.757752.com-中彩网靠谱么| www.59ks.com-彩钢板加工机械| www.716488.com-彩铅彼岸花插画教程| www.80902.com-河北省福彩网| www.062085.com-河南福彩幸运彩下载| www.ih48.com-浙江快乐彩开奖号码| www.587199.com-网络高频彩怎么举报| www.706567.com-福利彩票如何提现| www.963711.com-七星彩机选号码一注| www.443.date-中国福利彩票快乐采| www.513757.com-瑞士分分彩官网| www.58163.cc-福彩一分快三走势图| www.66uk.com-彩宝彩票倒闭了吗| www.0197.cn-天津时彩app| www.413618.com-国家级竞彩培训师| www.542221.com-987彩票下载安装| www.5278.cc-福州体育彩票店转租| www.71588.cc-福彩快三统计| www.040138.cc-彩票合买的图片| www.119199.com-福彩3+1多少钱| www.2325.cm-山东好彩快3| www.29rr.com-昨晚上彩票开奖| www.933538.com-时时中彩票下载安装| www.292897.com-彩票砍龙神器| www.598991.com-买彩票有窍门吗| www.679906.com-巨龙彩票正规么| www.768559.com-爱乐透彩票| www.845676.com-下载安装快彩王| www.1048.pw-江苏快三太坑人| www.03621.com-中福彩票中福快3|