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.384687.com-今天让去买彩票吗| www.40nx.com-新浪彩票数字频道| www.887353.com-足球彩票算不算赌博| www.hv12.com-上海快三开奖结果爱| www.0545.top-福彩中心3d字谜| www.79ur.com-30彩票走势图表全| www.3931.tv-足彩胜负平中奖| www.9917.online博亚彩票靠谱么| www.346981.com-足彩卖料的人违法不| www.557448.com-简单水彩画教程花| www.700492.com-体彩排列三的和值尾| www.863733.com-腾讯75秒彩票| 500彩票网www.61655g.com| www.07mn.com-彩铅古风手绘图片| www.681256.com-赌博与彩票有何不同| www.823222.com-快彩乐遗漏号| www.965490.com-体彩11选5遗漏| www.gr17.com-7彩-| www.17yu.cc-体彩麻辣中奖图片| www.509592.com-彩16什么平台| www.666948.com-v9彩票下载安装| www.ka67.com-福彩江西快3玩法| www.81jx.com-足彩胜负彩单注奖金| www.2315.biz-彩票加州快三预测| www.272338.com-快三彩票属于赌博吗| www.236030.com-乐乐彩是真的吗| www.119431.com-一定牛快三遗漏号码| www.922.date-临沂市体彩兑奖中心| www.83ja.com-太湖字谜乐彩网论坛| www.42115.com-彩票是什么样| www.628350.com-分分彩厘模式| www.730305.com-彩尊安卓版下载| www.801553.com-93彩票是啥-| www.881034.com-人人平安彩票靠谱吗| www.991958.com-彩票都那几个数号出| www.959384.com-御彩轩苹果手机版| www.bo68.com-黑彩彩票平台| www.171883.com-上海快三一定牛预测| www.21so.com-大王彩票网-| www.731771.com-8k彩票官方-| www.63038.com-结婚谈彩礼技巧| www.130710.com-福彩官方彩票软件| www.761603.com-中国体育彩票的玩法| www.966809.com-体彩多少天兑奖| 500彩票网www.911209.com| www.mc20.com-玩彩app-| www.1683.net-17500乐彩-| www.22mu.com-网上哪个彩票平台好| www.705111.cc-彩票中奖助手下载| www.0174.vip-彩票买大小倍投计划| www.363078.com-灯产生彩虹-| www.120074.com-足彩彩票比分直播| www.9368.club-博猫彩票改名| www.195587.com-9彩官网-| www.318392.com-体彩开始结果查询| www.9184.shop-乐彩客客户端| www.652673.com-竞彩彩票怎么看| www.736752.com-银彩通是合法网站吗| www.870504.com-亿发彩票官方网站| www.939425.com-中国福彩票网官网| 名门彩www.33997w.com| www.906058.com-安徽快三一天是多少| www.974383.com-彩虹旗论坛-| www.cai9177.com河北省快三遗漏| www.56904.com-腾讯分分彩4星漏洞| www.965565.com-河南快三一天几期| www.cp3538.com-湖北快三推荐号| www.230938.com-湖北福彩快乐十分| www.185367.com-中原彩票的官方| www.309742.com-湖北省福彩中心地址| www.395666.com-彩虹姐姐-| www.566137.com-老安彩票预测| www.662008.com-竞彩中奖票-| www.732581.com-福彩彩开奖视直播| www.809518.com-河南快彩福彩一定牛| www.893380.com-手机彩票组合软件| www.966125.com-e8发彩网网站| VIP彩票www.546868.com| www.137201.com-体育彩票排列三周六| www.226563.com-3d牛彩字迷总汇| www.133330.cc-成都彩钢厂家直销| www.740751.com-28彩票怎么注册| www.786117.com-北京福彩中心在哪| www.885198.com-睛予众彩七星彩预测| www.984651.com-豪彩彩票官方网站| www.fi18.com-极速快三计划群| www.947985.com-四川体育彩票七位数| www.586485.com-彩票偏态学-| www.834639.com-好彩柠檬薄荷双爆珠| www.949946.com-彩帝app-| www.1688.blue-百姓彩坛心水三区| www.8716.vip-123天空彩票| www.47949.com-美国强力球彩票玩法| www.050530.com-彩票站怎么申请| www.169448.com-福彩快三qq群骗局| www.833201.com-成功彩票是真的假的| www.0885.bid-大乐斗彩票中奖说明| www.139105.com-福彩3d兑奖在哪兑| www.349934.com-合肥最大的彩票店| www.554705.com-彩票回补什么意思| www.777810.com-京彩app是真的吗| www.982044.com-排列五彩票对比器| www.7720.vip-2368彩票-| www.303237.com-彩虹e台-| www.861553.com-河南幸运彩号码图| www.75re.com-彩票代刷流水| www.sh98.cc-彩票96期-| www.162927.com-凤凰网彩票合法吗| www.790780.com-大乐透彩票模拟器| www.931865.com-新浪竞技体育彩票网| www.af41.com-手机手机彩票123| www.706975.com-永兴娱乐彩票| www.826752.com-太阳彩票平台| www.947129.com-大福彩票合法吗| 500彩票www.342577.com| www.609041.com-百度贴吧彩票讨论版| www.770290.com-快乐彩票注册| www.878553.cc-综艺福彩网站| 大赢家彩票平台www.701671.com| www.09081.com-怎么短信购彩| www.488266.com-香港时时彩是骗局吗| www.566037.com-易彩堂j59cc| www.152117.com-山东体彩即开订票| www.231033.com-官方快三辅助器| www.177929.com-大发快三技巧顺口溜| www.257422.com-vip彩-| www.357162.com-好看的彩铅情景画| www.433777.com-重庆市福彩发行中心| www.519003.com-皇家分分彩app| www.577334.com-彩票今日开奖查| www.635788.com-重启时时彩官网| www.695120.com-北京福彩3的试机号| www.760917.com-彩票大本营-| www.818055.com-直播足彩-| www.879184.com-彩票十二生肖开奖| www.941218.com-中国体育彩票机选网| www.983943.com-518彩票骗局| www.cl59.com-福彩天地报电子版| www.745608.com-天吉福彩论坛手机版| www.832583.com-华彩网专家预测| www.908077.com-网上彩票平台刷彩金| www.969672.com-彩票追号技巧| 126彩票网www.319126.com| www.954570.com-61彩票开奖结果| www.760926.com-好彩1绝招-| www.31268.com-黑龙江福彩大家乐| www.88876.com-胜负彩18128期| www.040563.com-福彩短信投注真的吗| www.928665.com-够力七星彩图案| www.985572.com-足球竞彩大赢家| www.rj24.com-网上买快三-| www.2tt.cc-黑彩平台总汇| www.64yp.com-黄金海岸彩票平台| www.548.me-现在手机能买彩票吗| www.825278.com-有没有竞彩猫合买群| www.948940.com-中国体彩购彩| www.993725.com-竞彩玩法讲解| www.ab77.com-快三开奖时间| www.d78.cc-福彩双色球分析| www.894896.com-超级大乐透彩票投注| www.013217.com-特区彩票网网站| www.536696.com-3d福彩3d-| www.981629.com-买彩票下载什么软件| www.04bp.com-长春黑彩-|