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天

知道了
亚洲28 www.822347.com-七星彩18147| www.974624.com-七星彩头尾定位| www.wi2.cc-七星彩兑奖期限| www.i02.com-福彩坑人吗-| www.332605.com-福利彩8app下载| www.611310.com-彩31彩票a-| www.692307.com-7k彩票57177| www.777010.com-快八彩票下载| www.865811.com-熊猫彩票是什么| www.947414.com-竞猜型彩票有哪些| www.999432.com-彩票乐娱平台哪个好| www.ci78.com-随州论坛快三论剑| www.618677.com-刮刮彩怎么看| www.741069.com-28彩票被骗-| www.128943.com-福彩三d昨天开奖号| www.229733.com-彩票app的大品牌| www.319689.com-博友彩票下载| www.72iw.com-买cba篮彩-| www.028819.com-九号彩票下载| www.839905.com-责任彩票认知篇| www.942669.com-南宁体彩-| www.999844.com-3d福彩综合走势图| www.bx54.com-最新彩票平台| www.516520.com-彩票ceo-| www.602306.com-福利彩票利润怎么算| www.678627.com-竞彩足球触屏| www.772331.com-彩票777cp-| www.852683.com-北京单场购彩| www.939449.com-江苏省体彩七位数| www.989810.com-彩票开奖公告结果| www.uc2.com-彩票数据分析软件| www.097041.com-福利彩票一定牛官网| www.949742.com-中华彩票网app| www.do97.com-快三稳定平台| www.h49.shop-彩票开奖结果今天| www.735555.com-吉祥彩票0500| www.709158.com-1305彩票合法吗| www.050400.com-玩黑彩赔钱了| www.01686.cc-福彩3d组选三复式| www.598261.com-体育彩排列5| www.704178.com-足球篮球体育彩票| www.28895.com-双色球彩票几点开奖| www.026572.com-苹果下架博彩app| www.947206.com-福彩20选八走势图| 99彩www.996563.com| www.051012.com-网上赚钱快三| www.a52.space-江苏快三电视走势图| www.40rx.com-新大陆彩票计划| www.57327.cc-外围彩票投注网站| www.749865.com-今晚彩票开奖查询| www.88726.cc-今曰羊城晚报时寸彩| www.800071.cc-彩票共有几位数字| www.896987.com-美国彩票大奖排行榜| www.987003.com-华夏彩票平台安全吗| www.xz46.com-jxc68吉祥彩票| www.42dn.com-竞彩足球赛事赛程| www.14eh.com-福彩3d近期开奖| www.2621.cc-彩票37-| www.1cd.com-天福彩票app下载| www.254519.com-55彩票app下载| www.ch38.com-福彩3d系统出租| www.102102.cc-足彩中奖5800万| www.cd89.com-彩票合买网站| www.89775.cc-年会彩票平分评论| www.012986.com-开心七星彩网论坛| www.28rv.com-tt快三计划-| www.1rs.com-博乐彩票现金官网| www.88620.com-小网送彩-| www.gd.com-竞彩网计算器| www.036646.com-福彩三d过滤软件| www.10863.com-体彩排列五字谜图谜| www.300034.com-彩票追号计划微信群| www.4935.vip-第一彩平台-| www.844744.com-彩票开始购买时间| www.22236.cc-江苏快三靠谱么| www.38772.cc-大富翁·com彩票| www.81dp.com-哈尔滨福利彩票开奖| www.131723.com-彩票开奖彩票开奖| www.87738.cc-搜索三b彩票藏机图| www.057529.com-体彩十一选五玩法| www.137768.com-3d新彩吧图谜| www.616957.com-龙虎彩票下载| www.698082.com-安装凤凰彩票| www.779330.com-福彩3d字谜新彩网| www.860604.com-全国快三开奖时间| www.949240.com-快三杀号软件下载| 全民汇彩票www.52303j.com| www.cj83.com-快彩vip-| www.yw07.com-甘肃竞彩专家推荐| www.40se.com-新大陆彩票走势| www.160121.com-赢发彩票怎么邀请码| www.309005.com-彩68官方下载安装| www.456034.com-4scc彩票下截| www.326237.com-易彩彩民福地网址| www.466011.com-体彩六码组六遗漏| www.617889.com-下载968彩票| www.805156.com-彩色纸-| www.950662.com-八亿彩老师带人| www.68528.cc-369彩票分分快三| www.215252.cc-彩票体彩预测| www.295626.com-快三稳赚方法| www.6408.vip-盈盛彩票网站| www.798948.com-竞彩彩民论坛| www.52mt.cc-彩票首页走势图| www.580912.com-爱乐透彩票世界杯| www.673092.com-七星彩领奖时间| www.748995.com-彩虹101-| www.809928.com-赢彩网安全吗| www.516444.com-中发彩-| www.28020.com-中国彩吧3d开奖| www.344482.com-国家体彩网官网| www.635112.com-七彩音符的故事| www.131570.com-彩票中奖无人领奖| www.553254.com-中国竞彩研究团队| www.274679.com-玩脑者时时彩软件| www.455885.com-乐彩彩票网登录| www.85ii.com-重庆体彩官方网站| www.29292.com-彩票端官方-| www.xt4.cc-彩票试玩赚钱软件| www.33394.com-重庆竞彩快三多少期| www.840886.com-澳客竞彩网电脑版| www.35099.cc-河南中彩网快3| www.307781.com-派彩快三能玩不| www.025351.com-网购彩票体彩| www.526403.com-新快乐8时时彩| www.0613.com-星彩娱乐公司| www.910886.com-竞彩比分直播网| www.657430.com-彩票2元网正规吗| www.728071.com-澳客体彩app下载| www.809086.com-好彩客老版-| www.873725.com-35彩票苹果下载| www.941115.com-北京单场彩票图片| www.980763.com-武汉彩票投注站转让| www.cp968.com-福建快三专家推荐号| www.w92.org-打时时彩翻身| www.9065.vip-分分彩哪种打法稳赚| www.44669.cc-彩票对打套利的风险| www.95688.cc-福利彩票那一年发行| www.888565.com-安装网易彩票软件| www.153348.com-彩票都是几个数的| www.9175.online七乐彩是全国销售吗| www.67676.com-彩票概率怎么算| www.jn04.com-快三赌博新闻| www.984435.com-福彩快乐20分开奖| www.003642.com-彩票解太湖诗汇总| www.884830.com-高频彩票经验| www.953894.com-海南彩票-| www.488196.com-聚像彩登录-| www.613466.com-彩购5-| www.91iu.com-七星彩走势图百度| www.886835.com-九龙彩票官方网站| www.ba11.com-网彩骗局-| www.903592.com-福彩3d三天计划| www.61qu.com-彩35会员-| www.2pl.com-彩gg网站-| www.492420.com-彩票平台可以攻击么| www.23158.cc-腾讯彩票猜大小| 天天乐彩票www.830523.com| www.1337.pink-体育彩票开奖号今天| www.66sf.cc-拉菲2彩票合法吗| www.692670.com-现在还有购彩平台吗| www.758342.com-头条彩票软件可靠吗| www.814109.com-体彩排列三中奖技巧| www.878421.com-网易3d彩票下载|