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.005442.com-上海福彩三d| www.040837.com-快樂双彩-| www.131845.com-全国结婚彩礼价格表| www.072366.com-多金喜彩票可信吗| www.70718.com-注册送白菜彩票| www.618486.com-体彩如何看结果| www.010408.com-大奖网彩票电脑版| www.526922.com-时时彩技巧总结| www.7012.biz-足彩258球迷| www.307275.com-韩国快三是真的吗| www.393025.com-明天彩票号码是什么| www.509283.com-手机足彩分析软件| www.60158.com-彩票多少钱上税| www.88411.com-彩票公司抓了多少人| www.5944.com-所有彩票开奖公告| www.35114.cc-快三盈利图-| www.99769.com-金福彩票网不给提款| www.003827.com-20选1福彩-| www.118501.com-彩票线报-| www.965241.com-福彩双色球号码规则| www.129606.com-7星彩下期预测| www.254599.com-数字app彩票软件| www.223245.com-中国福彩下载安装| www.cai9300.com昨天福彩开奖结果| www.17178.com-胜负彩对阵表| www.25sk.com-天天爱彩票竞彩| www.090524.com-福彩双色球走势图2| www.t17.net-福彩快三历史查询| www.807618.com-六十种珍贵彩票| www.26ik.com-搜福彩开奖结果| www.1244.vip-竹达彩奈-| www.925632.com-彩·富网-| www.4087.biz-海南注册彩票公司| www.40cr.com-七星彩最近300期| www.383883.com-时时彩数据接口| www.373929.com-河南彩票大奖排行| www.6817.cc-3d是福彩还是体彩| www.51683.cc-时时彩平投-| www.067522.com-赢彩王计划信得过吗| www.604867.com-彩猫彩票个人账户| www.54km.com-久久彩票网-| www.307.in-多彩网彩票是骗局吗| www.198558.com-福彩河北快三开奖| www.hj87.com-江苏快三单双| www.954501.com-90年代彩票-| www.5621.biz-体育彩票选五| www.127424.com-彩票中了什么时候领| www.275651.com-海南彩票开奖| www.358140.com-博友彩的邀请码分享| www.7983.xyz-投彩app骗局| www.7tt.cc-前夫中彩票-| www.cp6811.com-内蒙古快三跨度图| www.365124.cc-风之彩彩票官方网站| www.511541.com-彩之星彩票网| www.596779.com-全网彩票计划大全| www.692273.com-福利彩票开奖3d| www.947604.com-彩票投注怎么玩| www.03184.com-掌优彩票下载安装| www.575555.com-鸿运彩票登录| www.719255.com-彩神vapp安全吗| www.53bw.com-亚盘足彩研究| www.2474.vip-广州好彩玩贝厂| www.827850.com-彩票跟单陷阱| www.949288.com-做梦彩票中奖了| www.477402.com-彩神通会员下载| www.567869.com-体彩江苏ⅱ选5| www.609638.com-腾讯分分彩四星秘密| www.773005.com-高频彩票投注app| www.103627.com-湖南体彩官网| www.753065.com-怎么玩快三彩稳赢| www.113138.com-七乐彩兑奖计算器| www.749.xyz-时时彩五星通选奖金| www.18839.cc-万家彩手机app| www.655655.cc-高频彩前三组平天下| www.365564.com-吉林快三改时间| www.489111.com-网卡彩票害人| www.46ma.com-怎么申请开体彩店| www.717636.com-彩铅桃花画法| www.876493.com-河北快三彩票| www.320382.com-体彩号码开奖号| www.728408.com-体彩销售时间| www.814311.com-吉林福彩快三走试图| www.6139.net-神圣时时彩计划软件| www.099869.com-首充彩票-| www.79wm.com-cb彩票-| www.023244.com-体彩官网哪家卖得好| www.670024.com-海南体彩4十1| www.823229.com-安徽体彩6十1走势| www.192235.com-手机48倍港彩网投| www.296422.com-86彩票开奖网| www.935548.com-快三和值公式| www.999299.com-竞彩足球彩票360| www.fd31.com-幸运分分彩一期计划| www.5176.cc-韩国2分彩-| www.hr10.com-好彩客彩票-| www.zu83.com-500博彩-| www.552623.com-江苏快三太坑人| www.0847.vip-彩票摇奖软件| www.773596.com-彩票百分百中奖秘籍| www.871093.com-正规手机彩票投注| www.972301.com-武汉快三遗漏数据| 500彩票www.573678.com| www.331615.com-彩51彩票下载安装| www.93ue.com-彩色一寸照片| www.386281.com-电视体彩开奖| www.4673.biz-为什么富人不买彩票| www.hq88.com-新浪足彩比分直播| www.1ln.com-代买彩票中大奖跑路| www.sz88.com-体彩六位数-| www.9ag.com-彩票预测的微信团队| www.cai5678.com福彩快三平台| www.q90.cn-快三不出号码| www.216197.com-福利彩票的玩法| www.961943.com-最新彩票预测大师| 新盈彩www.xinyc8.com| www.1382.xyz-掌聊彩票下载| www.223806.com-体彩开奖视频| www.9597.biz-彩票群中文名字| www.968885.com-我下载不了易彩堂| www.cai8869.com彩票开福彩奖结果查| www.re61.com-时时彩倍投资金分配| www.943639.com-重庆时时彩开奖生肖| www.cp2778.com-快三遗漏是什么意思| www.092214.com-kc一分彩-| www.211245.com-北京福彩快3助手| www.489993.com-易彩代理注册网址| www.015021.com-鸿运彩票是真的假的| www.10ld.com-进球彩最新开奖结果| www.500.blue-恒彩最新登录网站| www.25678.cc-如何做彩票平台代理| www.917818.com-彩虹吉他谱简单版| 500彩票网www.61655n.com| www.rp24.com-彩民之星破解| www.450618.com-彩票数字3走势图| www.533801.com-七乐彩顺序出号| www.590050.com-足彩竞彩比分计算| www.055050.com-有什么彩票网站推荐| www.b99.tv-网上购彩的网站| www.92711.com-聚彩51app大发| www.387228.com-天天彩票恢复了吗| www.492903.com-金利彩票合法| www.579978.com-七彩星txt微盘| www.645422.com-新彩课堂小结| www.707218.com-体彩283玩法说明| www.769895.com-福彩兼职上分| www.828595.com-国外彩票巨奖| www.909640.com-玩彩老头推荐七乐彩| www.985987.com-体彩p3预测总汇| www.ft52.com-胜利彩票登录| www.95967.cc-fbi足彩技术| www.872522.com-天天快三开奖| www.49725.com-足彩app贴吧| www.005222.com-体彩开机号今天| www.083610.com-体彩几点钟开| www.398698.com-彩界胆王-| www.cai51.cc-极速快三怎么玩| www.lo02.com-彩票cp12-| www.10pr.com-小康彩票是真是假| www.93113.com-q彩是什么意思| www.433509.com-彩票中奖最高金额| www.525056.com-聚富彩网站登录| www.590023.com-竞彩分析资讯| www.648067.com-著名的博彩公司| www.700026.cc-乐利2分彩计划|