QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jQuery云服务器网站导航图片布局代码

原创商用 jQuery云服务器网站导航图片布局代码

jQuery基于SuperSlide.js制作通用的云服务器托管网站顶部导航下拉的宽屏菜单,banner图片轮播,促销推荐模块列表,页面滚动顶部始终固定导航,结合的网站顶部样式布局代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权保护,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/font-awesome.min.css" /><!--图标库-->

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.SuperSlide.2.1.3.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

<div class="banner-top index">
	<header class="header top-header">

		<div class="topnav ">
			<div class="container">
				<nav class="navbar">
					<ul class="nav navbar-nav navbar-left">
						<li>
							<a href="#" target="_blank">登录/注册</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right yhcx">
						<li>
							<a href="#" style="color:#FFdd00 !important"><i class="fa fa-gift hot-yhcx" style="color:#FFdd00 !important"></i>优惠促销</a>
						</li>
						<li>
							<a href="#">会员中心</a>
						</li>
						<li>
							<a href="#">新闻公告</a>
						</li>
						<li class="lang-style">
							<ul class="nav navbar-nav" style="display:">
								<li class="dropdown language-btn">
									<span class="dropdown-toggle m-t-0 " data-toggle="dropdown">
				<img src="statics/images/lang.svg" style="width:14px;margin-top:-3px"> 简体中文
				<b class="caret"></b>
			</span>
									<ul class="dropdown-menu language-select" style="display: none;">
										<b class="caret caret1"></b>
										<li>
											<a href="#">简体中文</a>
										</li>
										<li>
											<a href="#">繁體中文</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>

				</nav>
			</div>
		</div>

		<div class="container">
			<div class="row">
				<div class="col-xs-12 p-l-0 p-r-0">
					<nav class="navbar">
						<div class="navbar-header">

							<a class="navbar-brand" href="#">XX科技</a>
						</div>

						<ul class="nav navbar-nav navbar-right account">
							<li>
								<a class="btn login" href="#">客服中心</a>
							</li>
						</ul>

						<ul id="navbar" class="nav navbar-nav navbar-left">
							<li class="item" _h_nav="product">
								<a>产品中心</a>
							</li>
							<li class="item" _h_nav="plan">
								<a>解决方案</a>
							</li>
							<li class="item" _h_nav="support">
								<a>服务支持</a>
							</li>
							<li class="item" _h_nav="cooperation">
								<a>合作共赢</a>
							</li>
							<li class="item" _h_nav="culture">
								<a>企业文化</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</header>

	<div class="subnav">
		<div class="sub-nav" _h_nav="product" id="product" style="display: none;">
			<div class="container" style="padding-left: 90px;">
				<div class="row">
					<div class="col-sm-12">
						<dl style="margin-left: -60px;">
							<dt style="font-size:15px;">云虚拟主机</dt>
							<dd>
								<a href="#">新云主机</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">新云主机独享版</a>
							</dd>
							<dd>
								<a href="#">企业主机</a>
							</dd>
							<dd>
								<a href="#">PHP云主机</a>
							</dd>
						</dl>
						<dl style=" width: 18%;">
							<dt style="font-size:15px;">云计算服务</dt>
							<div class="col-xs-6 p-l-0 p-r-0">
								<dd>
									<a href="#" title="云服务器">云服务器<span class="hot" style="position: absolute;right: 0px;top: 0;">hot</span></a>
								</dd>
								<dd>
									<a href="#" title="云路由" class="cloudrouter">云路由</a>
								</dd>
								<dd>
									<a href="#" title="BGP公网">BGP公网</a>
								</dd>
							</div>
							<div class="col-xs-6 p-r-0" style="padding-left: 15px;">
								<dd>
									<a href="#" title="云硬盘">云硬盘</a>
								</dd>
								<dd>
									<a href="#" title="私有网络" class="cloudrouter">私有网络</a>
								</dd>
								<dd>
									<a href="#" title="高防IP">高防IP</a>
								</dd>
							</div>
							<div class="clearfix"></div>

						</dl>

						<dl>
							<dt style="font-size:15px;">服务器租用</dt>
							<dd>
								<a href="#">香港服务器</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">韩国服务器</a>
							</dd>
							<dd>
								<a href="#">美国服务器</a>
							</dd>
						</dl>
						<dl>
							<dt style="font-size:15px;">高防服务器</dt>
							<dd>
								<a href="#" title="香港高防服务器租用">香港高防服务器</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#" title="美国高防服务器租用">美国高防服务器</a>
							</dd>
						</dl>
						<dl>
							<dt style="font-size:15px;">专业方案</dt>
							<dd>
								<a href="#">服务器托管</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">机柜租用</a>
							</dd>
							<dd>
								<a href="#">IP Tranist</a>
							</dd>
						</dl>
						<dl style="margin-left: -0px;">
							<dt style="font-size:15px;">域名注册</dt>
							<dd>
								<a href="#">域名注册</a>
							</dd>
							<dd>
								<a href="#"> 域名转入</a>
							</dd>
							<dd>
								<a href="#">域名管理</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>

		<div class="sub-nav" _h_nav="plan" id="plan" style="display: none;">
			<div class="container">

				<dl style="margin-left:230px;">
					<dd>
						<a href="#">抗攻击方案</a><span class="hot">hot</span></dd>
				</dl>
				<dl>
					<dd>
						<a href="#">SSL安全证书</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">企业400电话</a>
					</dd>
				</dl>

			</div>
		</div>

		<div class="sub-nav" _h_nav="support" id="support" style="display: none;">
			<div class="container">

				<dl style="margin-left: 300px;">
					<dt style="font-size:15px;">系统维护</dt>
					<dd>
						<a href="#">系统维护</a>
					</dd>
				</dl>

				<dl style="    width: 25%;">
					<dt style="font-size:15px;">IDC支撐</dt>

					<div class="col-xs-6 p-l-0 p-r-0">
						<dd>
							<a href="#">Whmcs财务系统</a>
						</dd>
					</div>
					<div class="col-xs-6 p-r-0">
						<dd>
							<a href="#">DirectAdmin面板</a>
						</dd>
					</div>
					<div class="clearfix"></div>

				</dl>

				<dl>
					<dt style="font-size:15px;">数据中心</dt>
					<dd>
						<a href="#">数据中心</a>
					</dd>
				</dl>
			</div>
		</div>

		<div class="sub-nav" _h_nav="cooperation" id="cooperation" style="display: none;">
			<div class="container">

				<dl style="margin-left: 440px;">

					<dd>
						<a href="#">渠道代理</a> <span class="hot">new</span></dd>
				</dl>
				<dl>
					<dd>
						<a href="#">推广联盟</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">合作伙伴</a>
					</dd>
				</dl>
			</div>
		</div>

		<div class="sub-nav" _h_nav="culture" id="culture" style="display: none;">
			<div class="container">
				<dl style="margin-left: 390px;">
					<dd>
						<a href="#">公司介绍</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">发展历程</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">招贤纳士</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">联系我们</a>
					</dd>
				</dl>
			</div>
		</div>
	</div>

	<!--banner-->
	<div id="slideBox" class="slideBox">
		<div class="hd">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="bd">
			<ul>
				<li>
					<div class="item" style="background:#0028e9">
						<div class="container" style="padding-top:60px">
							<a href="javascript:;" target="_blank" class="buy-btn">
								<img src="statics/images/index-hk-banner.png" style="width:100%;padding-top:50px">
							</a>
						</div>
					</div>
				</li>
				<li>
					<div class="item" style="background:#0028e9">
						<div class="gaofang-banner-bg" align="center">
							<div style="padding-top:60px">
								<a href="javascript:;" target="_blank" class="buy-btn">
									<img src="statics/images/gaofang-banner-pic1.svg" style="width:100%;padding-top:130px">
								</a>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="item" style="background:linear-gradient(#705eff,#0053de 81%) no-repeat;background-size: cover;background-position: center;    padding-top: 120px;">

						<div class="container" style="height:400px">

							<a href="javascript:;" target="_blank" class="buy-btn">
								<div class="banner-content col-sm-5  p-r-0 p-l-0" style="padding-top:120px;">
									<p class="banner-title">
										机柜租用<br><span>香港SDC数据中心</span>
									</p>
									<ul class="banner-slogan">
										<li>T3+ 级容灾环境,高达60G BGP+CN2带宽接入</li>
										<li>7*24小时技术支援,欢迎机位、电源、带宽定制配搭</li>
									</ul>

									<div class="free-use-btn btn-white" style="margin-top:15px;">立即选购
									</div>
								</div>
								<div class="banner-img col-sm-7 p-l-0 p-r-0" style="text-align:right;">
									<img src="statics/images/index-colo-banner.png" style="width:90%;margin-top:-30px">
								</div>
							</a>
							<div class="clearfix"></div>
						</div>

					</div>
				</li>
				<li>
					<div class="item" style="background: url(statics/images/banner-hk-english-bg.jpg) no-repeat;background-size: cover;background-position: center;padding-top: 120px;">
						<div class="container">
							<div class="row" style="margin-top:10px; position: relative;text-align:center ">
								<a href="javascript:;" target="_blank"><img src="statics/images/banner-hk-english.png" style="width:95%;padding-top:10px;"></a>
							</div>

						</div>
					</div>
				</li>
			</ul>
		</div>

		<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
		<a class="prev" href="javascript:void(0)">
			<</a>
				<a class="next" href="javascript:void(0)">></a>

	</div>

