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天

知道了
彩01彩票 www.526342.com-享受辉煌彩票合法吗| www.092772.com-彩钢瓦围挡有色差| www.34580.com-中国彩吧首页论坛页| www.292949.com-中国福彩更懂彩民| www.438655.com-江阴福彩店转让| www.555977.com-体彩刮刮乐新票图片| www.660379.com-泉州体彩直播聊天室| www.321526.com-福利彩票开奖大厅| www.22932.cc-彩票大奖新闻的背后| www.056301.com-快三时间调整| www.01.hk-宁德体彩站点| www.98gm.com-国丰彩票是正规的吗| www.5360.cm-淘宝买彩票怎么兑奖| www.25359.cc-彩铅人物笔法| www.214500.com-彩票店怎么加盟| www.064598.com-星空彩铅画教程| www.268725.com-体彩关爱留守儿童| www.365640.com-彩铅简笔画卡通人物| www.509817.com-缤果彩票是不是非法| www.626730.com-福彩好运三中奖规则| www.765911.com-盈盈彩票网址是多少| www.919357.cc-网上买彩票总是输| www.cp3302.com-一分快三是真是假| www.tw45.com-分分彩是如何害人的| www.c9.com-送彩金彩票-| www.qc19.com-577彩票官网| www.388158.com-老挝博彩打工可靠吗| www.50942.com-什么彩票平台送彩金| www.309721.com-彩票照片能兑奖吗| www.ee89.com-彩票规则说明| www.63026.com-彩票开奖历史公告| www.488533.com-八喜彩票主页| www.688774.com-武汉快三走势图| www.7642.pw-中国体育彩票标志| www.6045.vip-足球彩票胜负彩推荐| www.523881.com-所有彩票网站| www.661557.com-足彩怎么买串划算| www.899528.com-河南快三软件| www.971390.com-二分彩是不是骗局| www.047277.com-赢钱彩可靠吗| www.774.cm-手机买彩票里的猫腻| www.93pb.com-体彩刮刮乐数字代码| www.297161.com-乐购彩票是黑平台| www.351844.com-彩票值得吗-| www.760837.com-超级时时彩开奖记录| www.897777.com-害人的高频彩票输惨| www.979130.com-七星彩彩经网| www.zw2.cc-彩之网彩芽-| www.369841.com-体彩大乐透几点封盘| www.480054.com-购乐彩网-| www.820931.com-彩钢夹芯板安装图| www.885611.com-天下好彩彩团网| www.953213.com-彩票118平台| 天天中www.77ttz.com| www.28830.com-福利彩票奖金规则| www.69385.com-彩博国际-| www.517930.com-中国中彩票几率大吗| www.623311.com-热拉骗玩彩票| www.953684.com-pp彩票是不是正规| www.uk58.com-彩铅画图片大全| www.256629.com-手机彩票投注客户端| www.356403.com-牛人彩票可以挣钱| www.21816.cc-送彩金88-| www.028406.com-博瑞彩票快三| www.713090.com-福彩3d为什么难中| www.862954.com-点击更多精彩| www.968024.com-刘亮彩票-| www.307912.com-彩票极大极小是什么| www.04gy.com-彩铅名画图片| www.2314.wang-彩吧图库3d第五版| www.934947.com-红旗彩票是骗人的吗| www.77ac.com-福彩单双期走势| www.083050.com-省份快三网站| www.884123.com-五行数字与彩票3d| www.895535.com-进球彩对阵表| www.335032.com-乐彩网3b-| www.485014.com-仟彩摸吧电话| www.701060.com-足彩开奖分析| www.637682.com-体育彩票今天开业| www.223287.com-时时时彩专家计划| www.381761.com-点击进入精彩内i容| www.os16.com-新昌双彩怎么发展| www.27ne.com-体彩实体店厂家现货| www.538289.com-国彩500万-| www.688395.com-竞彩店微信-| www.806200.com-福彩3b试机号| www.347890.com-乐彩网首页一分快三| www.538296.com-足彩19048期| www.665995.com-手机购买体育彩票| www.089448.com-彩票唯一官方网站| www.23wj.com-福彩相年福富| www.1416.pw-河北福彩3的| www.c4.biz-人人快三-| www.oo51.com-陈赫中奖的彩票| www.09jp.com-下载最新彩票| www.412734.com-足彩2串1规则| www.vj64.com-河北福彩快三规则| www.93tk.com-小清新彩色背景图片| www.3641.xyz-旺彩大师预测详情| www.3559.cn-福利彩票忏悔| www.490010.com-掌上百胜百胜彩票| www.639162.com-中彩网福彩3d预测| www.775052.com-香港数字彩票有几种| www.894313.com-快三追号软件下载| 天下彩www.954689.com| www.27687.com-体彩招牌图片大全| www.995594.com-竞彩串关图-| www.800099.com-天禧彩票-| www.827359.com-彩票中怎么顺龙| 大赢家彩票平台www.211857.com| www.qx35.com-美国一分彩开奖查询| www.435896.com-广东体彩网下载软件| www.265875.com-河南省481彩票网| www.593391.com-多彩投烂项目| www.325362.com-106彩票app-| www.456408.com-官方7k彩-| www.561686.com-世界杯彩票奖金多少| www.621298.com-红旗手机彩票| www.tz45.com-彩票屠龙法-| www.89lg.com-彩票可以买尾数单双| www.9573.com-福彩东方6加1| www.001894.com-高澜彩票专栏| www.ba25.com-5分快三-| www.6ar.com-购彩止损-| www.4010.biz-混合竞彩网计算器| www.70364.com-彩运8鼎盛登录| www.444534.com-彩票怎么看中奖号| www.356426.com-单位发彩票中奖| www.530508.com-时时彩任三选号技巧| www.652902.com-安徽快三时间| www.2888.wang-快三如何中奖| www.147844.com-尊皇彩票平台| www.tz64.com-福彩快三顺子多少钱| www.873744.com-彩票源码平台出租| www.fc22.cc-破解彩票程序| 华彩www.71399r.com| www.325135.com-下载彩计划软件| www.660693.com-体彩怎么看是否中奖| www.622095.com-五福彩票普通版本| www.922918.com-生产彩色纸箱设备厂| www.981800.com-毕节彩民中奖| www.cai100.cc-快三走势图河北| www.hl84.com-湖北快三走势图连线| www.229346.com-百盈快三是真是假| www.wz83.cc-七星彩头尾百分百中| www.744212.com-如何下载彩虫app| www.297913.com-福彩快三讨论交流群| www.156151.com-好客彩ios-| www.585195.com-懂彩宝双色球| www.8568.biz-体彩巨奖排名| www.93685.cc-福利彩票詹天佑最新| www.318552.com-500·彩票-| www.289328.com-大华彩票-| www.96971.com-中彩网大乐透推荐号| www.3289.xyz-福利彩票彩宝贝汇总| www.396164.com-星期日买什么彩票| www.598595.com-七星彩中奖号码表| www.266581.com-河北体彩快三中奖号| www.562651.com-中福5分快三| www.189462.com-江苏快彩助手| www.6379.biz-时时彩直播现场| www.8430.com-买彩票赔了很多钱| www.61711.cc-福彩双色球是个骗局| www.845949.com-福彩摇奖作弊视频|