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.42146.com-彩票12网址-| www.28jc.com-韩国五分彩怎么玩| www.05247.cc-有没有手机投注彩票| www.448661.com-中国彩票是合法的吗| www.612189.com-时时彩票吧-| www.5233.me-大乐透唯彩推荐号| www.966326.com-网络兼职福利彩票| www.541318.com-河南省福彩领奖地址| www.654448.com-聚宝盆时时彩安卓版| www.766355.com-时时彩分-| www.855917.com-美国彩票专家霍华德| www.952264.com-五省快三基本走势| www.dg49.com-福利彩票有哪些彩种| www.143658.com-卖黑彩犯法怎么判刑| www.310969.com-甘肃福彩中心电话| www.414140.com-新浪中国竞彩对阵表| www.522633.com-分分时时彩追号计划| www.664251.com-七星彩今晚资料| www.et7.com-快三复式万能四码| www.678895.com-欧冠足彩攻略| www.583280.com-978彩票ios-| www.691157.com-管家婆彩图库| www.795664.com-苏州竞彩店赚钱吗| www.881767.com-q彩app下载-| www.963008.com-天下星空彩票免费| www.cai06.cc-河北快三-| www.kn99.com-怎样买易彩快3能赢| www.779269.com-80彩票苹果版| www.571164.com-下载734期期好彩| www.670783.com-俄罗斯皇家国际快三| www.767916.com-新淘彩网-| www.877882.com-中国彩迷-| www.ag63.cc-快三开奖结果河南的| www.xh83.cc-七彩国际投资| www.144148.com-竞彩混合怎么算中奖| www.239135.com-套彩金刷流水| www.318510.com-贵州快三跨度走| www.389886.com-彩票这么难中奖啊| www.505143.com-注册给彩金网站| www.579584.com-快三开奖程序| www.03075.cc-中彩啦是真是假| www.59285.cc-咋申请买彩票| www.012187.com-家彩网杀号-| www.8wj.cc-228彩票下载| www.88sm.com-爱彩人双色球走势图| www.144293.com-足彩胜负过关规则| www.193481.com-吉林省体彩领奖流程| www.8776.org-广东福彩官方网| www.655565.com-体彩彩票中奖分布| www.70243.com-怎么买电竞彩票| www.025941.com-3号彩票平台| www.317102.com-重庆时时开彩结果| www.421376.com-特彩-| www.527878.com-256彩票官网下载| www.599288.com-怎样学买彩票| www.674256.com-高频彩要取消吗| www.760076.cc-五福彩票安卓版下载| www.bw50.com-甘肃福彩一定牛| www.45eu.com-我要下载152彩票| www.091217.com-春秋彩票娱乐登录| www.65vb.com-完美国际彩票平台| www.667892.com-彩票官员落网| www.782782.com-快三秒奶茶怎么加盟| www.951274.com-腾讯彩票竞猜补偿| www.ix70.com-微信群快三-| www.55547.com-买福彩快三-| www.369439.com-幸运分分彩开奖历史| www.383207.com-彩票开奖19029| www.578668.com-pk彩吧注册-| www.672155.com-懂彩宝双色球预测| www.793106.com-玩福彩快三能赚钱吗| www.106345.com-彩票号码怎么选6位| www.187608.com-时彩五星走势图| www.1433.vip-众够彩票会员登录| www.8648.wang-好运来彩票计划| www.748.tv-百乐彩网页平台| www.527055.com-博盈高手彩票论坛| www.261049.cc-尊彩可信吗-| www.16xv.com-nba篮球竟彩网| www.mx15.com-在汉川开一个彩票店| www.652132.com-查看一下彩票开奖| 百姓彩票www.bxcp3.com| 易彩网www.12455p.com| www.399526.com-海南七星彩免费资料| www.568703.com-约彩365注册不了| www.391452.com-在线艾彩原创视频| www.508371.com-七星彩开心彩版区| www.ys2.com-赠送彩票-| www.324379.com-彩票网址大全导航| www.427123.com-菲女踩狗足彩| www.529397.com-逆袭彩票计划软件| www.605370.com-彩晶膜生产厂家| www.725544.com-台湾福星彩现场直播| www.809199.com-彩票的中奖概率多少| www.904122.com-华尔兹快三跳法| www.973585.com-彩虹的简单画法| www.ej16.com-高频彩违法吗| www.29vz.com-昨天福彩开奖情况| www.019778.com-体彩竞猜还能搞几年| www.104021.com-福彩老快三违法吗| www.558048.com-彩铅动物手绘图片| www.997480.com-快三最高邀请码| www.mx43.com-500彩票开挂| www.199508.com-快三是不是时时彩| www.000305.com-彩票头条计划| www.929099.com-七星彩杀号定胆| www.ad55.cc-腾讯时时彩开奖公告| www.7jq.com-彩铅画画婚纱图片| www.66279.com-网福利彩票自动选号| www.101408.com-正彩官网-| www.13119.cc-今日足彩稳胆推荐| www.66575.cc-博京娱乐平台时时彩| www.199970.com-11选3体彩-| www.11504.com-双色球彩乐乐幸运| www.199.cn-彩吧vip购彩下载| www.7413.cc-色彩斑斓的意思| www.23452.cc-足球彩票预测软件| www.04rv.com-彩铅教程视频| www.15313.com-彩库宝典图库| www.052285.com-鸿运来彩票网| www.136205.com-968彩票网站| www.am0.cc-河北体彩11选5| www.2fa.com-时时彩平台有哪些| www.70ce.com-中彩票网首页| www.334925.com-江苏快三走遗漏| www.659614.com-新彩网吧-| www.868881.com-福彩双色球中奖骗局| www.957024.com-下载7k官方彩票| www.rk61.com-福建体彩31选7| www.481118.com-和彩印语录-| www.560362.com-博彩游戏注册送彩金| www.642474.com-彩世界软件下载| www.14sp.com-腾讯时时彩开几期| www.71322.cc-江苏快三遗落号| www.i84.cn-一分快三在线计划网| www.245.date-福彩3d断组预测| www.858949.com-彩票查-| www.407329.com-体彩七星彩开结果| www.981754.com-毕节买彩票中奖| www.gl32.com-福彩网上能购买了吗| www.5907.biz-彩礼钱具体包括哪些| www.608974.com-中国体彩七星彩奖历| www.712323.com-美国人结婚要彩礼吗| www.956135.com-传影和彩影-| 购彩堂www.640118.com| www.669115.com-海南七星彩技巧大全| www.266143.com-体彩大乐透选号技巧| www.957959.com-彩票业-| www.760689.com-重庆时时彩分析软件| www.45165.com-三d彩票开奖今天| www.ut46.com-网易彩票幸运选号| www.982323.com-日本彩票广告| www.4864.org-卓易彩票官网地址| www.641.bid-985彩票官方网站| www.637251.com-全国彩票销售额| www.728601.com-彩吧助手3d开| www.794814.cc-新彩吧图谜-| www.861082.com-天津寸时彩开奖号码| www.939245.com-福彩的快三是哪个| www.990376.com-江苏快3彩票网| www.ed76.com-做彩票代理安全吗| www.6rb.com-彩票充10送50| www.8768.hk-易经与彩票中的规律| www.265418.com-彩经网3d最小值|