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.124577.com-高频彩漏洞吧| www.09ru.com-旺旺彩票安卓版下载| www.866493.com-福彩3d出啥号码| www.254585.com-盈彩网可信吗| www.362071.com-全国彩票开奖查巡| www.487016.com-体育彩票店能转让吗| www.582003.com-地下六仺彩精准资料| www.946527.com-重庆时彩心得技巧| www.qy27.com-信彩-| www.48kk.com-附近有福利彩票点吗| www.761446.com-腾讯分分彩心得| www.479.mobi-福彩3d万能八码| www.291259.com-福彩3d走综合版| www.651011.com-动物水彩画简单可爱| www.790938.com-好彩香烟蓝莓爆珠| www.895307.com-亿元彩票是违法吗| 金掌柜www.83993c.com| www.761242.com-凤凰彩票平台安全吗| www.623172.com-湖南体育彩票招聘| www.708484.com-陌陌彩票女-| www.785409.com-柬埔寨博彩客服| www.042896.com-吉林快三官网投注| www.948035.com-彩票店的提成| 九五彩票www.95111w.com| www.hr18.com-快三中奖查询| www.293865.com-利彩app下载| www.14970.com-全民中彩票是真是假| www.736342.com-彩吧网詹天佑| www.p83.net-彩票网站提现不了| www.16574.com-网上去哪买体彩| www.388009.com-腾讯分分彩后二组选| www.715098.com-中国彩票行业沙龙| www.589555.com-7星彩开奖图| www.286552.com-彩票七选三-| www.iz93.com-快三倍投方案| www.49or.com-十四场足彩-| www.1684.tv-北京28彩票软件| www.687903.com-竞彩猫专家推荐合买| www.806363.com-时时彩开奖插件| www.948430.com-看一下福利彩票体彩| www.lr60.com-5080大中华彩票| www.5012.vip-尚合娱乐平台彩票| www.33336.com-博众时时彩手机| www.019208.com-时时彩五星缩水手机| www.121968.com-中国体彩电子投注单| www.788789.cc-今日竞彩单场| www.865740.com-意彩app-| www.157292.com-足彩冷热指数怎么看| www.92550.cc-7070彩票登录| www.2624.net-福利彩票三加零| www.26197.cc-倒带彩虹歌词对比| www.os94.com-韩国快三网站| www.754632.com-南方双彩网下载安装| www.258913.com-竞彩交易-| www.263744.com-百度贴吧彩票| www.385962.com-稳赢彩票助手软件| www.55907.com-瑞彩网登录-| www.25et.com-彩票没中过大奖| www.009.cm-彩神8赚钱吗| www.477764.com-赣州福利彩票店店址| www.564447.com-东方彩票下载| 500万彩票www.39500c.com| www.fy64.com-内蒙快三技巧| www.yg56.com-体育彩票店转让| www.27lk.com-彩票中上亿-| www.730.cn-博盈彩票能提现吗| www.6948.vip-七彩虹1660ti| www.45096.com-彩票刷负盈利网址| www.1199.vip-彩神争争霸一| www.967393.com-体彩五排奖号| www.024759.com-陕西省体彩中心地址| www.669820.com-彩票有四个数字的没| www.145068.com-快三经常出的号码| www.7gi.com-彩票应该怎么看| www.522995.com-时时彩计划在线预测| www.736260.com-福彩pk10赛车| www.254599.com-数字app彩票软件| www.413197.com-彩票平台是真是假| www.581470.com-ag588爱购彩| www.8386.loan-360安全购彩网| www.by0.com-应用送彩票送体验金| www.656537.com-澳门博彩玩法| www.30ts.com-星期六开的彩票是| www.501457.com-彩票顶级包网| www.921632.com-中彩票的密码| www.x24.blue-彩神il是真的吗| www.m51.net-凤彩网双色球杀号| www.654154.com-128福彩软件| www.319438.com-彩票中奖新闻生成器| www.527818.com-时时彩后三缩水技巧| www.230270.com-中国福彩app下载| www.356341.com-高频彩逻辑-| www.525937.com-助赢计划时时彩网站| www.650362.com-彩虹伞小儿歌| www.805356.com-高频彩稳赚技巧| www.911381.com-湖北快三选号图| www.18973.cc-旧版爱彩乐-| www.99637.cc-重庆时时彩破解漏洞| www.122493.com-全民快三乐彩| www.267369.com-500足彩票网| www.398372.com-摇摇乐彩票合法吗| www.532461.com-夏侯姬和星彩| 名门彩www.33997t.com| www.sd00.com-三分时时彩计划| www.0249.me-时时彩半顺杂六规律| www.08592.com-3d彩票几点开奖| www.97003.com-3d福彩我要买| www.093643.com-分分彩怎么玩| www.214234.com-足彩分析师团队招聘| www.359397.com-七星彩会员怎么注册| www.536815.com-安装中国彩票| www.188016.com-快乐时时彩b盘| www.ux94.com-江苏快三彩控走势图| www.72cp.com-梦到体彩没中| www.053191.com-明星彩票快三合法吗| www.31ng.com-一三五开什么彩票| www.yf6.cc-彩票规则介绍| www.872541.com-uu彩票购彩大厅| www.955956.com-彩票修改器-| www.gg01.com-快3是哪种彩票| www.241.tv-时时彩投注方案大全| www.11181.com-麒麟竞彩推荐| www.653960.com-下载福彩快三助手| www.802702.com-玩赚彩票下载| www.05wn.com-彩铅品牌推荐| www.0866.com-优彩股份-| www.082021.com-七星彩三字现规则| www.423866.com-三国杀张星彩削弱| www.382311.com-彩票挂机软件挣钱| www.7588.net-奖虫七星彩打印机| www.323548.com-中国福彩网3d开奖| www.gl88.cc-福彩网下载-| www.3035.org-u9彩票安全下载| www.172203.com-内蒙古快三助手下载| www.602508.com-福利彩票到哪里申请| www.753393.com-江苏快三输了| www.865679.com-1068彩票下载| www.988062.cc-百万彩票是哪个平台| www.d04.org-福建体彩开奖直播| www.966653.com-福彩排五开奖走势图| www.no5.cc-七星彩冷热码次数| www.59040.com-七七彩开奖结果查询| www.026908.com-佰万彩票是骗局吗| www.375718.com-福彩3d魔鬼推算图| www.580619.com-福彩大小走势图| www.794100.com-体彩举报-| www.961470.com-富游网彩票官网| www.hx13.cc-北京快三牛人预测| www.68yc.com-全球各大博彩公司| www.3165.win-彩票会是真的假的| www.04477.cc-微信登陆彩票软件| www.82497.com-体育彩票排五走势图| www.659414.com-彩票七星开奖| www.cp8368.com-福彩时时彩快3| www.8650.vip-算命买彩票号码| www.029398.com-彩票投注大厅平台| www.231622.com-时时彩如何让你| www.335028.com-福彩快三有什么技巧| www.km87.com-易彩集团10元赚钱| www.40ol.com-彩吧三毛3d图库| www.25610.com-彩票容错手机在线| www.87638.com-京东彩票投注技巧| www.096042.com-竞彩足球论坛| www.184655.com-时时彩一期一计划|