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.oz95.com-宁夏福利彩票快三| www.106290.com-国外彩票有哪些| www.51383.cc-福满天体彩店下载| www.023745.com-福彩双色球开奖多少| www.254856.com-广东好彩3奖金| www.656228.com-为内蒙古喝彩原唱| www.164477.com-竞彩篮球推荐预测| www.16061.com-快中彩票-| www.22nf.com-福彩双色球造假案| www.09858.com-天天彩票网址是多少| www.961040.com-鸿运5分彩开奖号码| www.062600.com-彩票第一代理| www.893967.com-好彩票怎么下载不了| 火星彩票www.hx6626.com| www.786.name-彩票的复式计算公式| www.41677.com-幸福彩手机报app| www.954914.com-凤凰彩票可以开挂吗| www.730813.com-凤凰竟彩-| www.879431.com-有合法的网上购彩吗| www.998687.com-香港三色和彩开奖| www.sc96.com-集锦福彩快三走势图| www.684.biz-海南七星彩直播开| www.02803.com-宁夏福彩网点怎么开| www.025497.com-网彩有赚钱的吗| www.536538.com-彩票有趣的群名| www.706698.com-玩私彩一直赢钱| www.874633.com-幸运分分彩开奖记录| www.032559.com-怎么辨认彩票的真假| www.170007.com-金手指甘肃快三推荐| www.lp36.com-cp12彩票-| www.117.live-亲子彩虹的约定视频| www.763533.com-福建福彩7乐彩| www.2919.xyz-怎样经营福利彩票| www.13401.cc-金誉彩票网登录不上| www.87938.cc-昨日足球竞彩结果| www.088885.cc-盛邦玩彩票是真的吗| www.027943.com-彩友多微信彩票店| www.764512.com-红牛彩票破解方法| www.974004.com-南宁快三秒奶茶原料| www.pd43.com-久久发彩网-| www.838625.com-竞彩足球如何买平局| www.064867.com-返点9的彩票平台| www.248122.com-红快3彩票-| www.379383.com-彩票答案-| www.03698.com-三b天天中彩吧| www.1059.in-安卓版彩票计划软件| www.313365.cc-体彩排列三双彩论坛| www.180090.com-快三投注技巧| www.061991.com-彩客网足球比分| www.181262.com-好彩3开奖结果查询| www.321680.com-七星彩梦册解梦大全| www.29102.com-河北福彩中心在哪里| www.73225.com-彩圣网-| www.966921.com-福利彩票投注中心| www.hw1.cc-彩票砍龙法-| www.qp20.com-电脑彩报-| www.12668.cc-3d彩票今日开奖号| www.73259.com-上期彩票得主死亡| www.137503.com-贵州省福彩怎么关注| www.930251.com-彩票双色球中两个号| www.394.live-彩票新闻中奖生日| www.6236.vip-六亿彩票下载安装| www.961543.com-体育彩票能买什么| 博乐彩票www.188727.com| www.gy06.com-福利彩票快3呀| www.23569.cc-赢发彩票是骗局吗| www.7612.top-新浪爱彩客户端下载| www.501173.com-有重庆五分彩吗| www.22993.com-王者彩票苹果手机| www.933693.com-时时彩真的能赢钱吗| www.189573.com-江苏福利彩票官网| www.518532.com-青海快三软件下载| www.596622.com-下载彩票甘肃快3| www.672732.com-苏会文看彩-| www.751220.com-祥云纳彩荣耀播报| www.823368.com-贵州彩铝板批发| www.898717.com-致富彩哪里可以下载| www.966573.com-手机足彩即时比分| www.cai608.com-快三助手推荐号| www.ll63.com-彩之家官方下载| www.b98.club-七星彩大奖软件| www.712213.com-13e彩票下载| www.855527.com-福彩3d浪淘沙| www.63881.cc-广西快三有没有假| www.97ix.com-澳洲快乐彩假不假| www.16872.cc-网上在哪儿买彩票| www.78460.com-江苏福彩快3跨度| www.058133.com-三分彩开奖从哪查询| www.204319.com-福彩快三视频| www.350017.com-彩色笔筒怎么做| www.078983.com-七星彩号码公式| www.9216.cc-航天彩虹千股千评| www.576705.com-宁波福利彩票生肖| www.77512.cc-赢彩网可以玩吗| www.kb5.com-分分快三计划数据| www.19378.com-体彩足球竞彩赛事| www.843636.com-彩票监管案例| www.372078.com-分分彩开组三算法| www.231664.com-中彩在线app下载| www.1318.love-复式投注七乐彩图片| www.774492.com-全民彩票充钱外挂| www.306823.com-世界杯足彩停了零食| www.596289.com-190彩票登录| www.616207.com-玩彩票输了五千想死| www.188699.com-中国体育彩票下载| www.174707.com-中国福彩快三下载| www.687075.com-足球竟彩赛果开奖| www.268191.com-彩票36o-| www.072098.com-彩票如何做庄家| www.da83.com-彩神1准吗-| www.595399.com-福彩玩游戏的地方| www.120930.com-福建福彩新快三玩法| www.520.link-易彩星彩票下载安装| www.03632.com-重庆七星彩骗局| www.66117.cc-福利彩票在线机选号| www.xp63.com-想中彩票-| www.369371.com-彩票中奖了有坏处吗| www.198325.com-贵州省福利彩票中心| www.905812.com-滴滴彩票下载| www.132169.com-彩礼不得超过2万元| www.485126.com-网页玩时时彩被骗| 爱购彩票www.355274.com| www.254514.com-好彩投彩票app| www.uo21.com-彩票复式投注计算器| www.1871.in-福彩3d一言九鼎| www.30356.com-海南体彩下载安装| www.850000.com-时时彩老玩家教学| www.80203.com-河北体彩网开奖公告| www.73nb.com-完美彩票网站可信吗| www.130437.com-博牛彩票是否违法| www.662752.com-彩票定胆公式| www.029775.com-体彩兑奖后多久到账| www.763.la-时时彩跟彩票一样吗| www.6878.net-优质彩票充值卡批发| www.75791.com-七星彩大赢家走势图| www.026271.com-广西福彩中心招聘| www.091783.com-希望手游彩票靠谱吗| www.150542.com-中福彩3d走势图| www.217685.com-彩客竞彩彩票app| www.3657.com-近期彩票中奖号码| www.025807.com-阿理彩票是骗局| www.583039.com-那个彩票走势图好| www.54xx.com-3d出号走势图彩吧| www.2281.xyz-彩吧图迷库-| www.08633.com-彩票梦想站官方网站| www.21773.cc-彩票找台子漏洞| www.138476.com-日本彩票乐透6| www.212205.com-淘宝彩票平台| www.282206.com-排三家彩开奖网| www.335.cm-买体彩哪个软件好用| www.875173.com-彩宝网首页彩| www.954317.com-109彩票app-| www.995353.com-北京市体彩网| www.ct2.com-快三有啥技巧吗| www.in53.com-山东彩友沙龙论| www.620271.com-怎么分辨釉上彩| www.569527.com-微购彩下载-| www.966823.com-宝马彩ag-| www.45703.com-彩宝贝3d试机号| www.963614.com-官网500彩票下载| www.gd69.com-彩票大发快3| www.08al.com-七星彩网盘-| www.35379.com-福建体彩做假| www.6321.cc-甘肃彩票领奖|