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.2621.cc-彩票37-| www.86781.com-竞彩猫怎么不播了| www.995735.com-竞彩打水-| www.sb98.cc-有黑彩赢钱的人吗| www.556626.com-体育彩票选地址| www.682386.com-在微信买足彩| www.169903.com-长春快三高级玩法| www.rs9.cc-快彩彩票官网| www.vw01.com-河北快三开奖统计| www.20is.com-福彩25万奖的种类| www.446.pw-快三高手稳赚技巧| www.5092.org-中彩网怎么支付投注| www.12929.cc-运盛彩票合法吗| www.4637.vip-彩票来一注-| www.251164.com-彩票榜app邀请码| www.71641.com-就业时报3地天天彩| www.168966.cc-内蒙快三推荐与预测| www.590318.com-彩金和黄金哪个值钱| www.715009.com-中国足彩馆踩踏合集| www.848547.com-彩七彩票-| www.942691.cc-买彩票中5元| www.ig80.com-幸运快三app| www.14ak.com-宣城体彩中心位置| www.0258.vip-时时彩赢多了就封号| www.196562.com-百宝彩上海快三| www.724288.com-浙江快彩11选5| www.831000.com-手机彩票口碑最好| www.917969.com-玩彩票上哪家网站| www.980908.com-八马彩票下载| www.gh1.cc-快彩官方网-| www.ot80.com-双彩网是正规的吗| www.183703.com-重庆快三是真的假的| www.093079.com-彩钢围挡板的规格| www.195213.com-吉林快三万能走势图| www.274781.com-老彩民软件-| www.135225.com-好彩一开奖结果历中| www.735179.com-体育彩票pc-| www.324533.com-365cc彩票网| www.418416.com-快三落是真的吗| www.yv29.com-众赢团队彩票| www.650711.com-彩虹伞游戏歌曲| www.836693.com-足彩混合过关玩法表| www.402648.com-驻马店结婚彩礼多少| www.345354.com-财神⑥和彩-| www.901047.com-怎样了解彩票知识| www.975475.com-蚂蚁彩票怎么样| www.fp8.com-7星彩中几个号有奖| www.0286.biz-彩票推销-| www.224140.com-福彩玩法规则和玩法| www.697186.com-中体彩彩票运营管理| www.781922.com-体彩大乐透123期| www.861793.com-合肥体彩店报价图片| www.964236.com-竞彩足球对阵| 彩多多www.78949e.com| www.ss30.com-时时彩必赢买法| www.62le.com-呼市福利彩票中心| www.2276.in-大乐透彩票中奖规律| www.38782.cc-中彩靠谱吗-| www.077821.com-旺财彩票官网| www.81ep.com-时彩族在线计划| www.698468.com-浙江61体彩-| www.rv65.com-正版彩票指南报纸| www.346555.com-神彩网3d论坛| www.088031.com-988彩票网可靠吗| www.198513.com-七乐彩大发快三网址| www.579011.com-甘肃体彩中奖新闻| www.663748.com-体彩篮球预测| www.771081.com-365天天彩票快三| www.837922.com-众博彩票平台app| www.911000.com-彩票发朋友圈被冒领| www.972812.com-彩虹玫瑰存在吗| 福彩天下www.807839.com| www.mh07.com-新浪时时彩走势图表| www.61022.cc-机选七乐彩号码| www.511832.com-大地彩票2-| www.69645.com-易彩补漆笔厂家| www.053101.com-彩米彩票倒闭了吗| www.967164.com-神彩通金码关注码| www.cai820.cc-上海快三开奖结果| www.os91.com-广西快三怎样| www.6668.pro-迅盈彩票30元截图| www.068837.com-609彩票-| www.230855.com-福利彩8手机版| www.525511.com-lol博彩app-| www.603709.com-实体彩票怎么兑奖| www.669929.com-今日福彩谜语| www.ie3.com-江苏快三开奖官网| www.06md.com-用彩铅画星空的过程| www.46466.com-官方时时彩走势图| www.42dl.com-希望彩票安卓版下载| www.50149.com-澳门博彩官网手机版| 百姓彩票www.www.bxcp3333.com| www.905751.com-竞彩足球赛果时间| www.095323.com-19052期胜负彩| www.rv19.com-11选5旺彩计划| www.828768.com-567彩票苹果版| www.919875.com-彩票app建设| www.988242.com-掌优彩票app下载| www.as57.com-上海快三预测与推荐| www.xq77.com-七星彩19037期| www.676.red-时时彩计划导师群| 华为彩票www.925831.com| www.f63.xyz-福利彩票事件| www.022521.com-彩票开奖预测分析| www.181459.com-快三彩票倍投表| www.65902.com-彩票模拟投注网站| www.762981.com-ttc福利彩票| www.614996.com-卖彩票的地方叫什么| www.523270.com-十大彩票网站| www.si7.cc-体彩店不卖竞彩| www.833601.com-新浪彩票幸运大转盘| www.932908.com-广西快三是真是假| www.985962.com-3d彩报蓝精灵b| www.cp9548.com-旺彩官方下载| www.561019.com-老彩民高手坛欢迎您| www.10uu.com-黑彩代理返点| www.74138.cc-福利彩票1分快| www.619527.com-彩票聪明组合| www.9292.pink-一分彩是什么意思| www.72490.com-彩运网cy456| www.860033.com-快三和值大小计算| www.086094.com-彩票高配网-| www.593219.com-7彩阳光大酒店几星| www.33511.cc-下载多乐彩走势图| www.986038.com-注册送彩金棋牌| www.vo1.com-马来西亚彩票网站| www.789044.com-竞彩分析唯彩网| www.940552.com-金福彩票网站登录| www.986346.com-彩票助手吧-| www.cp1031.com-j江苏快三计划| www.it17.com-辽宁彩票11选五| www.zs46.com-福彩彩票注销流程| www.623600.com-汇晨彩票-| www.687896.com-彩票的彩彩神通| www.751942.com-亚彩会账号注册| www.810756.com-福利彩票北京快乐8| www.870873.com-二元3d彩票-| www.921227.com-福彩3d什么叫跨度| www.36178.cc-福彩3d好中奖吗| www.148844.com-牛彩字迷总汇| www.bs71.com-快三杀号软件| www.sz74.com-6位数的彩票| www.17.live-彩易网大乐透| www.175762.com-北京快三中奖助手| www.140854.com-老猫研彩-| www.365849.cc-福彩3d太湖马后炮| www.es8.cc-时时彩app下载| www.844321.com-福彩部门与慈善部门| www.003890.com-梦想彩票苹果版| www.788165.com-足彩单关查询| www.382896.com-香江彩-| www.606778.com-互联网竞彩足球停售| www.19wi.com-福利彩票有什么彩种| www.8295.site-幸运时时彩怎么玩| www.23430.com-可以微信提现的彩票| www.259009.com-双色球彩票分析软件| www.54yx.com-一日谈七星彩| www.578119.com-湖南体彩分中心电话| www.664220.com-头彩彩票最新版本| www.253793.com-天津时时彩-| www.qo69.com-五快三良好的内容| www.132658.com-江苏快三购彩平台| www.cp320.com-湖北快三玩法规则| www.410781.com-彩票平台制作在哪找|