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.ou92.com-快乐彩走势图总汇| www.771408.com-希腊十分钟彩票| www.924284.com-多金喜彩票可信吗| www.cai2600.com北京快三开奖走势| www.s67.org-老梁彩票奖池的秘密| www.404266.com-彩礼多少钱是吉利数| www.69758.com-火箭少女彩票app| www.030318.com-大大中彩票app| www.133459.com-易彩开奖规律| www.890576.com-彩票大小1赔1| www.993692.com-足彩冷门绝密分析| www.kz94.com-北京福彩28是什么| www.602428.com-彩票中大奖的咒语| www.827118.com-哪里人喜欢玩彩票| www.8098.cm-荣兴彩票开奖网| www.600013.cc-彩票所有号码多少钱| www.24si.com-彩票没中奖表情| www.13694.com-黑时时彩平台| www.197936.com-彩票开奖号码是多少| www.585476.com-福利彩票走势图分析| www.43tv.com-民间挂彩是什么意思| www.948658.com-福彩基金用途范围广| www.t10.bid-梦见买彩票中二等奖| www.05244.cc-彩票游戏赚钱| www.69765.cc-广州鸣彩传媒骗子| www.169206.com-快三长龙有规律| www.979992.com-体彩网上接单| www.27637.cc-9188彩票专业版| www.333261.com-高频彩反倍投玩法| www.462734.com-cb8c0m彩宝票| www.592225.com-彩票模拟摇奖器| www.675305.com-澳洲五分彩什么意思| www.760611.com-青娃彩票生肖对照表| www.da52.com-彩神争2手机版| www.784.tv-彩霸王1388-| www.043199.com-网上买世界杯足彩| www.01ga.com-双色球彩票站点真假| www.eo60.com-中国彩票快三开奖| www.h14.xyz-彩云追星-| www.75is.com-冷门思维与传统足彩| www.3163.cn-体彩任九开奖结果| www.190120.com-安徽快三下载免费| www.28365.cc-南方彩票网专业预测| www.527367.com-福彩时时彩试号机| www.722731.com-都哪些省有快三| www.808934.com-体彩店装修内部图片| www.973004.com-手机彩库宝典| www.cp6856.com-北京快三遗漏号数据| 双彩网www.629012.com| www.qw07.com-彩票外挂软件| www.75of.com-包袱彩绘-| www.3927.love-一定牛福利彩票快三| www.08988.com-彩39彩票靠谱吗| www.940940.com-七乐彩定位走势图| www.999272.com-下彩网app官网| www.dd76.com-人人彩票的騙局| www.vo60.com-快3大彩鲸中奖助手| www.403118.com-七星彩前四位推荐| www.555786.com-四川体彩金七乐直播| www.658296.com-87彩票店主登录| www.736819.com-上海福利彩票集中| www.877056.com-法拉利五分彩破解器| www.954453.com-浙江省体彩六十一| 500彩票www.50052j.com| www.27784.com-福利彩票中三个| www.815121.com-看体彩3d走势图| www.916177.com-篮球彩票规则8串1| www.977475.com-正品彩妆代理| www.fl13.com-各种釉彩大瓶介绍| www.53gr.com-体彩票彩票开奖查询| www.576974.com-人人中彩票77官网| www.181935.com-开个彩票站会亏本吗| www.276988.com-国家是要关闭彩票吗| www.879494.com-莲都区人民法院黑彩| www.956059.com-手机投注彩票上分| 500彩票www.66653k.com| www.yo81.com-澳门有福彩快三么| www.526975.com-时彩软件下载| www.613520.com-七星彩什么软件准| www.0001.biz-属龙今日打彩票| www.w61.club-足彩让一-| www.8957.space-重庆时时采彩怎么买| www.034484.com-花生彩票有没有备案| www.111901.com-怎样在手机上买彩票| www.a51.cc-胜负彩技巧-| www.8195.in-49cc彩票-| www.67683.cc-安微省快三开奖图| www.8558.live-易彩宝下载-| www.51714.com-开学日变破产日竞彩| www.016326.com-中彩彩票开奖助手| www.157479.com-今日足球竞彩单场| www.302386.com-七星彩规律图今天| www.259797.com-京东彩票是正规的吗| www.285399.com-买快三什么意思| www.90tb.com-沁县彩英乐队| www.1004.in-欢乐彩票靠谱吗| www.519128.com-彩票预测学-| www.470567.com-足彩合法么-| www.631679.com-700万彩票网官方| www.765257.com-七星彩票论坛加急版| www.888040.com-快彩电视走势图| www.35ss.com-福彩3d怪图今天| www.7739.pw-黑彩网站关闭| www.376562.com-打了几万彩票人跑了| www.183950.com-河北快三新玩法| www.324520.com-马来西亚搞彩票| www.462657.com-环球一号彩票正规吗| www.0768.xyz-28彩票网是真的吗| www.413545.cc-彩票网址哪个好用| www.38608.com-天下彩中彩资料大全| www.sx33.com-最简单的彩票玩法| www.828635.com-多赢在线彩票| www.910698.com-红旗彩票导师微信号| 中彩网www.91233l.com| www.777215.com-河北体彩网彩| www.819688.com-复试彩票容易中奖吗| www.52692.com-彩票店承包黑彩| www.7724.vip-信彩网-| www.zo29.com-彩票最新新闻| www.778555.com-体彩61开奖号码| www.65mp.com-麒麟彩票是什么| 易盈彩票www.7793x.com| www.875415.com-网络彩票继续就是输| www.96ti.com-彩排词语-| www.231303.com-湖南福利彩票25选| www.361190.com-山西十分彩前三组| www.476488.com-福彩十选八-| www.576428.com-中彩吧登陆-| www.660964.com-中奖简单福彩3d| www.777075.com-彩宝宝app下载| www.869957.com-中彩彩票开奖助手| www.957343.com-七星彩开奖30期| www.cp2918.com-快三高手传授经验| www.pv19.com-彩票倍投砍龙| www.439003.com-游戏机彩票机故障| www.444441.com-足球彩票那边是主| www.020242.com-彩票购彩-| www.121062.com-福彩开奖3d开机号| www.62fa.com-五彩斑斓的世界剧透| www.xw4.cc-乐彩大发快三| www.113138.com-七乐彩兑奖计算器| 九九集团www.99jtd.com| www.8822.cc-陕西省体彩十一选五| www.8jq.com-四川彩票男子天才| www.676290.com-彩王彩图-| www.793160.com-彩票如何网上兑奖| www.872541.com-uu彩票购彩大厅| www.oh84.com-河北省快三遗漏值| www.852533.com-五分彩个位定胆公式| www.944109.com-什么是微微彩票| www.991967.com-彩票一组几个数| www.hj5.com-vip彩票app-| www.964836.com-浙江体彩下载| www.080228.com-大马彩票网址| www.222212.com-快彩十一选五助手| www.308798.com-大乐透彩票几号开始| www.997347.com-百彩网香港综合料| www.bw80.com-甘肃快三讨论群| www.zx66.cc-彩虹e台手机在线看| www.hq96.com-七星彩手机机选彩票| www.813146.com-福彩十二选52选五| www.06989.com-易中彩票是真的吗| www.48050.com-彩票之家网址| www.536654.com-好的彩票名字|