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.059401.com-渐江快三开奖| www.522004.com-m5彩票手机登录| www.905056.com-足彩竞彩投注平台| www.981532.com-尊彩网官方官网| www.2340.biz-彩票线上购买模式| www.03387.com-彩票巴巴登录| www.65404.com-青海省体彩兑奖中心| www.602227.com-吉祥彩票提现不出来| www.728601.com-彩吧助手3d开| www.810436.com-体彩排列五开奖历史| www.895971.com-福彩数据统计| www.964618.com-足彩14场最新预测| www.x77.xyz-武汉体彩-| www.1191.date-彩票大神-| www.953529.com-合法的彩票网购网站| www.wi58.com-幸运快三计划骗局| www.209.biz-水溶彩铅的画| www.03qg.com-3亿巨奖彩票图| www.177890.com-快三害死人-| www.266468.com-快三秒图片-| www.406060.com-太原结婚彩礼| www.520068.com-大发快三计算规律| www.358880.com-体彩一等奖是多少钱| www.534538.com-梦秘解图梦册七星彩| www.59890.cc-长春快三黑彩没人管| www.932702.com-118彩票靠谱吗| www.56290.com-时时彩较稳的玩法| www.dj67.cc-彩票的税-| www.56.link-zfc彩妆加盟费| www.79vv.com-江苏福彩大厦| www.2113.cm-福彩46-| www.10614.com-足彩欧赔口诀| www.12955.com-福彩快三实体店| www.cp1500.com-北京福彩快3走势图| www.uw35.com-大发快三uu快三| www.36sw.com-趣9购彩票-| www.197565.com-今晚七星彩开什么| www.365271.cc-体彩开机号码今天| www.470088.com-境外彩票公司| www.x91.club-网络购彩500| www.1859.wang-新浪爱彩高清走势图| www.07868.com-中彩那天原文| www.5158.gg-韩国彩票中奖号| www.22926.cc-河南彩票大奖| www.10yr.com-初中彩铅风景画图片| www.1978.org-王牌彩票赛车| www.08133.com-网址特彩吧与你同行| www.637027.com-彩虹5出口-| www.721926.com-体彩彩票站牌匾| www.297137.com-非凡彩票-| www.374612.com-精彩旅图-| www.ip54.com-烟台福彩中心官网| www.675604.com-天下彩票资料…| www.762973.com-柬埔寨做彩票犯法吗| www.879406.com-丽水黑彩-| www.672701.com-东方一分彩计划软件| www.789206.com-澳洲5分彩全天计划| www.874647.com-黑彩平台信誉排行| www.98028.cc-时时彩哪个软件靠谱| www.100078.com-豪门彩票苹果版| www.180861.com-甘肃快三中奖号| www.279552.com-分分时时彩计划龙虎| www.13xu.com-体育彩票三等奖| www.1409.cc-福利双色球彩票开奖| www.404567.com-微信有人推销买彩票| www.560322.com-u9彩票网能提现吗| www.652726.com-彩票一般几点钟开奖| www.731473.com-易彩堂大厅-| www.803732.com-牛彩三d图谜总汇九| www.873911.com-手机网上怎样买彩票| www.587620.com-竞彩足球比分官网| www.761498.com-山西省体彩中心电话| www.785566.com-领航彩下载-| www.891772.com-彩票龙是什么意思| www.965332.com-爱乐透福彩彩票| www.cai3453.com时时彩高手方案| www.mr21.cc-中彩吧的骗局| www.2lx.cc-体彩不能买双色球么| www.72dz.com-百博七星彩-| www.cai5977.com贵州快三开奖走势图| www.kg34.com-中彩网3d走势图表| www.271162.com-彩28彩票下载| www.13yb.com-七星彩中几个数有钱| www.1392.org-福彩三d林涛和值谜| www.qh64.com-厦门好彩烟-| www.46pc.com-手机玩彩票软件下载| www.0017.cn-易彩堂彩票下载安装| www.180336.com-上海快三开售时间| www.254696.com-吉林福彩快三助手| www.350758.com-手机彩膜diy| www.822369.com-愛博彩票-| 快彩在线www.2632j.com| www.123871.com-风彩还是风采| 好彩www.60123k.com| www.ey86.com-黑彩余额修改器| www.zi46.com-中国快三福彩官网| www.610071.com-初买彩票的方法| www.700066.com-辽宁中彩网双色球| www.774425.com-三分时时彩历史开奖| www.45id.com-安卓版彩19-| www.664.hk-10分快3彩票计划| www.6029.cc-新浪彩票首页官网| www.22866.com-中国体彩的排列三| www.596099.com-中彩票后怎么领奖| www.771072.com-时时彩照片-| www.845590.com-开竞猜型体育彩票| www.907255.com-彩票6十1开奖号码| www.961984.com-在网上买彩票靠谱吗| 500彩票网www.61655c.com| www.je11.com-爱彩乐专业版| www.yb75.com-未派彩-| www.10ca.com-体彩屋邀请码哪里有| www.037639.com-时时彩独胆技巧大全| www.520856.com-分分彩九码-| www.590933.com-tx22cc天下彩| www.926181.com-手机注册买彩票软件| 福彩www.2109m.com| www.2449.pw-盈彩app正规吗| www.59nn.cc-大众彩票下载安装| www.1341.vip-中国体育彩官网下载| www.878559.com-体彩福彩开奖日| www.273535.com-快彩在线彩票| www.93ni.com-亚盘足彩分析师| www.78394.com-wps做彩票走势图| www.043773.com-高频彩二十年经验| www.464369.com-体彩怎么看中奖方式| www.882416.com-易彩网代玩是真的吗| www.958439.com-彩九怎么下载安装| 网易彩票www.516105.com| www.535655.com-福利彩票数字怎么填| www.707653.com-足彩任九复式计算器| www.782781.com-彩票七彩乐开奖查询| www.851013.com-公益彩票三d开机号| www.900613.com-赢钱彩苹果版| www.954479.com-博中彩票-| 亿龍彩票www.1368x.cc| www.754833.com-北斗福彩今日预测| www.828285.com-彩票是假的-| www.890428.com-彩票试玩可以提现的| www.953215.com-台湾福星彩官方网站| www.993353.com-足彩竞猜方法| www.em67.com-人人快三登陆| www.880135.com-彩票领奖过程| www.770937.com-七彩阳光广播操教案| www.891065.com-新快三每天开多少期| www.951741.com-竞彩8串1最高奖金| 多乐彩票www.544242.com| www.644432.com-微信新未来彩票平台| www.744479.com-彩虫app下载| www.0492.cc-360足彩胜-| www.521416.com-今日彩票吉祥数字| www.676574.com-福利彩票年均销售额| www.39ai.com-k彩是否合法| www.2192.net-今天福彩3d真帝王| www.d83.org-全国第一盛兴彩票网| www.50pj.com-足彩进球开奖结果| www.397.hk-百度浙江男子中彩票| www.5886.net-双彩网体彩三句话| www.11692.com-移动手机彩票积分版| www.45758.com-重庆时彩彩开奖结果| www.040851.com-足球博彩概率学| www.379384.com-彩票代码编程| www.361639.com-下期彩票开奖时间| www.259054.cc-足彩返还率使用心得|