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.7323.org-彩票内部透密| www.d93.org-足彩8串1中奖算法| www.123351.com-彩票不能追号| www.94747.com-福彩销售怎么返点| www.780035.com-排列5彩票中奖规则| www.611073.com-38彩票下载-| www.066176.com-彩票免费领彩金论坛| www.11840.com-趣彩彩票手机购彩| www.186615.com-快三彩票真的假的| www.345945.com-爱购彩安卓版| 网易彩票www.9356z.com| www.mz82.com-快三良品app| www.7182.win-宝乐彩票合法吗| www.31161.com-包头市彩票站点大全| www.982158.com-彩票选号技巧方法| www.289010.com-免费下载全民彩票| www.380164.com-福彩3d四码聪明组| www.809660.com-河南体育彩票网站| www.900166.com-3号彩票送彩金| www.969346.com-彩票计划平台| www.cai277.com-幸运快三平台| www.736646.com-普陀区体彩中心电话| www.858754.com-大乐透彩票中奖号码| www.935903.com-彩神uv机怎么样| www.137405.com-竞彩官电脑版| www.129827.com-江苏体彩七位数下载| 彩乐乐www.cll168.com| www.93pd.com-官方的高频彩票| www.979641.com-七天彩票真的假的| www.798901.com-彩票8官网-| www.906062.com-国彩网提现会到账吗| www.985185.com-竞彩怎么判断平局| www.fp93.com-体彩大乐透玩法规则| www.14gs.com-555彩票注册平台| www.1205.cn-买彩票跟谁谁黑| www.12393.cc-竞彩篮球比分直播网| www.677353.com-彩票3d专家推荐号| www.770569.com-重庆时时彩春节有吗| 云博彩票www.13633.cc| www.cp0928.com-江苏快三破解器下载| www.246444.com-新浪足彩竞技风暴| www.720084.com-锋彩直播手机版官网| www.7yi.cc-快三二同号复选规律| www.191700.com-幸运快三最全走势图| www.539054.com-555彩票下载| www.em06.com-河北快三号走视图| www.160922.com-北京福彩联系电话| www.258760.com-足彩只买平局能赚| 500彩票www.26299o.com| www.806057.com-有没有买彩票发财的| www.98187.cc-彩票p3出奖号| www.fv05.com-兼职帮投福彩游戏| www.48tv.com-天下免费彩票| www.1234.host-七乐彩走势图新浪网| www.01617.com-江苏快三走势图振幅| www.60377.com-云南十一选五爱彩乐| www.739767.com-盛源彩票app下载| www.4320.vip-尼彩手机报价及图片| www.411266.com-海南七星彩梦见死人| www.tf8.com-体彩试机号-| www.761240.com-离婚男方要求退彩礼| www.905253.com-彩票程序概率| www.eh50.com-福建体彩31-| www.95nz.com-甘肃彩票开奖详情| www.28046.com-1688彩票网址| www.179687.com-苹果手机买彩票| www.003220.com-做私庄的彩票网站| www.805812.com-中国福彩有几种| www.178898.com-北京快三是什么彩票| www.133796.com-雷诺好彩一-| www.497008.com-彩票13app-| www.588640.com-福彩快三计划网赚| www.517502.com-天天买彩票真的吗| www.441316.com-彩钢板镀锌厚度| www.pe35.com-福彩3d黑圣手图| www.14fp.com-福彩几个号码算中奖| www.515319.com-环球彩票网是真的吗| www.330829.com-彩48彩票-| www.11888.cc-七星彩一中国体彩网| www.615268.com-手机买不了彩票| www.723863.com-合发888彩票网| www.845615.com-竞彩彩票是正规的吗| www.963194.com-足彩凯利指数| www.338130.com-超级彩票软件下载| www.65ws.cc-福利彩票pk10| www.w82.shop-神彩奕奕造句| www.368800.com-彩票体彩七星彩| www.8909.me-5808万彩票造假| www.306676.com-怎么买彩票中奖| www.889730.com-旭辉研彩软件手机版| www.994387.com-上海快三专家推荐| www.vz43.com-福彩快三高倍数不出| www.631171.com-足彩胜负平_澳客网| www.722143.com-体彩门头效果图| www.812853.com-黑龙江体彩首页| www.914768.com-神彩争霸是真的吗| www.j96.cc-深圳思乐数据彩票机| www.554281.com-中国福利彩票漏洞| www.638932.com-体育彩票店面申请| www.747547.com-红彩会客户端| www.800876.com-精英彩票-| www.931959.com-华彩快三-| 500彩票www.330256.com| www.912171.com-体彩不准用87| www.db60.com-万人彩票-| www.127653.com-彩虹岛ⅱ-| www.580160.com-盈宝彩票app下载| www.699922.com-足球竞彩中奖计算器| www.954824.com-福利彩票一月七号| www.743.bid-彩经搜狗彩票走势图| www.493659.com-热购彩票大全| www.574434.com-爱音乐彩铃电信在哪| www.668177.com-cc彩票网址-| www.727180.com-酷彩彩票网官网| www.791622.com-深圳福彩免费车票| www.858972.com-彩票开奖查结果| www.913665.com-网上买快三能提现吗| www.969453.com-湖北武汉福彩店| www.cai96.com-今天广西快三开奖| www.881916.com-佰万彩票刷流水| www.957289.com-一分时时彩自动投注| 汇发彩票www.hf5887.com| www.891999.cc-蚂蚁团队彩票计划| www.962403.com-黑彩赚钱吗-| 500彩票www.66653e.com| www.814694.com-大掌柜3d彩票| www.590116.com-胜负彩5oo足彩网| www.415647.cc-足彩欧洲投注比例| www.67011.com-彩票领奖在哪里领奖| www.rg37.com-北京市福利彩票快三| www.085532.com-福彩3d交流-| www.78xl.com-香港皇家彩报| www.cp7750.com-欢乐快三是哪里的| www.u42.com-赢彩赢资讯怎么下载| www.1640.vip-注册棋牌送彩金| www.31713.com-淮安彩票店招人| www.98zg.com-双色球谜语诗乐彩| www.4767.me-鸳鸯彩票-| www.6161.com-亚太彩票协会| www.630332.com-福彩常根版-| www.682913.com-11选5购彩网| www.722950.com-168彩票手机安装| www.816995.com-中发彩票怎么赚钱| www.880907.com-彩票计划网站007| www.000991.com-山东体彩官网app| www.377215.com-迪士尼彩票乐园| www.699516.com-网络彩票超稳计划| www.6536.vip-七星彩奥客网预测| www.43508.com-北京快三组合走势图| www.93025.com-彩39彩票手机登录| www.79470.com-微信上玩彩票的女孩| www.359606.com-瑞彩祥云苹果版网址| www.429968.com-胜负彩欧赔指引| www.11036.cc-手机足球彩票app| www.454123.com-彩吧怪字怪帖| www.803493.com-浙江体彩61玩法| www.879509.com-全部彩种app| www.935612.com-时时彩跨度怎么算| www.976056.com-许昌结婚彩礼| www.cp2203.com-快三吵群技巧| www.ip22.com-500w彩票网-| www.xj76.cc-双彩论坛字谜| www.08kj.cc-933彩票靠谱吗| www.65fs.com-3d说彩视频-|