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天

知道了
58福彩 www.x69.biz-天子手游彩票| www.727322.com-辽宁福彩中奖查询| www.843776.com-足彩要多少钱| www.954342.com-苹果时时彩软件| www.jn0.cc-时时彩投注方法| www.uy01.com-彩票字谜太湖字谜| www.800273.com-彩友沙龙手机版| www.925114.com-1彩平台-| 818合彩www.www.9889hc.com| www.ht34.com-江苏快三计划大小| www.531265.com-体彩p3三字谜| www.31835.cc-体育彩票站点查询| www.008666.cc-彩票19029-| www.691937.com-彩乐乐app下载| www.773743.com-玩时时彩用概率赚钱| www.950103.com-878彩票网站| 来运彩票www.5555y.cc| www.200708.com-昨日彩票号-| www.971893.com-九万彩票改什么网址| www.475.in-中国彩票论坛| www.219109.com-体彩大7-| www.892837.com-一个叫玩彩票的软件| www.972301.com-武汉快三遗漏数据| www.cp606.com-大发快三赚钱技巧| www.mw12.com-天天时彩助手手机版| www.445090.com-晋城彩票-| www.0297.cc-彩霸王论坛免费资料| www.422400.com-中国竞彩赛果开奖| www.525651.com-竞彩投资计划高手| www.ic19.com-支持微信提现的彩票| www.474864.com-中国彩票还能信吗| www.576133.com-体彩组三4码遗漏| www.658889.com-五洲彩票登录网站| www.787622.com-彩票豫测-| www.871712.com-苏州福彩官网网址| www.968283.com-彩票所有的号码全麦| www.sf1.com-重庆彩票网官网| www.sy22.cc-七星彩够力画规律| www.35ef.com-红牛彩票聊天软件| www.0316.ren-彩票站能否私下转让| www.7618.xyz-爱彩人ios-| www.31917.cc-竞彩网足彩投注比例| www.80857.cc-福彩p3开奖结果| www.044438.com-足彩略顶-| www.169864.com-长春快三开奖结果| www.269312.com-珠江彩票下载| www.363385.com-彩虹是什么-| www.465555.com-高档古建彩绘图案| 500彩票网www.97655t.com| www.jl34.com-九度彩票可以赚钱吗| www.g91.org-彩宝cb8-| www.47jt.com-足彩威兼尔培率| www.0040.live-彩票七位数字密码| www.32203.com-体育彩票排列3开奖| www.420111.com-955彩票手机版| www.531206.com-制作彩票软件下载| www.679705.com-怎样买彩票能中奖| www.766431.com-华夏鑫彩app下载| www.88tu.com-热购彩票入口| www.237964.com-福彩快三有没有规律| www.821752.com-3d彩漫全彩| www.905533.com-足彩递增买-| www.974204.com-彩虹旗泡弟弟论坛| www.fv01.com-soul彩票托-| www.377338.com-快结婚了因彩礼分手| www.31mt.com-今天晚彩票开什么号| www.198206.com-快乐彩开奖号| www.784168.com-福利采彩票开奖| www.872545.com-玩糖果彩票犯法不| www.975073.com-海南七星彩怎么玩法| www.bl5.com-体彩网排列三开机号| www.pq82.com-融彩网福彩快三| www.04bs.com-桃花树彩铅手绘| www.80qa.com-大家乐彩票靠谱吗| www.229685.com-体彩下载-| www.312662.com-陕西福彩快三| www.389390.com-体彩店加盟费| www.cp0048.com-苹果快三助手| www.649300.com-彩计划可以买吗| www.13vm.com-广东好彩1预测| www.91fn.com-十三彩-| www.067894.com-八手巴购彩票下载| www.143539.com-福彩8靠不靠谱| www.220768.com-北京5分彩开奖记录| www.ko3.com-吉林快三一共多少注| www.od87.com-黑客彩票快三软件| www.07yz.com-如何画芒果彩铅画| www.69tu.cc-彩票窦-| www.175007.com-福彩快3扫码下载| www.803673.com-手机购买体彩大乐透| www.888119.com-谁有福彩网邀请码| www.995872.com-怎么举报好彩店彩票| www.fd56.com-够力七星彩开奖表| www.zg17.com-快购彩票网址| www.30co.com-多肉彩铅画入门教程| www.0066.bid-彩票有哪些品种| www.6625.cm-3o6官方彩票网| www.18616.cc-澳超竞彩推荐| www.61725.cc-七星彩专家推荐汇总| www.3143.com-省体彩中心电话号码| www.00237.com-章鱼tv怎么竞彩| www.62655.com-彩先知预测-| www.019195.com-时时彩手机缩水软件| www.093742.com-0567好彩提现| www.162115.com-e球彩全包48元| www.276362.com-七乐彩奖金分配明细| www.364451.com-世界杯彩票怎样投注| www.456094.com-彩票126官方端口| www.kr45.com-上海体彩网官网| www.900169.com-福建省体肓彩票| www.974259.com-环球彩票登陆| www.u91.cc-中华彩票软件下载| www.54rw.com-黄金屋368彩票网| www.822.in-大佬彩票官方网站| www.4732.biz-龙珠彩票下载| www.9822.site-快三压大小的群| www.75761.cc-骰宝三分彩-| www.024224.com-福彩机器快3视频| www.9918.wang-七位体彩开奖时问| www.38345.cc-彩票每日抢红包| www.91760.com-中国手机彩票| www.051644.com-星光彩票官网| www.192114.com-河南福彩快三官网| www.588587.com-七星彩什么叫做合数| www.683109.com-福彩3d图表大全| www.767048.com-3d彩报今天大怪字| www.909790.com-乐彩11选5-| www.973671.com-123彩票频道| www.cp6337.com-一分钟快三官网| www.nc06.com-彩83-| www.034501.com-焦点蓝彩开奖| www.182089.com-极速快三彩票平台| www.267813.com-北京市快三开奖查询| www.372689.com-今天福彩3d奖号| www.464678.com-多彩娱乐下载| www.555368.com-app彩计划彩票| www.623788.com-山西快三走势| www.wb8.com-澳洲五分彩开奖网址| www.vf01.com-河南福彩8200| www.506229.com-彩虹糖减肥真的假的| www.622076.com-秒速时时彩助赢软件| www.45496.com-阿里彩票如何兑奖| www.022409.com-梯子游戏彩票软件| www.111134.com-易彩大小技巧| www.176581.com-分分快三下载| www.250006.com-2019年网络购彩| www.322670.com-彩票123会员| www.387672.com-温州市体彩兑奖中心| www.943967.com-体彩天下是骗局吗| www.656179.com-双色球彩之网互动区| www.867038.com-星期六开什么彩票奖| www.518812.com-女子中彩票51亿| www.628726.com-网上买彩票不给提现| www.715353.com-四季彩app-| www.734953.com-彩神通关注码是什么| www.852303.com-彩票七位数开奖结果| www.912707.com-彩客站微信群| www.974120.com-好运彩快3-| www.ph53.com-新浪网彩票-| www.507085.com-鸿彩主播火火下载| www.24542.com-彩铅画山-| www.90759.com-3d福彩计划网| www.065513.com-必赢彩票客户端| www.332.hk-彩票买中了那里对钱|