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.62911.cc-七东彩开奖结果查询| www.854887.com-快三每注奖金多少钱| www.995709.com-足彩最多能买多少| www.ea82.com-阿里彩票是骗局| www.041815.com-易彩2.0手机版| www.790622.com-福彩太湖钓-| www.19837.com-吉林快三预测走势| www.398448.com-龙港之彩印刷| www.518877.com-幸运彩票幸相伴| www.9216.vip-航天彩虹业绩| 金彩www.986jc.com| www.796954.com-九宫图算法彩票| www.948185.com-中彩网开机号| 500彩票www.342577.com| www.669280.com-海南什么时候有马彩| www.767185.com-双色球彩界精英| www.839937.com-竞彩篮球的可靠软件| www.915923.com-小奖玩私彩-| www.989430.com-乐彩网彩票是骗局吗| www.fq18.com-uu快三总输-| www.d68.club-网络彩票网址大全| www.918737.com-银河博彩-| 全民彩票www.qm71.com| www.90360.cc-彩九版本下载| www.8553.in-牛彩网首页手机版| www.29mw.com-自助福利彩票机| www.821244.com-十分彩网app| www.949257.com-如何理解责任彩票| 东方国际www.055983.com| www.356484.com-做外卖送彩票犯法吗| www.7909.vip-2n彩票app-| www.33cw.com-m8彩票软件打开| www.105611.com-七星彩开奖预测号码| www.027933.com-彩友多软件合法吗| www.151534.com-江苏体彩七位数奖池| www.303154.com-海南七星彩购买网站| www.cai01.cc-快三过五是啥意思| www.65271.cc-计算器竞彩网| 大赢家彩票www.650317.com| www.8210.top-福彩3d1月3-| www.59902.com-鼓励买彩票的句子| www.8736.wang-高频彩怎么开奖的| www.n18.top-五分三块彩票| www.428583.com-福利彩票摇号器下载| www.523941.com-e彩登陆-| www.590368.com-18k彩金耳环耳扣| www.662496.com-怎样玩全民彩票| www.730963.com-近年开福彩店赚钱吗| www.797359.com-500彩票系统源码| www.104117.com-足彩比赛结果| www.173455.com-广西快三官网| www.237634.com-福建体体彩官方网| www.305996.com-335彩票网-| www.278551.com-一分快三在哪里开奖| www.192575.com-江苏快三今天推荐| www.632587.com-加拿大三分彩玩法| www.39038.com-2017117彩票| www.24469.com-彩铅画古装-| www.520808.com-石家庄市福彩中心| www.648658.com-25号彩票开奖查询| www.873197.com-58同城彩票-| www.ge76.com-彩88app下载| www.70td.com-兖州福彩中心民政局| www.32vr.com-足彩胜平负比分直播| www.460992.com-米兜彩票手机客户端| www.6530.org-鑫彩国际游戏| www.09ff.com-彩友网时时彩积分| www.5546.com-安装彩计划-| www.ho73.com-广东十一选五爱彩乐| www.860810.com-体育彩票11选3| www.96mw.com-声临其境彩排| www.152875.com-鼎丰彩票下载| www.32627.cc-福彩中奖新闻| www.294967.com-中国副利彩票| www.392912.com-昨天体彩号码| www.984538.com-彩8iphone版| www.ap26.com-基诺型彩票规律| www.su50.com-彩票的规则是什么| www.102357.com-qq彩票谁代理的| www.179232.com-福彩安徽快三玩法| www.248132.com-11选五福建爱彩乐| www.321037.com-4d彩票-| www.393018.com-彩铅画图片人物动漫| www.665483.com-网易开奖直播七星彩| www.961970.com-预测彩票软件下载| www.cai9400.com贵州体育彩票| www.9019.cc-百度彩票乐彩| www.745011.com-非法经营彩票判决| www.811455.com-北京三分彩骗了我| www.483883.com-彩富″网-| www.644719.com-九千彩票-| www.785063.com-小米彩票登录| www.987891.com-中彩手app下载| www.712510.com-万人彩票网址| www.854816.com-运彩网入口-| www.70294.com-bf彩票-| www.131142.com-福彩三哥杀码| www.210159.com-吉林快三一天赢一千| www.889555.com-凤凰彩票app大全| www.vc78.com-乐彩网购彩二分快3| www.19qr.com-美洲彩是骗局吗| www.891948.com-时时彩怎么做计划| www.950277.com-乐彩网软件-| 500彩票www.540477.com| www.lw00.com-时时彩平台对刷套利| www.369453.com-三色球彩票-| www.456548.com-重庆时时彩下载安装| www.4885.me-彩票老司机无法提现| www.4078.net-318彩票平台靠谱| www.cp986.com-福建快三开奖号码表| www.366532.com-简单彩铅花-| www.460437.com-体彩打票员教程视频| www.549450.com-彩票平台刷流水单| www.22861.cc-分分快三苹果版本| www.82938.cc-五百彩票网下载| www.191026.com-北京快三奖金怎么算| www.297788.com-快三投注倍数| www.411567.com-融彩网官方下载| www.550412.com-福利彩票双色球杀号| www.737022.com-彩88篮球彩票专家| 大赢家彩票平台www.210639.com| www.rp82.com-七星彩三字现| www.37wc.com-体彩大乐透主任是谁| www.1328.xyz-七星彩开奖结果往期| www.59966.com-七星彩开将直播| www.89md.com-福彩3d太湖谜图版| www.ag70.com-6698彩票网-| www.739880.com-大彩彩票-| www.882062.com-彩票工资车群| www.pl56.com-彩钢瓦-| www.45xz.com-全民彩票改名成什么| 金凤凰彩票www.if57.com| www.19926.com-时时彩平台代玩兼职| 中国福利彩票www.08588u.com| www.59255.com-ai足彩预测-| www.809053.com-彩票难中的原因| www.936461.com-买足彩单关稳胜技巧| 幸运彩票www.luck887.com| www.227183.com-福彩快3代理| www.883039.com-887彩票-| www.949752.com-快三最后一班车几点| www.994187.com-好彩客234-| www.ca28.com-共赢彩票网官方网站| www.19383.cc-e8·cc彩票-| www.487360.com-彩票代打任务| www.567298.com-乐彩33软件下载| www.91499.com-500电脑版彩票网| www.762652.com-瑞彩祥云x-| www.206807.com-106官网彩票平台| www.263785.com-山东体彩网app| www.332985.com-彩票怎么看懂| www.623981.com-春秋彩票安卓下载| www.750020.com-七星彩多少号开奖| www.d45.com-福体彩开奖查询下载| www.774841.com-彩票快3走势图| www.983725.com-华宇彩票靠谱吗| www.za3.com-体彩十一选五走势图| www.039098.com-天天时时彩助手最新| www.92703.com-nba季后赛彩票| www.28bv.com-体彩中三位数多少钱| www.7567.wang-东方亮彩死人了| www.43787.com-三d彩图-| www.39878.cc-彩票巴士注册| www.182046.com-中国甘肃彩票快3|