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.50ft.com-亚洲彩票平台| www.404848.com-竞彩中奖答案顺口溜| www.537238.com-福彩怪字王-| www.999329.com-大运彩票手机app| www.te72.com-苹果手机购彩软件| www.151.xyz-豪亨博彩票新网站| www.1344.net-福彩七乐彩| www.7253.cn-彩虹挂在天上像什么| www.31239.cc-卓易彩票ios| www.84556.com-山东彩板今日价格| www.047045.com-彩票计算软件安卓版| www.218903.com-大联盟彩票是真是假| www.311567.com-足球竞彩258下载| www.389765.com-彩8彩票安卓版官网| www.y10.top-奇彩娱乐开户| www.61my.com-福彩变腐彩-| www.1355.in-澳门哪里买彩票| www.7649.vip-体育彩票p图| www.30313.com-大连体彩中心电话| www.006553.com-幸运彩票官方网站| www.168498.com-内蒙快三今日必出号| www.307253.com-36选7体彩走势图| www.378912.com-怎么加盟体彩| www.490538.com-湖北体彩中心| www.570540.com-七彩云南翡翠手链| www.659454.com-皇都彩票一微信转账| www.733225.com-极速五分彩官方开奖| www.812363.com-福降天下凤彩网| www.884348.com-彩票有走势规律吗| www.954824.com-福利彩票一月七号| 吉利彩票www.80065d.com| www.072602.com-香港四亿彩票| www.234897.com-彩500正规软件| www.328144.com-3d乐彩论-| www.500038.cc-彩票性缘贴吧| www.616902.com-吉林时时彩爱彩乐| www.741617.com-577彩票注册| www.920807.com-神彩争霸8ⅱ下载| 大赢家彩票平台www.937787.com| www.xi09.com-7彩国际是不是假的| www.82xo.com-竞彩足球冷热| www.5690.org-三彩翡翠值钱吗| www.339338.cc-买彩票的可靠软件| www.476377.com-今天福利彩票式机号| www.570666.com-网上购买福彩可靠吗| www.698306.com-简短描写彩虹的句子| www.782420.com-快三秒快餐电话新塘| www.859916.com-十分彩的骗局| www.923433.com-人人彩票安全可靠吗| www.981045.com-七彩礼品鲜花| www.sd24.com-吉林快三坑爹| www.547841.com-体彩七位数随机选号| www.701223.com-下载福彩开奖公告| www.836517.com-江苏快三346| www.954959.com-瑞彩网注册邀请码| www.bb16.com-体彩大乐透兑奖流程| www.9gm.com-天天乐彩票网登录| www.711.me-足彩串关奖金计算表| www.46874.com-时时彩分析软件安卓| www.037581.com-体彩竞彩一倍多少钱| www.187625.com-五分时时彩开奖结果| www.289337.com-快三单式中两个号码| www.367748.com-刚力彩芽有什么背景| www.450576.com-游彩网官方首页| www.550072.com-锋彩直播出垃圾软件| www.668760.com-华人娱乐彩票注册| www.735331.com-乐米彩票改名| www.800088.cc-河南体育彩票48i| www.868588.com-佰万彩票平台下载| www.934694.com-天天赢彩票网址| www.981874.com-3d福彩中国彩吧| www.cp4766.com-湖北快三是真的吗| www.lk94.com-249彩票app-| www.zz93.cc-三分时时彩怎么玩| www.19si.com-足彩19043推荐| www.233.cm-口袋彩店下载| www.5240.win-体彩彩票骗人| www.9909.cm-四川体育彩票网站| www.55217.cc-福彩幕后的老总| www.99613.cc-北京福彩投注站| www.mx7.cc-人人中彩票手机版| www.20718.com-状元彩票网能提现吗| www.135639.com-彩票导航之家| www.268030.com-湖北快三实时分析| www.501019.com-彩超什么时候发明的| www.711155.cc-竞彩足球分析师| www.wp04.com-彩票表格制作| www.2557.xyz-世界研究彩票牛人| www.010359.com-御彩轩计划时时软件| www.189354.com-彩票平台刷流水技巧| www.376108.com-百乐彩怎么登录的呢| www.550540.com-火星彩票app| www.755711.com-旺彩十一选五软件| www.901876.com-昨天体彩开奖号码是| www.ak61.com-河南快三二码遗漏表| www.t13.club-郑州买彩票中奖| www.94nl.com-彩金白菜网站| www.58912.com-七星彩票出奖结果| www.140202.com-足彩加app下载| www.279214.com-分分彩后一杀一码| www.397990.com-局七星彩排列五| www.543061.cc-今日体彩开奖号多少| www.807606.com-彩票有收藏价值吗| www.ag10.com-高频彩票采集器| www.vs32.com-福建省体育彩票论坛| www.01av.com-靠谱的彩票平台出租| www.66rk.com-彩美旬果磁力链接| www.2487.xyz-体彩一e球彩| www.7898.wang-彩票网站开发定制| www.19727.cc-中央教育福彩开奖| www.71377.cc-彩票端快3-| www.036617.com-快三中彩网大数据| www.226085.com-福彩排列3开奖结果| www.306934.com-q彩网是真的吗| www.373783.com-彩智彩票app| www.455632.com-害人的体彩1l选5| www.544494.com-彩票为什么不好中| www.704399.com-中国足彩竞猜胜平负| www.773575.com-谁有彩票送彩金的| www.872395.com-专业彩吧助手吧| www.955930.com-彩票数据修改| www.cp6822.com-浙江快三-| www.004967.com-田彩芽根的功效| www.170336.com-北京快三结果走势图| www.354569.com-加拿大彩票中奖号码| www.566159.com-58cc赢彩彩票| www.673845.com-竞彩足球专家| www.893579.com-安徽快三和值怎么买| www.tb56.com-中国福彩有哪些彩种| www.157.date-雨后彩虹网名| www.9830.cm-星期一有什么彩票| www.002374.com-北京体育彩票彩票| www.202358.com-黔南州福利彩票中心| www.466583.com-七乐彩中六个多少钱| www.604872.com-彩44彩票app| www.699060.com-山东彩票十一选五走| www.868393.com-七星彩近十期的号码| www.989003.com-快三软件计划手机版| www.74213.com-能买七乐彩的网站| www.125567.com-福彩十选五是赌博吗| www.281507.com-怎样确定时时彩和值| www.428816.com-福彩双色球大奖| www.673092.com-七星彩领奖时间| www.867558.com-章鱼彩票暂停售彩| www.961114.com-内蒙古体彩网点| www.222168.cc-一分快三计划网页版| www.557173.com-现任福利彩票主任| www.4470.cn-吉祥彩票网是真的吗| www.074739.com-金彩网彩富-| www.444161.com-彩31黑平台-| www.540245.com-国外有足球彩票吗| www.55dd.com-点彩票二维码扫描| www.2486.xyz-真精华布衣好彩网| www.23629.cc-彩神x8软件-| www.061335.com-我要去附近的彩票站| www.162161.com-彩乐汇是黑平台吗| www.275790.com-彩票专家赵公明| www.456775.com-今期四不像彩肖彩图| www.77914.com-六爻测彩票断决1| www.408111.com-七星彩假的-| www.965383.com-快三输了10万| www.ni52.com-大发快三总平台计划| www.319200.com-七星彩下载最新版本| www.455501.com-乐彩平台真的假的|