</div>
<section class="index-tuijian ">
	<div class="container">
		<div class="col-xs-3">
			<a href="#" target="_blank">
				<div class="index-bq-one">
					<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/1.png"> </p>
					<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
						<li> <span style="color:#888">新用户红包 <b></b> </span>
							<span><div class="new-mj">专享</div></span>
						</li>
						<li>注册送660元现金券</li>
					</ul>
					<div class="clearfix">
					</div>
				</div>
			</a>
		</div>
		<a href="#" target="_blank">
		</a>
		<div class="col-xs-3">
			<a href="#" target="_blank">

			</a>
			<a href="#" target="_blank">
				<div class="index-bq-one">
					<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/2.png" style="margin-top:-8px;"> </p>
					<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
						<li> <span class="yhcx">香港服务器<b></b> </span></li>
						<li>双向CN2+BGP极速互访</li>
					</ul>
					<div class="clearfix">
					</div>
				</div>
			</a>
		</div>

		<div class="col-xs-3">
			<a href="#" target="_blank">
				<div class="index-bq-one">
					<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/3.png" style="margin-top:-8px;"> </p>
					<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
						<li> <span class="yhcx">云服务器<b></b> </span><span></span>
						</li>
						<li>卓越OpenStack?架构 </li>
					</ul>
					<div class="clearfix">
					</div>
				</div>
			</a>
		</div>

		<div class="col-xs-3">

			<a href="#" target="_blank">
				<div class="index-bq-one">
					<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/4.png" style="margin-top:-5px;"> </p>
					<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
						<li> <span>推介赚现金 </span> <span><div class="new-mj">财富</div></span> </li>
						<li>一次最高收益18000元 </li>
					</ul>
					<div class="clearfix">
					</div>
				</div>
			</a>
		</div>

	</div>
