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天

知道了
全红彩票 www.85xb.com-高彩联盟开奖记录| www.6222.hk-福彩选号客密| www.961796.com-qq上彩票-| www.ha5.cc-江苏福彩双色球| www.079911.com-马来西亚乐和彩网站| www.75342.com-怎么买彩票会发财| www.586962.com-新版万彩吧-| www.948476.com-t体彩大乐透| www.123816.com-天天乐彩网址| www.363866.com-江苏快三二不同预测| www.109139.com-百彩首页-| www.226910.com-彩票代理流水提成| www.611077.com-南方双彩3d试机号| www.819797.com-刮彩票的秘诀| www.946852.com-上海彩钢复合板设备| www.666745.com-乐彩网能提现吗| www.295556.com-七乐彩走势图新浪| www.489100.com-四川福彩招聘岗位| www.512552.com-彩铅动物简单图片| www.b86.club-三分时时彩结果| www.381098.com-福利彩票论坛| www.0857.xyz-福彩双色球扫码查询| www.055030.com-多赢吉林快三全能| www.263936.com-彩店宝官网-| www.071166.com-人人彩票预测软件| www.16968.com-优信彩票在线登陆| www.4645.cm-彩票号段-| www.680892.com-彩票平台是不是骗局| www.229792.com-日本彩票广告合集| www.090505.com-彩27app-| www.269528.com-七天彩彩票购彩平台| www.v77.cn-体彩微信群赚钱| www.58nv.com-贵港彩票下载安装| www.5376.biz-福彩3d991-| www.141877.com-时时彩杀大赔小| www.231230.com-手机106彩票下载| www.315602.com-百宝乐彩票软件| www.397744.com-七星彩9872-| www.523905.com-58福彩下载-| www.874228.com-今晚彩票开机号| www.948759.com-福彩3d大湖钓叟| 盛大彩票www.ct8822.com| www.682884.com-福利彩票怎么代理| www.715880.com-彩色铅笔画樱桃| www.794299.com-买福彩算赌博吗| www.871547.com-14场足彩过滤软件| www.937535.com-7125彩票软件| www.986529.com-老版728彩票| www.sa0.cc-爱乐彩江西11选5| www.k10.tv-玩快三坑钱了| www.34eh.com-今天打什么七星彩| www.cp242.com-快三缩水软件安卓| www.610158.com-彩票哪种买的人多| www.747868.com-昜彩堂软件下载| www.044030.com-中国福利彩票图案| www.520.tm-时时彩超级缩水| www.909176.com-宝马时时彩登录网址| www.979425.com-彩票7位数开奖结果| www.cp6955.com-河南快三彩票| www.nv24.com-中国体彩网电脑版| www.870104.com-网易彩票首页| www.572366.com-青海省快三推存号| www.841886.com-彩票公益金项目申报| 双龙娱乐www.slyl2.com| www.796646.com-快三守号怎么赚| www.751260.com-彩票网上兑奖| www.866328.com-大乐透手机买彩票| www.958570.com-七星彩中奖事| www.by70.com-北京快三下载安装| www.618202.com-久信彩票下载| www.690110.com-盛彩彩票官方网站| www.767171.com-竞彩网首网-| www.43468.com-福彩快三多少组号码| www.317353.com-怎样做一个职业彩民| www.999272.com-下彩网app官网| www.139138.com-江苏福利彩票玩法| www.281138.com-时时彩后二经验| www.527090.com-华富鼎博盈彩票被骗| www.097990.com-2018万彩吧-| www.377371.com-七乐彩杀号定胆2| www.971173.com-福彩双色球中奖概率| www.cp7781.com-体彩大乐透预测| www.nq89.com-福利彩票机选号码| www.361103.com-永安彩票是什么| www.qj81.com-468彩票-| www.079711.com-彩票交税-| www.176792.com-宝马彩app下载| www.446191.com-精彩彩票客户端下载| www.12aw.com-幸运彩票网站下载| www.1552.online牛彩网3d杀号| www.17426.com-淘彩网登录-| www.438834.com-彩票内部招商| www.365275.cc-彩库女装官网冬装| www.757668.com-福利三分彩有规律| www.76ow.com-福彩几个中奖| www.yb29.com-天津福彩中心地址| www.717146.com-水溶彩铅晕染小技巧| www.036639.com-玩足彩输倾家荡产| www.505312.com-博彩新骗局-| www.851946.com-竞彩官网开奖赛果| www.268901.com-98彩票犯法吗| www.397604.com-三d图纸彩票| www.589432.com-好彩分手歌词意思| www.719849.com-苹果原彩显示| www.063339.com-怎么开个彩票投注站| www.289411.com-七乐彩历史开奖结果| www.084955.com-彩票站机顶盒| www.355021.com-时时彩后二稳赚霸主| www.731250.com-易彩堂属于赌博吗| www.458162.com-蒂之彩半永久怎么样| www.65738.com-南方双彩双色球预测| www.560720.com-休育彩票查询双色球| www.829459.com-360在线计划彩票| www.989058.com-彩83彩票官网| www.xa56.com-四川快三基本走势图| www.5491.com-双彩i论坛-| www.123801.com-天天乐彩新人注册送| www.318734.com-一定牛彩票店合法吗| www.505888.com-上海体育彩票排列3| www.379789.com-中国彩票真有人中吗| www.85oy.com-新手看彩票走势| www.tw08.com-福彩网合买大厅| www.232980.com-中福快三计划| www.960416.com-菲律宾国家彩票| 500彩票www.50054z.com| www.619393.com-彩票条形码破损| www.298239.com-内蒙快三新玩法| www.363391.com-彩虹色的花故事| www.211188.com-大发快三怎么能赢钱| www.288358.com-爱彩乐是什么| www.360885.com-国家高频彩票害人| www.458862.com-足彩胜负14场复式| www.122546.com-香港意大利彩金| www.up81.com-体彩排例5开奖号码| www.13qt.com-彩民福地的平台| www.67250.com-涿州福彩中心在哪| www.233238.com-体彩北京单场官网| www.323962.com-国乐彩-| www.390618.com-网彩托-| www.513466.cc-福彩多长时间一期| www.619159.com-淄博市福彩中心地址| www.90ie.com-博彩app购买| www.6371.xyz-可以买足彩app| www.54388.cc-彩票七七七-| www.1993.org-足彩做胆是什么意思| www.35bm.com-香港七星彩顺顺发| www.59077.com-福彩开奖的顺序| www.006260.com-彩37官网下载| www.506775.com-副彩三地走势图| www.081040.com-一等奖的彩民被杀| www.869550.com-彩票开奖公告app| www.0800.tv-彩播什么意思| www.no17.com-竞彩计算器500| www.903571.com-19044足彩-| www.974775.com-山东彩民中双色球| www.dh75.com-快三网上卖-| www.xo89.com-怎么玩快三稳赢不输| www.ad66.com-1分快三计划稳定| www.164563.com-微彩吧是正规的吗| www.272615.com-pc是福彩的一种吗| www.215719.com-青海快三投注平台| www.314399.com-体彩足球彩票怎么看| www.8620.wang-电视福彩怎么回事| www.59665.cc-长春彩票销售员招聘|