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天

知道了
1分快三 www.268132.com-足球彩票用什么买| www.889090.cc-彩票网站制作平台| www.984574.com-易彩网时时彩平台| www.ys0.com-福彩快三让我离婚了| www.04en.com-黑彩快三抽水子判刑| www.234278.com-福彩网络投注中心| www.895636.com-世界杯足彩几种玩法| www.980924.com-彩788贴吧-| www.yk5.cc-七彩奖今晚开奖结果| www.rw35.com-快三定胆奖多少钱| www.20dg.com-3月16日体彩| www.688867.com-105彩票本地应用| www.292756.com-福彩快三好假坑人| www.392949.com-眼睛手绘图片彩铅画| www.3345.com-彩票88官方网站| www.9625.me-胜彩国际-| www.35463.com-大乐透彩神通手机版| www.92769.com-屠龙立彩-| www.819935.com-刮彩票能中大奖吗| www.555447.com-中三单式彩-| www.dk73.com-快三网上押注| www.41xr.com-唯彩会大乐透杀号| www.2129.xyz-大发快三专家计划| www.835683.com-好彩36怎么玩| www.975702.com-一定牛彩票被骗| www.rv59.com-腾讯国际彩票竞猜| www.185.hk-彩铅画难吗-| www.01482.com-和彩云收费多少| www.94057.com-彩色耐磨地坪厚度| www.770652.com-彩46彩票手机版| www.931688.com-今天贵州快三查询| 彩票驿站www.cpyz1.com| www.bi67.com-时时中彩票官方网站| www.yo87.com-吉林快三和值跨度表| www.579010.com-星光彩票网站是多少| www.741128.com-福彩2019028| www.877060.com-500彩票破解版| www.3107.pw-彩票疯狂赛车网赌| www.114757.com-五福彩票苹果app| www.235062.com-中彩那天的原文| www.388001.com-华彩咨询公司怎么样| www.533269.com-足球胜负彩玩法介绍| www.630223.com-日本化妆品四季彩| www.737733.com-下载福彩摇奖机| www.595619.com-彩票兑换流程| www.710804.com-红宇体彩店正规吗| www.824313.com-七星彩分析预测号码| www.945228.com-福建福彩投注站电话| www.756972.com-工地专用彩钢围挡| 网易彩票www.092wy.com| www.176169.com-一分快三计划网| www.970487.com-福彩排烈3-| www.le5.com-广西福利彩票快三| www.zm53.com-快三跨度有什么技巧| www.528550.com-彩神vl可靠吗| www.ed76.com-做彩票代理安全吗| www.386323.com-彩票多ip解决方法| www.863331.com-体彩开奖19029| www.2985.win-9万彩票手机版| www.278376.com-昨天内蒙快三走势图| 亚洲彩票联盟www.717885.com| www.509310.com-13亿彩票下载安装| www.484342.com-3d彩福图迷开汇总| www.827246.com-彩票龙虎啥意思| www.902349.com-玩黑彩赔钱了| www.973467.com-彩虹唯美清新图片| www.cp3368.com-彩民快3中奖新闻| www.594062.com-宝乐彩票平台| www.684545.com-福彩杀和尾大全| www.772155.com-时时彩倍投的规律| www.833521.com-彩站宝店铺二维码| www.890503.com-31彩-| www.949478.com-杀号定胆南方双彩网| www.990940.com-5分快三麒麟团队| www.bb27.com-江西快三投注平台| www.sf24.com-五分时彩计划| www.877266.com-23彩票下载-| 大赢家彩票网www.83033k.com| www.703123.cc-快三对子对照表| www.71780.com-彩金铂金黄金价格表| www.037186.com-时时彩二星做号工具| www.170207.com-贵州快三走势图今天| www.297626.com-体彩任选9场胜负| www.479158.com-竞彩足球3串1中奖| www.14nv.com-7星彩开奖历史记录| www.922275.com-开彩365-| www.546.date-刘雪龙黑彩视频| www.864837.com-手机彩票网投| www.u41.biz-丹麦足球竞彩结果| www.800849.com-看彩票图厍-| www.944055.com-微微彩票用户注册| www.cp1678.cc-十分快三走势图| www.697703.com-k彩平台骗人吗| www.868808.com-七星彩前4个规律| www.3554.in-最新开户彩金| www.670268.com-中彩票40万拿多少| www.980498.com-两分钟开一次的彩票| www.li52.com-共赢国际彩票登陆| www.00wj.com-天天买彩票买什么好| www.025823.com-河南高频彩害人| www.258810.com-中国体育足彩竞彩| www.66sl.com-玩彩票输钱能报案吗| www.838583.com-百家欧赔澳彩指数| www.599600.com-中彩富坛-| www.009470.com-234彩票官网下载| www.11128.cc-87彩票店铺邀请码| www.779003.com-彩票假球案-| www.884069.com-黑彩怕不怕会员报警| www.969325.com-执行彩票公益金| www.35xr.com-足彩开奖金-| www.5607.com-厦门体彩中心在哪里| www.345521.com-怎样选福利彩票号码| www.499873.com-大众彩票网开奖直播| www.1909.vip-南粤福彩34期结果| www.38408.com-彩票返点的平台| www.948579.com-福彩3的定位| 吉利彩票www.80075a.com| www.gy42.com-百盈共享彩票邀请码| www.ui14.com-贵州快三最大遗漏| www.7wh.com-七星彩长条最新空白| www.54tb.com-体彩排列三四字真言| www.020274.com-足彩蓬蓬i-| www.834567.cc-日景彩烟花价格| www.sa35.com-快三专家杀号| www.7654.xyz-体育彩票门头灯箱| www.gy58.com-百盈彩票网址谁有| www.h41.net-彩票看一下-| www.76na.com-新粤彩开奖结果查询| www.3453.pw-福彩网彩钟| www.9844.loan-古建彩画用什么颜料| www.32881.cc-汇彩宝-| www.46129.com-开福利彩票抽成多少| www.91np.com-彩票必中表情包| www.094258.cc-快三开奖贵州| www.082758.com-福彩双色球机选号码| www.15as.com-嬴彩天下与你同行| www.299030.com-彩票开奖查询公告丨| www.930668.com-800万彩票网官网| www.028397.com-博彩王官方下载| www.110668.com-够力解梦图版七星彩| www.016929.com-快三周易推算魔图| www.103298.com-吉林快三稳赚| www.557.la-a9彩票正规吗| www.13fh.com-易彩网买彩票安全吗| www.113342.com-彩票五行八卦取数法| www.261759.com-大钱庄彩票购彩大厅| www.670838.com-非彩色-| www.746637.com-彩神江苏快三破解版| www.853664.com-彩6精华版客服| www.25kl.com-彩友是啥-| www.659889.cc-顺盈彩票是真是假| www.308563.com-超级大乐透算彩票号| www.du40.com-五星彩票下载| www.954128.com-彩票助赢76276| www.81if.com-哈尔滨体彩兑奖中心| www.6208.in-下载红旗彩票app| www.137015.com-旺彩大乐透预测推荐| www.1726.com-博彩注册送彩金大全| www.025663.com-安微快三遗漏| www.92138.cc-迪士尼彩票-| www.9816.shop-彩票兑奖号码| www.77116.cc-天玺娱乐彩票| www.055685.com-彩种最全的彩票| www.192000.com-湖北快三骗人|