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.23zi.com-彩绘-| www.82968.cc-三d福彩开奖号码| www.159671.com-七星彩开心网论坛| www.268697.com-黑龙江哈尔滨快三| www.359097.com-七星彩怎样画规律| www.453923.com-推荐个足彩群| www.550467.com-全发彩票怎样玩| www.489855.cc-彩75app怎么样| www.529915.com-中彩娱乐小时工| www.675327.com-四川体育彩票网站| www.084199.com-玩极速快三输了2万| www.318447.com-久久彩票-| www.720997.com-超级团队彩票计划| www.947203.com-天津福彩二十选八| www.673.cm-国家关闭重庆时时彩| www.888349.com-七星彩解梦码| www.cp6575.com-中国体彩网-| www.816366.com-北京体彩客服| www.920318.com-鸿彩骗局-| GO彩www.can87.com| www.005894.com-qq彩票下载安卓版| www.03805.com-彩票还要继续买吗| www.62040.com-美国彩票16亿| www.q79.com-双阳黑彩-| www.65nm.com-杭州福利彩票中心| www.6494.cm-5g网彩-| www.669824.com-彩王争霸彩票| www.775293.com-彩票51中彩真的吗| www.875569.com-今期彩霸王图库| www.cp382.cc-兰州快三走势图软件| www.11596.cc-高频彩平台平台下载| www.69755.cc-体彩11选择5山东| www.pf9.cc-彩6应用-| www.yp88.com-韩国彩票都有啥| www.50kw.com-下载双色球彩票网站| www.0175.org-彩色什么什么| www.3117.pw-体彩办专管员| www.599556.com-中国体彩篮球竞猜| www.5384.vip-超值8彩票-| www.088795.com-重庆彩票官网| www.626671.com-今日彩票运-| www.888173.com-彩票福利彩票快三| www.083353.com-做私彩app犯法吗| www.996194.com-澳客网竟彩-| www.800073.cc-冷号老快三-| www.356737.com-和彩云收费吗| www.655038.com-宏江溢彩年华| www.103864.com-好彩三复式四中四| www.403051.com-开封市结婚彩礼多少| www.747498.com-爱彩人软件下载| www.166356.com-河北福彩快三走势| 国彩网www.guocai667.com| www.93735.com-足彩预测分析app| 500彩票www.683717.com| www.286731.com-智能彩票号码生成器| www.672000.com-彩票意外所得税| www.5713.cc-九万彩票破解分析| www.6020.org-淄博福彩中心电话| www.867900.com-七星彩中间数走势图| www.368646.com-彩铅画苹果图片| www.aw97.com-福彩三个号中奖吗| www.562937.com-桌易彩票一亿不认账| www.756251.com-7星彩直播开奖结果| www.929598.com-7星彩复式投注规则| www.ml19.com-体彩任三-| www.553927.com-熊猫竞彩中乙回放| www.776150.com-购乐彩app-| www.939564.com-福彩门户惠泽资料| www.kb93.com-广西快三遗漏号| www.27262.cc-新乐彩下载-| www.060835.com-快三人人-| www.0109.site-分分彩后二技巧视频| www.007618.com-七乐彩振幅走势图| www.327886.com-3d牛彩图总汇九| www.817115.com-跑狗图58彩开奖| www.p45.biz-大发快三是私彩吗| www.865569.com-彩票怎么中大奖呢| www.948683.com-福彩基金社会救助金| www.gw6.cc-江苏快3彩票网站| www.yb29.com-天津福彩中心地址| www.58zf.com-七星彩梦册解梦码| www.639382.com-体彩终端远程控制| www.737282.com-迷彩兔影视手机版| www.438369.com-汕头市福彩兑奖中心| www.611933.com-重庆时时彩八方集团| www.756265.com-黑马团队彩票计划| www.904009.com-彩票app系统免费| 500彩票www.339968.com| www.6957.biz-七彩视界账号注销| www.ms61.com-中彩吧app-| www.83bv.com-彩印包月-| www.313895.com-福彩3d电子彩报| www.323162.com-乐和彩票app| www.582206.com-金鹿彩票真的假的| www.001677.com-国家体彩主任| www.63386.com-足彩19042难度| www.002468.com-彩票开奖500| www.ek87.com-幸运快三代玩| www.g36.in-360彩票大厅首页| www.33il.com-福利彩票几点关| www.784.cc-体彩7个点怎么返| www.5170.cm-七乐彩周五走势图表| www.17233.cc-最大彩票诈骗案例| www.72831.com-3d彩界毒王-| www.026172.com-人人乐彩票靠谱吗| www.917084.com-私彩提现-| www.993034.com-快三的二同号有哪些| www.fr01.com-江苏快三中奖诀窍| www.3oa.cc-中国彩票谁开的| www.874591.com-山东彩票网-| www.948307.com-彩票哪个奖金最高| 500彩票www.50026y.com| www.356502.com-彩铅情景画人物| www.009860.com-下彩网安卓-| www.47li.com-今晚七星彩预测号| www.0906.org-七星彩对联图片大全| www.06ss.com-二年级上册彩铅画| www.953453.com-体彩排列三定胆方法| www.566384.com-自己分析彩票软件| www.128429.com-熊猫??彩票-| www.254797.com-拉人玩时时彩犯法吗| www.185636.com-七乐彩为什么没人买| www.576338.com-红五3b彩报-| www.157579.com-足彩比分技巧牛人| www.498365.com-5k彩票投注-| www.1768.org-大亨快三高级算号器| www.64px.com-今晚竞彩推荐| www.712018.com-足彩预测专家| www.ek26.com-彩票投注经验| www.0163.tv-中彩网排列三走势图| www.341099.com-快三余数怎么算的| www.465316.com-足彩最多能买多少钱| www.913018.com-体彩三地试机号| www.54900.com-厘模式彩票-| www.922459.com-上海足彩分析师招聘| www.976954.com-湖北钟祥彩礼多少钱| www.cp5558.cc-快三押注技巧| www.jp96.com-qq快三群-| www.761325.com-吉林快三是网堵吗| www.828352.com-榆林开个福彩挣钱吗| www.4fh.com-彩票中奖后怎么纳税| www.817120.com-查看福利彩票开奖| www.848920.com-分分快三怎么看大小| www.949287.com-dd福彩讨论-| 彩71www.005845.com| www.668658.com-彩票冷热怎么分析| www.758777.com-彩薇花化妆品评价| www.885014.com-通宝博彩-| www.947719.com-为什么叫多彩贵州| www.988806.com-快三大小稳赚买法| www.637645.com-彩虹6号保存| www.027636.com-159彩票手机版| www.063805.com-彩票33平台靠谱吗| www.849749.com-湖北快三新规则| www.959258.com-怎么找彩票微信群| www.bj22.com-全民快三下载| www.20wb.com-大智慧彩票注册| www.376473.com-福彩36期号码| www.495177.com-足彩的软件-| www.5282.top-彩票11选5玩法| www.23117.cc-彩票纸大小-| www.59269.com-算彩票神器-| www.017777.com-福彩36选7走势图| www.635335.com-七彩云南玉器批发|