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.033823.com-神彩奕奕的意思| 彩乐乐www.3005.am| www.550630.com-牛彩3d图谜总汇| www.666237.com-小鹿多彩彩票| www.771153.com-657彩票com-| www.868459.com-海南七星彩app| www.940065.com-90后中彩票10亿| 福利彩票www.99677g.com| www.hr18.com-快三中奖查询| www.133474.com-彩色沥青设备多少钱| www.141133.com-中彩双色球擂台赛| www.76wv.com-9b彩票登陆-| www.6508.cn-想开个彩票平台| www.93736.cc-彩70彩票怎么样| www.355600.com-刘军彩票视频| www.621283.com-3d老版彩圣字谜| www.747440.com-官方彩app网站| www.829833.com-穗彩彩票机-| www.911180.com-网络彩票有真的吗| 188彩票www.188732.com| www.52785.com-好彩投网址-| www.23is.com-既时竞彩比分直播| www.0720.xyz-国家彩票整改落实| www.196688.com-彩票计划神器| www.305705.com-又想买彩票了| www.400446.com-七星彩打码软件下载| www.602770.com-彩运来平台提现不了| www.672578.com-福彩3第之家| www.745480.com-双色球大彩网走势图| www.823611.com-彩钢板厚度怎么确定| www.902118.com-中囯福利彩票快乐彩| www.978436.com-巩义彩铝-| www.at73.com-福彩快乐10走势图| www.39ui.com-百度彩票猜谜| www.2160.tv-除了福利彩票广告语| www.9701.vip-彩票刮刮乐促销方案| www.446188.com-彩票开源-| www.566653.com-恒发彩票app| www.37385.cc-棋牌游戏免费送彩金| www.071638.com-河南跑马彩票在线| www.585302.com-极速快三在线计划| www.498318.com-玖富彩票网址是多少| www.610040.com-网上人叫你玩时彩| www.711810.com-网上怎么买七星彩| www.796134.com-体彩选号-| www.872485.com-365彩票时时彩| www.956906.com-hk百彩网-| 大赢家彩票平台www.375967.com| www.kz27.com-江苏快三爱乐彩1| www.2of.com-乐彩票彩客-| www.67006.com-安阳中一亿彩票| www.062963.com-金湖体彩-| www.808554.com-体育彩票七星彩购买| www.67799.com-斯诺克博彩在哪里买| www.135977.com-彩票站知道中奖人| www.753010.com-有多少种彩票| www.19xe.com-福利彩票预测下载| www.284085.com-一种颜色算不算彩色| www.2jj.cc-彩贝壳拼团怎么退团| www.ke49.com-105彩票ios-| www.16au.com-体彩7星彩兑奖时期| www.9828.pw-怎么查附近彩票店| www.869828.com-彩管家最新版| www.944945.com-248彩票网站| 爱彩乐www.ac9922.com| www.589098.com-篮球竞彩比分直墦| www.686454.com-澳彩-| www.cl06.com-北京快三走遗漏| www.855383.com-7星彩复式价格表| www.931603.com-乐赢时时彩计划软件| www.984750.com-彩运8app网址| www.uc2.cc-福彩3d胆码定双胆| www.tc82.com-快三豹子后面出什么| www.058857.com-彩99app靠谱吗| www.582723.com-聚彩彩票平台登入| www.678830.com-棋牌网站注册送彩金| www.773006.com-网上投注高频彩票| www.855033.com-伊雪缘足彩比分直播| www.913165.com-好彩客官方网址| www.974295.com-体彩大乐透奖金规则| 500万彩票www.808751.com| www.288967.com-有中4亿彩票的吗| www.356426.com-单位发彩票中奖| www.9525.biz-海南福彩官网| www.920359.com-辽宁福彩快乐12| www.982163.com-六福彩票aqq| www.dp41.com-英国时时彩开奖网站| www.869552.com-唯彩会旧版本| www.5056.xyz-足彩网络停售| www.351856.com-最便宜的彩票多少钱| www.501909.com-彩票数字之间的关系| www.590738.com-怎么看七星彩的规律| www.690470.com-50o足彩-| www.243012.com-新3d彩票计划| www.607528.com-双色球播台赛中彩网| www.604580.com-彩帝彩票是合法吗| www.676325.com-福彩3d本期藏机图| www.722239.com-彩铅画火锅-| www.792105.com-彩票3d怎么算中奖| www.02169.com-神彩网手机版本| www.44341.com-彩票竞猜app入口| www.149920.com-华盛娱乐彩票平台| www.13944.com-彩世界时时彩| www.012113.com-昨天体彩中奖号| www.130220.com-七星彩规律图视屏| www.43235.com-手机一定牛买彩票| www.46782.com-福星彩历史开奖记录| www.987029.com-万博彩票怎么下| www.7568.com-东方亮彩哪个部门好| www.023681.com-彩票预测与查询| www.6033.xyz-云南福彩管理中心| www.35926.com-三分彩全天计划下载| www.268020.com-彩票怎样选号| www.344365.cc-福建体彩官网app| www.414300.cc-非常出彩的意思| www.5887.me-时时彩计划手机版| www.326285.com-彩云追星-| www.751544.com-体彩大乐透选号秘籍| www.920016.com-大奖快三在哪里查| www.ez6.com-类似吉林福彩快3| www.7mw.cc-free彩票-| www.1416.vip-皇室彩票是什么| www.095882.com-网上购彩正规网站| www.136592.com-淼鑫彩票网页| www.167864.com-安徽快三一定牛| www.954791.com-彩票今天开什么| 大赢家彩票平台www.530196.com| www.wl36.com-手机彩膜-| www.303705.com-福彩17500论坛| www.332693.com-京彩江苏快三| www.111380.com-五分时时彩计划稳吗| www.174188.com-青海快三平台| www.89309.com-彩票app查询软件| www.427.cm-下载乐盈彩-| www.65486.com-炫彩是什么-| www.356375.com-怎么用数学计算彩票| www.430189.com-江苏彩礼钱-| www.520906.com-彩之星印刷下单| www.1277.pw-四川体彩金七乐走势| www.579672.com-巨龙国际彩票| www.668808.com-华人彩票有赢钱的吗| www.735600.com-四川体彩快乐12| www.814666.cc-彩票下载送18| www.872727.com-天天爱彩票合法吗| www.954538.com-牛蛙彩图-| www.990858.com-中国彩吧开奖结果| www.hh6.cc-安徽时时彩玩法| www.1721.cn-掌上彩首页-| www.01283.com-足球500竞彩| www.589346.com-足彩310官方网址| www.405544.com-七星彩万能码复式| www.307128.com-彩票几点不买双色球| www.548482.com-送18~88彩金| www.9ub.com-安卓微博彩票| www.224728.com-发彩网是正规网站吗| www.196931.com-彩票聪明组合公式| www.329171.com-网上快三计划都是坑| www.416152.com-博彩属于金融吗| www.3cz.cc-好的黑彩哪些| www.88594.com-218永信彩票| www.16av.com-七星彩19034期| www.683328.com-那个平台可以买彩票| www.798851.com-时时彩后二定四胆码| www.879956.com-内蒙福彩中心在哪里|