</section>

<script src="statics/js/main.js" type="text/javascript" charset="utf-8"></script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
密歇根神奇彩票 500彩票www.683717.com| www.365270.com-广西快三有几种吗| www.568079.com-买彩票要带身份证么| www.690197.com-c8cn万彩吧开奖| www.826577.com-98彩票app下载| www.cp8398.com-快三最新开奖号码| www.k50.top-玩诺亚彩票被骗了| www.19oe.com-有人带我一起买彩票| www.4373.cn-玩时时彩计划| www.17890.com-彩票三位数开奖| www.70465.com-好彩票提现-| www.3820.vip-新跑狗彩图-| www.20200.com-时时彩后三组三规律| www.71553.com-卓易彩票17年版本| www.250543.com-彩票怎么代理| www.374298.com-天下彩txcpcc| www.ya34.com-爱彩乐十一选五| www.359.com-如何才能中彩票大奖| www.125270.com-家彩开奖千禧3| www.207596.com-11选5购彩秘籍| www.470520.com-国外足彩推荐网站| www.882718.com-福彩基诺开奖结果| 彩票大家乐www.21202t.com| www.088195.com-足彩310竞彩| www.7628.cc-大乐透图迷与彩民乐| www.97tx.com-竞赢彩票真的假的| www.37uq.com-七星彩这个软件| www.055666.com-双色球彩票组号宝| www.120298.com-腾讯五分彩是什么| www.509386.com-彩票频道新浪| www.593811.com-七彩视界新版投屏| www.663810.com-中国彩票大全| www.351110.com-彩搜網-| www.422876.com-非凡彩票软件| www.516287.com-什么软件可以买体彩| www.585817.com-环彩网跑路-| www.658265.com-电视购彩渠道| www.722726.com-足彩主负什么意思| www.805463.com-重庆时时彩有门店吗| www.884105.com-杏彩-| www.975940.com-2018林州彩礼| www.cp8114.com-彩票王牌app| www.zg28.com-七七乐彩走势图表图| www.15733.com-彩票6+1开奖查询| www.68657.cc-彩票100本回血| www.041502.com-恒发彩票-| www.24447.cc-老梁问题彩民| www.mr65.com-澳客赢家彩票下载| www.n49.cc-500万足彩网| www.37zq.com-七彩乐带坐标走势| www.0032.cn-七星体育彩票奖表| www.362.date-购彩计划网-| www.7274.com-重庆十字彩开奖结果| www.219844.com-快彩荐号专家| www.332606.com-彩票中大奖多久到账| www.365940.cc-福彩3d今日开奖号| www.472323.com-重生之彩票大亨| www.530367.com-中国竟彩足球胜平负| www.693507.com-下载京彩app下载| www.777851.com-开私彩网站-| www.859940.com-福彩3d带线走势图| www.946282.com-福建体彩app| 彩乐乐www.cll168.com| www.220255.com-时时彩定胆公式| www.860449.com-体育彩票电脑| www.nc52.com-保定体彩站点申请| www.46476.com-彩票胆拖中奖计算器| www.071598.com-福彩代销证变更| www.021293.com-彩票拉菲平台| www.669733.com-彩票可以投6个| www.9230.org-百事乐彩票官方网站| www.71yl.com-十一选5大彩鲸| www.2466.top-最新彩票计划网| www.u23.blue-九五贵宾会彩票| www.711993.com-彩礼和嫁妆的比例| www.849690.com-竞彩篮球网站| 梦想彩票www.33112b.com| www.800.gg-大六壬测福彩3d| www.10144.com-竞彩套利-| www.47vr.com-有没有关于彩票的书| www.953324.com-乐彩在线平台登录| www.961013.com-广州鸣彩有限公司| www.103520.com-好彩l开奖结果查询| www.106713.com-福彩92期开奖结果| www.219657.com-鬼6神算彩吧图库| www.323032.com-凤凰网彩票开奖查询| www.402325.com-盈丰彩票官方网站| www.561835.com-博彩微信分享送彩金| www.695583.com-福彩快三计划团队| www.862829.com-泰安体彩中心| 13e彩票www.707232.com| www.fi31.com-中国福利彩票贵州| www.862770.com-卖私彩怎么判刑| www.62ct.com-360福彩官网| www.113634.com-大发快三最好的倍投| www.264033.com-必赢彩票网合法吗| www.789642.com-职业竞彩人心得| www.6614.vip-海贼王罗彩铅| www.278636.com-移动彩票售卖机| www.9933.live-万森彩票登录平台| www.571214.com-红快三360-| www.743466.com-手机彩票平台买彩票| www.948141.com-彩票到底是不是真的| www.ax52.com-内蒙快三的走势图| www.14xg.com-博牛彩票客服| www.cp4567.com-uu快三平台-| www.307345.com-山西体彩新11选5| www.24762.com-星空樱花树彩铅画| www.52863.cc-好彩网挣钱是真是假| www.372118.com-500轻聊彩票| www.692292.com-体彩和值和尾走势图| www.032771.com-金沙黑彩怎么样| www.616790.com-体育彩票直选5| www.827924.com-能提现的彩票平台| www.955846.com-彩票在手机上挂| www.so0.com-彩96app-| www.449997.com-198彩总代官方| www.539079.com-时时彩开奖图表| www.602234.com-中彩票强制捐款| www.664208.com-头彩app最新版| www.8378.bid-福彩三地杀码最准| www.61225.cc-万达彩票app下载| www.949283.com-易彩测速福地| www.k00.top-手机彩票注册送钱| www.8716.cm-35彩票安装-| www.531852.com-人生没有彩排| www.6676.hk-荔浦的彩调-| www.35376.cc-彩票体彩下载| www.14562.com-七星彩历史最大奖金| www.cai4900.com甘肃福彩开奖号码| www.4310.cc-快彩王k3447| www.fw02.com-时时彩赌博怎么报警| www.573200.com-体彩是什么行业| www.23785.com-178彩票网输光| www.594838.com-唯彩会体育看球| www.771718.com-致富彩app下截| www.82368.cc-浙江伊兴快三助手| www.954281.com-大彩网走势图| www.7341.org-七天彩平果版| www.749787.com-体彩排列3晚秋字谜| www.223936.com-浙江体彩网手机板| www.534560.com-6位数的彩票叫啥| www.4793.org-万彩网会不会被骗钱| www.516255.com-快三彩票接口怎么接| www.q13.net-福彩3d丹东全图谜| www.1813.mobi-彩伞-| www.06934.com-福彩3d任意和查表| www.718520.com-彩虹是造句-| www.987798.com-福彩30选5走势图| www.997668.com-北京体彩站点查询| www.307268.com-武汉福彩快三| www.39393.cc-斗牛彩票平台| www.013793.com-7星彩和值走势图| www.089766.com-手机阿里彩票怎么买| www.77897.cc-彩票55手机版下载| www.75er.com-多彩娱乐用户登录| www.2141.vip-时时彩广告词| www.90qd.com-彩票8官方-| www.29mr.com-彩铅画真人鹿晗教程| www.0137.xyz-彩色的特性-| www.080170.com-网上买彩票的网址| www.5472.top-彩虹六号围攻官网| www.2112.blue-彩虹七号游戏社区| www.16455.cc-足球竞彩奖金计算器|