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.947683.com-信誉时时彩平台推荐| www.uo63.com-兴安盟体育彩票| www.020549.com-福彩旗下-| www.0cx.cc-七星彩私彩算违法吗| www.0078.pw-深圳抱团买福利彩票| www.162589.com-大运彩大运彩票| www.984609.com-彩虹网彩票网合法吗| www.xt6.com-今日贵州快三| www.rb71.com-机选彩票能中奖吗| www.6fh.cc-分分彩辅助软件| GO彩www.dan03.com| www.821522.com-福彩套利靠谱吗| www.948310.com-彩票哪个软件好| www.fb69.com-500彩票漏洞| www.5qx.com-体彩开奖开奖号码| www.537869.com-云彩宝鸿运彩票网| www.100265.com-105彩票网页版| www.185785.com-时时彩kk19| www.3304.xyz-体彩排列五机选| www.036564.com-竞彩中国-| www.127030.com-彩虹六号季票没了| www.612413.com-ok彩票在哪下| www.758511.com-顶尖彩票是真的吗| www.861670.com-高频彩开奖网址| www.39958.cc-彩票之家原正版资料| www.874799.com-彩吧图谜第五版| www.830499.com-新生彩票官方| www.kx4.cc-吉林快三本期开奖| www.899225.com-神彩通免费版| www.35415.com-代买彩票却没有买| www.54565.cc-297彩票下载安装| www.782329.com-怎么看快三大小单双| www.929225.com-彩票有没有弄虚作假| www.37484.com-购彩111骗局| www.901133.com-五分钟快开彩| 网易彩票www.562601.com| www.661404.com-最新一期彩票| www.979135.com-贵烟新好彩-| www.6890.cc-彩票代购平台的优质| www.515023.com-7星彩票app-| www.0827.net-网上购足彩-| www.7903.cn-新的彩网-| www.68977.cc-彩尊国际提现不了| www.082779.com-众信彩票真的假的| www.175726.com-江苏快三神计划| www.336438.com-快三查询结果| www.509392.com-博彩api接口| www.36740.com-28彩pc软件-| www.3il.com-八八彩票官网| www.wb30.com-人人中彩-| www.09gh.com-七乐彩技巧-| www.106032.com-体彩二维码扫描| www.94je.com-彩票系统平台包网| www.233216.com-福彩快3输钱太快了| www.339593.com-爱彩乐开奖助手| www.467900.com-七星彩19042期| www.553751.com-彩快3彩票网站官网| www.618524.com-体育彩票销售终端机| www.693088.cc-买彩票软件排行榜| www.766365.cc-时时彩充值有优惠| www.137909.com-福利彩票开奖器| www.244569.com-彩票开奖大乐透中奖| www.324883.com-海南4十1彩票平台| www.73cl.com-四叶草体彩断组| www.869095.com-七星彩万能8码| www.970178.com-福彩3d秘密通道| www.cai8733.com北京的十一选五体彩| www.778460.com-彩乐园下安装| www.878395.com-湖北体彩十一选五走| www.964317.com-富人人彩票下载| www.cai913.com-江西快三-| www.812708.com-福彩3d解码绝密| www.86056.com-彩钢卷板厂家| www.062453.com-辽宁爱彩乐11选5| www.160678.com-3d五行走势乐彩网| www.108336.com-彩票心态-| www.037769.com-乐彩网一分快3真假| www.043896.com-福利彩票扫一扫| www.rg0.com-福彩3d跨度走势图| www.177016.com-快三助手ios版| www.289831.com-福利彩票加盟少钱| www.445133.com-晋城福利彩票| www.70rx.com-巴厘岛彩票平台客服| www.144499.com-彩票诗词-| www.622861.com-福彩3d一点通全版| www.089923.com-怎么代理福利彩票| www.247299.com-上海福彩选四开奖| www.662809.com-竞彩投资最佳方案| www.93hr.com-体彩售卖点-| www.3501.cm-彩票一元购注册送钱| www.33178.com-排排列三彩宝网| www.33rx.com-腾讯60秒彩票软件| www.318904.com-排列五属于福彩体彩| www.26je.com-彩友圈app下载| www.4679.com-美的彩票是真是假| www.95079.com-看见福利彩票| www.058545.com-昆明靓彩怎么样| www.123514.com-线上刮刮彩-| www.36275.cc-北京福彩手机投注| www.404710.com-下期七星彩规律| www.cai956.com-快三输钱的原因| www.79wf.com-福彩排列三的| www.cb66.com-彩51app苹果| www.701658.com-下载彩59彩票| www.393353.com-丹东福彩3d故事| www.4497.vip-彩票捐赠免税| www.115132.com-江苏福彩中心在哪里| www.0877.me-彩发彩票-| www.042355.com-彩票合买广告语| www.674811.com-国家要取缔快开彩票| www.789504.com-玩彩输了20万想死| www.877282.com-七乐彩几点就封机了| www.990835.com-最好的彩票挂机软件| www.ae96.com-中国福体彩开奖结果| www.vy77.com-上海快三最大遗漏值| www.916242.com-私彩平台吧-| www.973835.com-大乐透中奖彩票图案| www.ti95.com-36o彩票网-| www.03ag.com-强力巨彩-| www.79nq.com-福彩6十1生肖规则| www.1804.biz-瑞彩祥云兴盈快三| www.38427.cc-好彩香烟蓝色| www.501348.com-l竞彩网-| www.156656.com-西藏福彩快三走势图| www.816779.com-彩票中大奖八字例子| www.877109.com-福利彩5d-| www.130479.com-彩票查号网-| www.405266.com-昌邑彩民-| www.95214.com-彩妆品牌-| www.53624.com-正彩这个牌子怎么样| www.1982.org-新新彩票下载| www.701189.com-胜负彩对阵表| www.489773.com-小白彩票竞彩| www.577168.com-好彩投app下载| 奔驰彩票www.509866.com| www.209306.com-快三正规平台有哪些| www.ve04.com-49彩票免费大全| www.11949.cc-彩乐彩票平台登录| www.534017.com-七乐彩咋玩-| www.055408.com-快三有哪几种| www.193768.com-吉林省体彩兑奖电话| www.275902.com-七乐彩复式中奖奖金| www.365529.cc-桃花的彩铅画图片| www.479304.com-彩99彩票app| www.561663.com-也买彩主页-| www.632191.com-cp77趣彩测试| www.722937.com-福建体育彩开奖| www.833062.com-彩77app服务器| www.153337.com-福利彩号码怎么选| www.944362.com-实亿国际是黑彩票吗| www.03466.com-网络彩票该怎么戒掉| www.620505.com-香港中彩公司| www.702289.com-彩票站如何加盟| www.783333.cc-各种彩票中奖概率| www.857623.com-梦想彩票苹果版| www.909642.com-体育彩票提成怎么算| www.965451.com-火箭彩票是什么| 大赢家彩票平台www.068652.com| www.482989.com-中国竞彩网上投注| www.049055.com-精英彩票登录| www.045950.com-网上申请福利彩票站| www.900.biz-希望买彩票中奖| www.593002.com-体彩排列三算法| www.51121.com-百盈时时彩-|