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天

知道了
1分快三 www.01251.com-福彩3d讨论交流| www.770769.com-福彩五码遗漏| www.3665.com-a3彩色复印机价格| www.cp5122.com-江苏快三隐藏规律| www.696569.com-非凡人工时时彩计划| www.804923.com-福彩双色球出号规律| www.910062.com-胜利彩票-| www.977665.com-在哪买世界杯彩票| www.cp9697.com-好彩3开奖结果查询| www.30117.cc-彩8娱乐下载安装| www.7218.loan-山东7乐彩开奖结果| www.764444.com-各种釉彩大瓶评价| www.863798.com-海口七星彩版专区| www.954719.com-排三走势图彩宝网| www.da17.com-彩神网是真是假| www.x18.space-中彩网大乐透开机号| www.1689.com-百姓彩坛论-| www.09398.com-广东体彩网走势图| www.39572.cc-好彩vip下载| www.8727.loan-全民足球竞彩下载| www.181177.com-旺彩苹果手机版下载| www.1595.vip-彩图图库资料大全| www.9966.pro-13号三地彩票开奖| www.023066.com-彩票5d开奖-| 快3彩票www.783802.com| www.ta91.com-乐盈彩官网-| www.9099.loan-下期头尾七星彩中| www.6cm.cc-怎样培训新彩票员| www.88kz.com-竞彩一直输-| www.555184.com-授权网上彩票511| www.661597.com-足彩选八场五串一| www.768090.com-戚泥丝彩票软件| www.866298.com-今天的彩票号码是| www.974157.com-河北省福彩官方网站| www.ds34.com-江苏快三有赢钱的吗| www.u46.cn-速盈彩是正规的吗| 博友彩www.923733.com| www.35716.com-竞彩网精彩团队骗局| www.000008.com-彩票春节-| www.907628.com-河南彩票诈骗| www.984642.com-彩八彩票是正规的吗| www.hz34.com-快三团队靠什么盈利| www.144129.com-体彩真还是福利彩真| www.238956.com-5亿彩合法吗| www.064234.com-私彩跟官方在追杀我| www.1862.cn-快三里怎么砍龙| www.03863.com-如何劝人不买彩票| www.405565.com-体彩总进球数| www.136175.com-彩票3000-| www.310678.cc-福彩3d神奇四码| www.482997.com-599彩票投注平台| www.905625.com-快三单双对赌套利| www.980125.com-彩票打票员会很难吗| www.am05.cc-购彩大厅360彩票| www.424878.com-彩票永久来-| www.561692.com-世界杯在那里面彩票| www.71rd.com-恒彩厨具-| www.782007.com-好运快三怎么下载| www.561063.com-信彩娱乐平台手机版| 中华彩票www.914906.com| www.3299.top-978彩票网提现版| www.77360.com-赢彩网是正规的吗| www.136984.com-免费彩票源码系统| www.315851.com-重庆时时彩开奖官网| www.661784.com-买足彩几串最合适| www.214866.com-四亿彩票平台| www.348523.com-彩票倍投赚钱妙招| www.138822.com-菲博时时彩平台注册| www.947721.com-多彩贵州评论孟伟| www.4241.org-陕西三彩集团评价| www.10011.cc-七乐彩中奖几率| www.31dc.com-彩虹歌谱-| www.870703.com-777彩票app-| www.mz00.com-凤凰彩票-| www.053938.com-快三到底怎么买| www.38bq.com-大公鸡七星彩规律| www.400940.com-七星彩割码规律| www.394618.com-江苏体彩兑奖地址| www.344528.com-彩票33可靠-| www.672816.com-奥克足彩缩水软件| www.133587.com-500彩票投注网| www.100489.com-易赢彩票官网app| www.420226.com-彩票直销-| www.664269.com-福彩太湖谜语总汇| www.791426.com-排3最大值彩经网| www.7rm.com-彩票中奖夫妻怎么分| www.280250.com-天天乐时时彩app| www.145877.com-金手指彩票推荐| www.139105.com-福彩3d兑奖在哪兑| www.760130.com-山东好彩快三是哪的| 乐彩赢www.0014n.com| www.cp464.com-福彩快3合肥| www.898431.com-玩彩票app安卓| www.375836.com-手机版百乐彩怎么玩| www.560092.com-安卓版冀彩宝下载| www.782925.com-彩票开奖7月29日| www.896278.com-瑞彩-| www.00uw.com-彩票少个角能兑奖吗| www.dq11.com-共赢彩票网-| www.c38.cc-二元彩票-| www.260887.com-足彩最新最快开奖| www.414421.com-出彩主题-| www.720050.com-快赢彩票网址| www.816939.com-中彩票福报八字| www.887312.com-亿发彩票是不是骗局| www.871292.com-彩73官方-| www.953059.com-九州彩-| www.cp238.com-乐彩网1分快3破解| www.658777.com-体彩排列三出奖结果| www.779381.com-哪种彩票最简单| www.858347.com-体彩大赢家旧版本| www.910799.com-竟彩网首网500| www.967943.com-彩票开奖网易彩粟| www.cp5336.com-贵州快三开奖爱彩乐| www.104928.com-雷霆彩票-| 500彩票www.66653z.com| www.977883.com-足彩买不了-| www.id00.com-彩票新政策-| www.550888.cc-凤凰彩票40088| www.669.cn-时时彩流水好刷吗| www.6074.cc-竞彩冷门凯利| www.61326.com-家彩开机号-| www.022532.com-五d体彩开奖结果| www.141636.com-3d走势图彩吧| www.418088.com-一号彩票安卓版下载| www.535453.com-福彩几位数中奖| www.603755.com-彩票怎样买能中大奖| www.678581.com-精英彩票心水175| www.ag10.cc-手机福彩-| www.02756.com-找一下江苏快三| www.82887.cc-海南七星彩头尾网站| www.561282.com-大财神彩乐园| www.3060.vip-51欢乐彩-| www.89rh.com-以太坊博彩dapp| www.835636.com-青海体彩开奖结果| www.085918.com-够力七星彩奖解梦| www.m11.in-彩之家大发快3预测| www.962921.com-天际彩票-| www.2qt.com-体彩投一注是多少钱| www.379172.com-时时彩操盘手抽分红| www.391146.com-众和彩票骗局| www.561966.com-4scc彩票图库| www.711007.cc-购买足球彩票软件| www.215848.com-百宝彩电子走势图| www.6928.top-七星彩抓规神器| www.5996.cc-足彩18072分析| www.893234.com-彩名堂计划好用不| www.120991.com-pc蛋蛋彩票下载| www.225751.com-福彩作弊事件视频| www.544365.com-福利彩票快3的玩法| www.230263.com-玩快三输了一万多| www.370753.com-彩进娱乐黑钱| www.1611.in-澳门快三规律| www.9979.loan-七星彩票今天开奖吗| www.53928.com-幸运五星彩票官网| www.018939.com-快三智能投注软件| www.699306.com-足彩猜比分-| www.845315.com-海南发展彩票| www.903546.com-星光彩票网站| www.979879.com-二分快三官网| www.cp8533.com-湖北快三一定牛推荐| www.ts99.cc-yy彩票_登录| www.219224.com-体彩大乐透开奖走势| www.85478.com-彩票投注兼职靠谱吗|