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.yi68.com-彩票投注站赚钱么| 亚洲彩www.68568m.com| www.261054.cc-尊彩-| www.598700.com-3d黑彩玩法-| www.3322.date-公益彩票官方网站| www.09427.com-南宁福彩十佳投注站| www.78671.cc-乐彩的官方网址| www.406813.com-温县订婚彩礼多少钱| www.45414.com-福利彩票微信代理| www.025146.com-彩票做号软件| www.138036.com-可以网上买彩票了| www.069573.com-神彩v1-| www.207002.com-内蒙快三今天预测号| www.n95.net-豪彩vip注册登录| www.88ri.com-体彩多久过期| www.10062.com-福彩快三一注多少钱| www.531368.com-彩九九下载-| www.627778.com-赌彩票骗局视频| www.720025.com-七星彩购买技巧| www.406386.com-丹东彩票网丹东彩吧| www.977469.com-去彩妆店化妆多少钱| www.pj82.com-彩票店开镇上咋样| www.330940.com-极速赛车彩票解码器| www.528536.com-今晚彩票预测号码| www.766376.com-淘宝彩票客户端下载| www.959650.com-百盈快三直播| www.ra53.com-快三二不同号技巧| www.1253.la-乐彩网最新开奖公告| www.435.tv-uc彩票网app| www.273226.com-彩票中心工作如何| www.447773.com-分分彩购买-| www.617531.com-快三输钱怎么办| www.752963.com-雪中彩影-| www.954843.com-给瑞彩祥云网站| www.u29.xyz-彩票支票取钱流程| www.5669.biz-大丰彩票下载| www.065067.com-500彩票可不可信| www.2063.in-旺旺彩票网址| www.9245.com-万达彩票是真的假的| www.wo39.com-体彩屋是正规平台吗| www.851234.com-时时彩qq投注| www.13xv.com-找个最可信的彩票网| www.774417.com-简单水彩画图片| www.869376.com-七星彩中几个有奖| www.944173.com-腾讯体育博彩| www.992176.com-体彩排列五玩法规则| www.bn34.com-广东体彩ii选5| www.xk46.com-鑫彩国际是干嘛的| www.47888.com-好彩网怎么样| www.gz28.com-盈彩骗局-| www.168533.com-快三中2个号多少钱| www.312218.com-幸运快三长龙助手| www.388440.com-骰子彩票的技巧| 500彩票www.722571.com| www.wz11.com-福彩快三跨度表| www.883632.com-吉林快三一定牛遗漏| www.082265.com-彩票平台互刷风控| www.182965.com-快三客是什么软件| www.251359.com-河北快三开一定牛| www.643668.com-时时彩太假-| www.805570.com-网上买彩输了很多钱| www.931930.com-体彩门头要求| www.203400.com-买彩票的经典句子| www.758839.com-网上代理彩票找会员| www.397642.com-福彩刮刮奖中奖图片| www.960635.com-最新彩票诈骗案例| www.zs18.com-买时彩的公式| www.317289.com-广西快三网易彩票| www.753152.com-中华彩吧的网站| www.52zc.com-彩无敌计划-| www.521113.com-怎么在黑彩网站赢钱| www.2928.site-开心彩怎么玩| www.397205.com-体彩春节后开奖时间| www.12184.com-测彩票神准的高人| www.89vx.com-彩经网官网电脑版| www.913986.com-c16彩票-| www.cp1234.com-内蒙福彩快三| 500彩票网www.788464.com| www.9958.xyz-198彩平台网址| www.921708.com-m8彩票注册邀请码| www.553957.com-体彩大乐透相关术语| www.182983.com-快三客是真的吗| www.337201.com-福利彩票怎么玩法| www.728555.com-重庆高频彩是骗局吗| www.254696.com-吉林福彩快三助手| www.445331.com-开彩票店自己玩输了| www.093463.com-大福彩票合法吗| www.663490.com-乐彩彩票平台代理| www.801194.com-下载160彩-| www.923117.com-郑州58彩票店转让| www.982254.com-中华彩票彩种| www.qw13.com-全天重庆彩计| www.sm01.com-福利快三中彩网| www.4455.net-必发彩票官网登录| www.mj66.cc-分分时时彩是真的吗| www.386329.com-金彩网天下彩特吧| www.518872.com-彩票字谜3d-| www.699530.com-新浪彩票3d詹天佑| www.cp532.com-大发快三提现不了| www.086113.com-乐山快三-| www.522241.com-七乐彩特号码查询| www.317508.com-数字彩的另类打法| www.45eb.com-网络投彩平台安全吗| www.543423.com-网站彩票被骗| www.473103.com-彩票开奖大全体彩| www.571725.cc-时时彩绝密技巧| www.639778.com-牛牛牛彩票-| www.728001.com-名人彩票登录| www.829551.com-内蒙快三速查表| www.929661.com-七星彩杀头杀尾| www.998929.com-彩票头条新闻| www.194101.com-福彩10分钟开奖| www.95tt.com-678彩票网靠谱吗| www.1955.wang-福彩机号-| www.090848.com-福彩三地开机号今天| www.366337.com-彩宝计划-| www.960936.com-快三彩票中奖助手| www.666607.com-合乐彩票网正规吗| www.787113.com-体彩排例5开奖| www.5843.org-彩票中奖到哪里兑换| www.22jk.com-七星彩预则-| www.398302.com-福彩3d开奖号预测| www.678914.com-九购十分彩江苏快3| www.751962.com-亚洲彩票金盾| www.636895.com-洛阳福彩中心销售量| www.791672.com-南洋乐和彩几点开奖| www.909598.com-九宫五行测彩法| 吉利彩票www.66376f.com| www.972617.com-日彩网怎样才能中奖| www.jm0.com-福彩3d预测号| www.li09.com-好彩一走势图| www.cp9737.com-快三计划追号盈利表| www.pn58.com-湖北快三站点| www.691059.com-体彩三排试机号| www.801558.com-福彩官方投注软件| www.916038.com-彩票生意-| 大赢家彩票平台www.220875.com| www.100520.com-正版百乐彩-| www.533860.com-明发彩票是真是假| www.720870.com-彩票两元网正规吗| www.926651.com-五福彩票官方网站| www.qr13.com-竞彩体彩-| www.206104.com-易彩票-| www.498258.com-京彩中奖信息| www.32391.com-彩色压模地坪厂家| www.540244.com-福彩中奖号码双色球| www.661784.com-买足彩几串最合适| www.810201.com-体彩一体机安装图| www.873479.com-分分彩定位胆必中法| www.947516.com-外围足彩滚球怎么玩| www.991667.com-安徽福彩快3官网| www.tz5.com-百宝彩江苏快3| www.3640.cm-鸿彩可靠吗-| 博友彩www.820737.com| www.007093.com-彩票试号-| www.640944.com-时时彩图标-| www.569324.com-彩吧时空流码图| www.288350.com-爱彩乐如何注册| www.323133.cc-七彩乐历史开奖号码| www.202761.com-贵州彩票开奖结果| www.jj10.com-彩易福彩3d字迷| www.xj69.com-好彩堂开奖-| www.942842.com-go彩app-| www.be58.com-快彩真赚钱吗|