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天

知道了
彩01彩票 www.59213.com-福彩3d选号秘籍| www.996047.com-竞彩比分直播有料| www.wb36.com-腾讯5分彩怎么使用| www.00042.com-爱投彩票靠谱吗| www.121552.com-陌陌彩票官网| www.433116.com-cc彩票资料-| www.mq68.com-福彩快三网上投注| www.361269.com-多肉彩泥做法大全| www.515121.com-民权彩礼一般多少| www.731989.com-彩妆店怎么样| www.880219.com-福彩预测分析彩吧论| www.81wx.cc-扬州体彩销售点| www.5560.vip-幸福彩推荐号码陆金| www.18763.com-彩88彩票骗局| www.69006.com-上海体彩中心官网| www.069365.com-褔彩15选5开奖| www.255434.com-中彩彩票可信吗| www.554556.com-七天彩合法吗| www.710378.com-彩金套利犯法吗| www.921173.com-神彩彩票是不是骗局| www.qa36.com-132彩票安卓版| www.788.cm-秦时明月彩虹| 彩乐汇www.clh9.com| www.924747.com-如何买彩票才能中奖| 华人彩票www.hr6888.com| www.hj46.com-中彩威视软件下载| www.5jk.cc-中福在线快三| www.071252.com-足彩编辑-| www.210438.com-分分快三开奖记录| www.607952.com-彩友多平台下载| www.549058.com-今晚天彩票几点开奖| www.633327.com-怎样玩竞彩篮球彩票| www.073599.com-福彩幸运彩票| www.226171.com-河北燕赵福利彩票网| www.352068.com-百hk彩网-| www.502220.com-全国彩礼图示| www.619028.com-新浪竞彩必发指数| www.709549.com-aa1883大发彩| www.55zn.com-快三012路怎么算| www.1093.vip-竞彩稳定盈利模式| www.376997.com-众彩专家-| www.573852.com-世界研究彩票牛人| www.530218.com-彩88专家预测| www.723813.com-888彩票是骗吗| www.882142.com-韩国彩票-| www.ya0.cc-大发彩票怎么安装| www.02aj.com-关于彩虹的句子| www.979241.com-好彩柠檬双爆珠价格| www.sq86.com-今天的彩票指南报| www.50ul.com-全彩网报码室| www.74138.cc-福利彩票1分快| www.284179.com-红色是彩色吗| www.686760.com-中彩那天原文| www.870589.com-鼎盛时时彩平台登录| 8号彩票www.81520s.com| www.95go.com-热拉的彩票骗局| www.65577.com-体育彩票模拟选号| www.158234.com-福彩吧、北京pk拾| www.39729.com-彩经彩票ios| www.051672.com-彩票中奖信息| www.440333.com-体彩67-| www.360666.com-高平彩钢瓦-| www.799069.com-体肓彩票大乐透| www.533.cn-多彩网3d画迷| www.11282.com-烟台福彩官网| www.121634.com-郎咸平说彩票| www.098338.com-彩票内部计划聊天室| www.180321.com-谁有快三彩票微信群| www.606840.com-福彩客户端下载| www.826133.com-2元彩票图表| www.356195.com-每日首充彩票平台| www.789778.cc-竞彩算不算赌博| www.ny6.com-下载快三开奖结果| www.7es.com-体彩14场怎么看| www.736029.com-玩儿彩票能挣钱吗| www.801111.com-怎样做彩票平台| www.873674.com-今天彩票的试机号| www.927939.com-青海快三投注| www.981066.cc-七彩建设北京分公司| www.cai94.cc-快三走势图分析预测| www.ix80.com-华夏彩票手机官网| www.xr40.com-新人怎么买彩票| www.23ue.com-赢彩专家破解| www.498.me-重庆时时彩彩讨论群| www.6333.tv-某人花2元钱买彩票| www.625677.com-彩票中坎龙是什么| www.771133.com-旋风彩虹机报价| www.866285.com-山东体彩手机版| www.954070.com-好彩爆珠多少钱| www.bg14.com-大发快三走势技巧| www.97es.com-吴雨看彩排三| www.93dv.com-2寸彩照是什么底色| www.587817.com-施乐彩色复印机粉| www.753884.com-6698彩票网站| www.475009.com-金誉彩票电脑版| www.76122.cc-广州收购过期彩票| www.095095.cc-福彩3d在线过滤器| www.256343.com-中彩吧app-| www.655765.com-七星彩中三个连号| www.852816.com-彩票任5-| www.986401.com-河南快三走势图一定| www.km74.com-一网彩票开奖结果| www.95hn.com-kk彩票真的赚钱吗| www.9315.cm-赛马彩票开奖| www.083722.com-3d福彩过滤器| www.200102.com-七乐彩开奖时间| www.357730.com-彩客网官网-| www.454300.com-下载酷彩-| www.605304.com-彩色苹果电脑| www.710118.com-彩票首存送彩金| www.874764.com-梦见彩票数字| 亿发彩票www.370933.com| www.79ur.com-30彩票走势图表全| www.723622.com-彩票大乐透排名| www.wh77.com-体育彩票最新开奖| www.4562.cn-博雅彩票靠谱么| www.38783.com-大富豪彩票游戏首页| www.004305.com-乐购彩票app| www.102100.com-彩神计划网-| www.206203.com-投彩是骗局吗| www.299040.com-广西福利彩快3| www.cp8771.com-快三是福彩还是体彩| www.626059.com-福彩三d有规律吗| www.868292.com-体彩5d走势图表| 华彩www.71399y.com| www.286198.com-福彩快三浙江| www.429054.com-易彩网登录下载| www.03144.com-彩票怎么打出来| www.015030.com-天天中彩票真的假的| www.268281.com-彩票沙龙创始人| www.486900.com-世界杯足彩规则详解| www.669856.com-哪种彩票是四位数| www.908939.com-7070彩票官方| 大赢家彩票www.541911.com| www.0060.net-彩票中大奖怎么领奖| www.20104.com-9度彩票-| www.021170.com-山西福彩结果| www.205997.com-辉煌彩票是骗局吗| www.376762.com-河南福利幸运彩| www.559231.com-湖北福彩无纸化投注| www.783951.com-万达彩票注册| www.gm22.cc-快三套路-| www.909.tv-高中生破解彩票| www.81677.com-中快三豹子多少钱| www.128412.com-江苏彩票中奖新闻| www.454311.com-南洋五合和彩开奖一| www.825511.com-上彩传媒-| www.ei02.com-北京快乐彩开奖走势| www.13al.com-排列彩三-| www.632.net-十分彩是什么意思| www.9920.top-彩票了刀开机号| www.8813.vip-阿里彩票是真的么| www.48969.com-旭彩美缝剂多少钱| www.132617.com-2018世界杯足彩| www.312485.com-云购彩票大发快三| www.689325.com-山东福利彩票地址| www.1399.biz-手机上买彩票软件| www.084166.com-时时彩6码必赢| www.242234.com-如何破解数字型彩票| www.358779.com-有没有四位数的彩票| www.558471.com-彩铅作品简单| www.702609.com-高频彩兼职是真的吗| www.839522.com-竞彩收米意思| 乐彩网www.533508.com|