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.74jh.com-环球彩票怎么样| www.fd21.com-十分钟开一次的彩票| www.112012.com-盐城开发区彩票| www.419718.com-246好彩论坛| www.823351.com-市体彩中心能兑多少| www.r65.com-彩票代理判刑| www.1397.win-亲子彩虹伞游戏教案| www.gh00.com-彩虹歌词-| www.z32.xyz-福彩三地图迷| www.58jz.com-500万彩票网页| www.0169.vip-体彩哪种最容易中奖| www.766115.com-九号彩票手机客户端| www.00wl.com-体育彩票谁发明的| www.166683.com-快三骗局揭秘| www.19795.cc-吉林快三出奖规律| www.937651.com-江西十一选五爱彩乐| www.064978.com-彩票入款优惠| www.722885.com-彩票注册-| www.190456.cc-安徽快三下载苹果| www.711922.com-万豪国际彩票下载| www.5525.org-白云彩虹图片简笔画| www.362429.com-福彩一等奖领奖流程| www.666999.com-香港赛马投注彩票| www.878522.com-网赌彩票倍投骗局| www.cb83.com-有玩快三赚钱的吗| www.012382.com-快三带1的有| www.136638.com-玩体彩屋犯法吗| www.221533.com-彩票自动挂机骗局| www.294619.com-河北福彩快三规则| www.b90.top-时时中彩票-| www.38dn.com-婚嫁彩礼的规定| www.029114.cc-中彩吧天齐网| www.197651.com-下载甘肃快三走势图| www.895630.com-大中华彩票是什么| www.971714.com-河内2分彩-| www.73ie.com-出售彩票平台代码| www.2021.in-6768彩票网平台| www.589012.com-极速快三开奖号| www.53452.com-好彩堂总论坛| www.012815.com-七星彩开奖直播今晚| www.11639.cc-彩播是啥意思| www.70252.com-福彩中心代销团队| www.042118.com-q彩网登陆-| www.496757.com-家彩网高手论坛| www.607661.com-福彩走势图不连线的| www.675660.com-福彩3地走试图| www.70505.com-彩票送38彩金平台| www.074644.com-500万彩票预测| www.479062.com-时时彩倍投什么意思| www.616524.com-体彩送的自行车| www.698343.com-福彩团队-| www.772247.com-体彩317-| www.877556.com-买私彩报警-| www.954702.com-江苏快三神器| 好运彩吧www.030238.com| www.22254.com-时时彩彩票网址大全| www.024735.com-一定牛彩票中大奖没| www.4045.cm-彩票拾到-| www.640166.com-彩票777靠谱吗| www.49yb.com-足彩凯利方差app| www.9xx.com-风采网彩票指南报纸| www.201547.com-152彩票下载安装| www.340800.com-查一下中国福利彩票| www.558799.com-随时赚彩票app| www.234903.com-双彩论坛手机版| www.0747.cc-网上赚钱易彩| www.629522.com-彩票097-| www.860708.com-七星彩直播开奖现场| www.957042.com-2044彩票平台| www.vx3.com-乐彩手机论坛| www.zz24.cc-够力七星彩开奖视频| www.49ze.com-足彩最稳买法| www.0710.site-凤凰彩票代理政策| www.8166.vip-彩贝壳app怎么样| www.79nb.com-国彩快3是什么| www.283020.com-7星彩中奖规则图示| www.365384.cc-福彩6码遗漏| www.647.in-苹果7没有原彩显示| www.118015.com-南宁中国福利彩票站| www.984162.com-大乐透论坛彩吧论坛| www.vb17.com-体彩开机试机号| www.128500.com-08彩票官方网站| www.223135.com-彩票1360-| www.312422.com-鑫彩国际是什么意思| www.508028.com-075彩票图表| www.577183.com-uu彩票app官网| www.643011.com-众盈网彩票网| www.388032.com-华彩横溢是什么意思| www.540700.com-福利彩刮刮乐图| www.677391.com-彩钢瓦围墙制作安装| www.791888.cc-竞彩8串28错1场| www.879441.com-旭彩網-| www.971741.com-9万彩票安卓| www.kt7.cc-福彩快三怎么玩稳赚| www.183986.com-河北燕赵福彩网| 中华彩票www.869576.com| www.763366.com-足彩加预测网| www.881319.com-浙江快乐彩胆拖玩法| www.977923.com-快三能赚钱-| www.cp5911.com-彩票预测软件手机版| www.8617.org-福彩机器接线图| www.969467.com-欢乐彩直播是真的吗| www.cp5357.com-北京福彩官网| www.0640.com-福利彩票1到35吗| www.7401.cn-上海体彩店地址| www.072018.com-体彩和外围哪个好| www.216044.com-体彩玩法-| www.279692.com-一分彩票计划软件| www.dt17.com-8b彩票-| www.357120.com-彩铅食物手绘简单| www.479569.com-新彩吧总汇-| www.623595.com-118彩票三肖三码| www.719249.com-快三大发和值| www.804845.com-台湾彩虹旗论坛网址| www.926785.com-谁有达人彩票平台| www.fc62.com-有人玩彩票赢钱吗| www.k59.top-武汉七波彩骗局| www.918.red-江苏7位数与7星彩| www.208523.com-c81彩票官网| www.528685.com-体彩6十丨开奖号码| 购彩堂www.171209.com| www.sk37.com-私自卖彩票犯法吗| www.053.date-上海福彩3d走势图| www.8531.xyz-七星彩规律怎么走| www.52507.com-彩票女套路-| www.024645.com-福彩积分卡网| www.110800.com-网络彩票赌博报警| www.214817.com-一分彩网站有哪些| www.004305.com-乐购彩票app| www.101164.com-中彩在线兼职安全吗| www.981461.com-竞彩任九场-| www.jw0.com-快三二同号技巧| www.tc93.cc-春秋彩票有人被骗吗| www.06ql.com-福彩即开型彩票兑奖| www.84oz.com-牛彩网福彩3d预测| www.422627.com-彩客彩网下载安装| www.302954.com-sb是那个博彩公司| www.02727.cc-彩拾彩票靠谱吗| www.cp227.com-快三彩票投注怎么投| www.mq45.com-个人做时时彩犯法吗| www.799923.com-彩20彩票-| www.fa81.com-七星彩开奖公告结果| www.463.mobi-兰州新区彩虹城商铺| www.024391.com-彩票71湖北和江苏| www.110296.com-七星彩单双尾| www.385802.com-负盈利彩票平台| www.22330.com-万豪彩票下载链接| www.33ah.com-体育彩票足彩竞猜网| www.776110.com-浙江快乐12时时彩| www.36112.cc-湖北福彩微信代运营| www.154559.com-怎么玩彩票挣钱| www.268560.com-北京快三查询| www.382176.com-彩仙阁挂机-| www.609405.com-彩票概率吧-| www.728068.com-彩票83-| www.794848.com-大发彩票报警| www.863589.com-彩票数据抓取| www.917120.com-彩票33靠谱吗| www.976447.com-长春市福利彩票领奖| www.cai34.com-新快三网站-| www.im82.com-广西福彩官网投注站| www.972323.com-菠萝彩3d选号魔图| www.10498.com-体彩19050期| www.73811.cc-体育彩票如何购买|