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.946602.com-下载注册送彩金彩票| www.cp9998.cc-福彩3d走势图表| www.yp98.com-韩国彩票在哪里买| www.5502.vip-彩虹岛w吧-| www.15357.cc-时时彩平刷倍投法| www.595318.com-福彩数字3-| www.668018.com-国美彩票-| www.771324.com-大福彩票靠谱吗| www.840372.com-福彩刷流水兼职| www.918329.com-重庆市福彩官网| www.980476.com-广西体彩自助投注| www.cp6123.com-中彩彩票网-| www.sp93.com-直播彩票-| www.304441.com-北京快三免费下载| www.088373.com-黑龙江省福彩网| www.40007.cc-今日彩票图纸| www.159392.com-彩乐园免费下载| www.079861.com-彩票双色球计算方法| www.609372.com-体育彩票时时彩玩法| www.949643.com-哪些彩是官方开的| www.he5.com-彩票算号器手机版| www.711.me-足彩串关奖金计算表| www.13586.cc-财神彩票网址注册| www.316038.com-上海体彩销售点| www.478887.com-足彩平让平-| www.601704.com-彩票50万照片| www.717206.com-彩铅画的意义| www.854557.com-彩乐乐安徽快三走势| www.971500.com-陕西福彩3b字谜| www.em09.com-网上500万彩票| www.23708.com-彩票一般怎么买| www.010367.com-859彩票-| www.635660.com-京彩娱乐平台登录| www.747583.com-大富豪彩票游戏首页| www.830823.com-cp彩票苹果版| www.949204.com-排列三凤彩网预测| 三星娱乐www.sxyl7.com| www.95ik.com-微信投彩-| www.3859.in-中国体育彩票站点| www.9841.net-福彩中心咋投诉| www.573606.com-黑红梅方彩票机坑人| www.720429.com-七星彩怎样看规律| www.927511.com-彩票一共几个数字| www.ct77.com-优信彩票大发时时彩| www.1060.net-下载彩票计划| www.95hp.com-济南彩票杀人案| www.3794.com-篮彩比分直播188| www.07283.com-竟彩足球必发指数| www.261115.com-彩票驿站官网| www.450249.com-七星彩真能中奖吗| www.608376.com-自助福彩怎么申请| www.750027.com-快三私彩-| www.875513.com-体彩排列5中奖秘籍| 中彩网www.81233f.com| www.28rd.com-易迅时时彩-| www.421777.com-双色球彩票2元网| www.570172.com-时时彩复式计划网| www.689012.com-安阳市彩票兑奖处| www.827675.com-千禧彩票备用网址| www.949672.com-体彩试机号查洵| www.ke4.com-河北彩票快3规则| www.z68.win-彩票走势图时时彩| www.98sm.cc-报彩网868.cc| www.06795.com-下载福彩三d| www.75718.com-晚晚好彩公众号| www.069900.com-河北快三全天计划| www.186201.com-500彩票彩种| www.303033.com-七星彩质合走势图| www.411300.cc-下载中国彩票开奖| www.558228.cc-彩铅画画简单又漂亮| www.662590.com-网上国彩骗局| www.774235.com-七星彩历史开奖对比| www.884777.com-三彩彩票网站入口| www.977341.com-商丘结婚彩礼| www.re71.com-168彩票是真的吗| www.772.mobi-彩神1是骗人的吗| www.7920.net-顺金彩票-| www.45165.com-三d彩票开奖今天| 大赢家彩票www.630137.com| www.1059.org-玩彩票有什么技巧| www.135678.com-体彩店怎么装修好| www.80845.com-竞彩qq群-| www.291113.com-福彩3d3天计划| www.926913.com-彩票红旗-| www.cc24.cc-快三正规平台有哪些| www.99st.com-彩世界时时彩app| www.77368.com-手机上买彩票违法吗| www.092208.com-3535彩票网-| www.210107.com-江苏快三网站登录| www.359759.com-七星彩会员软件| www.qv00.com-买3d彩票-| www.1180.xyz-秒速快三网页计划| www.401401.com-台湾大福彩开奖结果| www.2054.vip-彩神通会员四码微信| www.77381.com-众乐彩官网下载| www.314670.com-玩时时彩心态| www.473537.com-彩票快三视频| www.644368.com-黑彩对打网站| www.739025.com-福彩双色球有假没| www.448226.com-福彩3d预测最| www.895099.com-时时彩中奖助手下载| www.249944.com-潮信彩票端-| www.403092.com-陕西福彩快三走势图| www.576465.com-兰州彩票大奖| www.586356.com-福彩3d校长独胆图| www.701448.com-竞彩足彩158| www.97fv.com-29彩票-| www.105395.com-中国哪里卖无嘴好彩| www.5810.vip-竞彩4场3关4关| www.76661.cc-黑桃k5分彩走势图| www.119324.com-福彩3d黑圣手漫画| www.257493.com-快三软件计划| www.397028.com-福州体育彩票开奖| www.566798.com-1068彩票登录| www.71zi.com-现在买彩票能中奖吗| www.9454.top-国外彩票中奖| www.015558.com-七星彩标准版走势图| www.496825.com-银行卡号被十三彩| www.89lu.com-福彩三地太湖图| www.076078.com-达人彩票集团| www.2702.pw-v9彩票福彩-| www.25557.com-彩库宝旧版下载安装| www.045108.com-一分钟一期的彩票| www.70lu.com-金彩网邀请码在哪看| www.99123.cc-时时彩是几分钟| www.115382.com-4场进球彩分析| www.230209.com-盈彩合法吗-| www.352271.com-黑彩平台靠什么赚钱| www.535117.com-黄金分割率与彩票| www.7dc.com-浙江宁波员工中彩票| www.31003.com-天天彩票有哪些软件| www.598088.com-彩票中奖交税税率| www.7671.me-福彩刮刮乐抽汽车| 天朝彩票www.82636.cc| www.43141.com-福彩山地带线走势图| www.150463.com-中彩网号码分折| www.430288.com-双色彩票怎么玩法| www.567243.com-体彩大乐透有啥秘密| www.754529.com-想买彩票买什么号码| www.w31.com-北京快三最长的龙| www.08688.cc-九州博彩下载地址| www.306299.cc-目前彩票最好的平台| www.445692.com-彩票计划软件源码| www.4264.pw-唯彩会体育看球| www.254211.com-福l彩3刃于奖情况| www.507598.com-彩授三天计划| www.09up.com-网易七星彩自选| www.4003.xyz-竞彩网怎么样| www.0216.net-百度彩票是真的假的| www.666678.cc-五乐彩犯罪吗| www.2540.org-腾讯彩票游戏骗局| www.38397.com-505彩票网站多少| www.1514.vip-体彩门店申请| www.251143.com-2020彩票苹果版| www.497005.com-福彩怎么看走势| www.590101.com-广州体彩中心地址| www.cai39.com-官方快三手机app| www.32fq.com-周四有什么彩票开奖| www.74654.com-山东彩色母粒厂| www.179877.com-新快三开奘结果| www.850219.com-胜负彩投注-| www.55213.cc-广西时时彩开奖记录| www.061717.com-排三乐彩网走势图| www.326751.com-广西快三计划分析|