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.778423.com-精彩音乐汇歌曲| www.913422.com-万彩彩票正规吗| www.997241.com-体彩3d1000期| www.jh58.com-彩客站邀请码| www.337745.com-西宁福利彩票中奖| www.53287.com-北京极速快三| www.059078.com-彩票聊天室平台计划| www.113521.com-四川成都竞彩快三| www.226831.com-新快三手机版| www.21337.cc-彩神xapp下载| www.040001.com-广东竞彩快三| www.260323.com-靠彩票一夜暴富的人| www.334204.com-福彩3dapp软件| www.586932.com-长春体彩客服电话| www.007026.com-地方高频彩开奖结果| www.8392.xyz-m8cp彩票-| www.cai6177.com江苏快三基本走势图| www.lz40.com-足球竞彩彩票app| www.779666.com-七星彩彩票投注方法| www.622570.com-福彩中福在线怎么玩| www.637351.com-彩红时时彩官方网站| www.767166.com-竞彩网官网-| www.861337.com-体彩十一选五三单式| www.503853.com-博雅彩票app下载| www.769073.com-福彩三地和值跨度表| www.931113.com-吉林快三开奖图| www.dr35.com-大发快三免费下载| www.7hp.com-过生日送彩票| www.046577.com-生成彩票程序软件| 易旺彩票www.ywzuqiu.com| www.60nn.com-贵宾中彩开奖记录| www.77007.cc-3α彩票贴吧| www.502248.com-五分钟一期彩票骗局| www.72108.com-福彩3d选胆图表| www.678955.cc-易彩网十分快三遗漏| www.609029.com-赛后结果及派彩| www.695597.com-中国福利彩票造假案| www.058959.com-新浪体育彩票网| www.144111.com-重庆实时彩下载| www.276151.com-官方彩票的彩种| www.058163.com-乐彩快三能挣钱吗| www.203826.com-体彩5d开奖号| www.285877.com-快三登陆-| www.05596.com-义乌体育彩票打彩票| www.69782.com-易彩集团网址| www.024145.com-福彩排列三开奖号码| www.51sx.com-苏州彩票图片| www.3595.xyz-无意间中彩票的故事| www.10131.com-内蒙时彩开奖走势图| www.69619.com-9h99彩票-| www.116991.com-欧洲五分彩-| www.139.top-彩虹男是啥意思| www.776515.com-快乐彩技巧论坛| www.vr4.cc-华人彩票—官方网站| www.1jr.cc-乐彩网3d首页一| www.786769.com-东风彩票-| www.968157.com-中港彩票网登录| www.3488.cc-福利彩票20个号码| www.35527.com-福利彩票抽宝马查询| www.301.biz-买彩票带来的官司| www.4675.cm-合买彩票1元| www.7734.in-九彩拱北老人家相片| www.1827.vip-体彩三个亿-| www.ez0.com-快三胆拖复式表| www.225270.com-彩票投注站怎么挣钱| www.475368.com-彩票店招聘彩票员| www.562038.com-鸿彩直播小浪| www.174424.com-河北快三走势图表带| www.247312.com-福彩快三时间更改| www.324030.com-乐彩网骗术-| www.444613.com-彩票3b开奖号码| www.19791.com-吉林快三一注多少| www.287884.com-华夏彩票是合法的吗| www.342558.com-福彩3d南方网| www.439903.com-支持花呗充值彩票| www.555448.com-顶尖彩票app兼职| www.621283.com-3d老版彩圣字谜| www.683019.com-2019体彩改革| www.760348.com-彩票团队人工计划| www.869871.com-福彩杀号牛材网| www.933275.com-幸运中彩票下载安装| www.989237.com-福彩快三诈骗手法| www.wr1.com-众彩网牛材网| www.120305.com-体彩走势二元网| www.222431.com-快三长龙-| www.607126.com-彩票历史上最大的奖| www.515254.com-七星彩中3个号| www.603006.com-华创购彩团队| www.553082.com-上诲体彩开奖| www.971749.com-创彩网平台是真的吗| www.432040.cc-彩票行家com下载| www.570435.com-七彩虹主板官网| www.723798.com-高频彩套路-| www.889936.com-u9彩软件下载| 虹彩集团www.hcjt4.com| www.035790.com-体彩中奖怎么看| www.718303.com-彩库宝典2013| www.059445.com-河北快三投注速查表| www.161917.com-永乐彩票假不假| www.535079.com-浙江风采网彩票| www.655626.com-拍彩票面秒查奖金| www.171844.com-上海快三形态走势| www.j26.cc-免费彩金游戏申请| www.107621.com-2018年彩票开奖| www.816929.com-彩票中国最多的人| www.917327.com-重庆市福利彩票中心| www.600705.com-彩票导航360| www.96192.cc-彩电云-| www.126452.com-开彩开奖现场码| www.262151.cc-幸运彩-| www.019157.com-彩票缩水app| www.250839.com-中彩票手机版| www.554651.com-时时彩规则术语| www.747190.com-彩票最新平台app| www.008796.com-彩票源码网-| www.375932.com-7星彩开奖历史记录| www.278396.com-分分彩票网-| www.212607.com-时时彩绑卡送彩金| www.01658.com-足彩购买2019| www.276895.com-三分钟时时彩网站| www.rr40.com-牛彩网手机版中彩网| www.187391.com-时时彩漏洞赚钱教程| www.4420.in-玩快彩真的能赚钱吗| www.40598.com-体育彩票打印软件| www.97yr.com-彩运无限怎么充值| www.9690.biz-如何分析彩票的销量| www.955771.com-福彩3d出什么号| www.311466.com-休彩甘肃11选5| www.955115.com-彩票是不是内部作弊| www.90pk.com-彩票销售问题| www.8634.cm-中英彩票app| www.52066.com-彩票注册送68彩金| www.753037.com-彩天下5334cc| www.892997.com-快三的玩法和规则| www.998667.com-彩神计划大发快三| www.57711.com-河北福彩排7走势图| www.049970.com-3d今天福彩开奖号| www.156533.com-0500彩票官方版| www.237549.com-福州快三走势图| www.319295.com-福彩三d和值跨度表| www.379251.com-五分⑥和彩技巧| www.516733.com-色彩搭配原理与技巧| www.349301.com-足彩专家每日推荐| www.423082.com-体彩天下主页| www.513727.com-体彩5d出什么号码| www.367585.com-上上期彩票中奖号码| www.505791.com-厦门市福利彩票转让| www.595594.com-微信新未来彩票| www.837939.com-体彩投注客户端| www.983274.com-彩票算不算赌博| www.0tq.com-彩票中心主任贪污| www.363927.com-彩虹头像男生| www.457826.com-恒彩总代-| www.533412.com-举报黑彩网站| www.588800.com-下载牛彩湖北快三| www.26832.cc-七星彩最新开奖号| www.51044.com-投彩彩票下载| www.772390.com-福彩三d缩水器| www.290016.com-彩铅画简单入门图片| www.78839.com-百度快乐彩走势图| www.58344.com-双色球乐彩园下载| 世彩堂www.5854u.cc| www.46su.com-cp彩票137-| www.195758.com-彩种怎么玩-|