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.58921.com-0365彩票苹果版| www.528331.com-大乐彩开机号查询| www.622098.com-五福彩票安卓| www.700881.com-福利彩票价格表| www.778654.com-人人中彩手机版| www.855037.com-快乐双彩玩法| www.920098.com-588彩票ios-| www.979028.com-淘淘彩票app| www.cp7133.com-分分彩骗局真相| www.70of.com-爱心彩app邀请码| www.582067.com-彩票双色球凤彩网| www.711149.com-烟台福彩管理中心| www.838283.com-广西福彩快三怎么玩| www.753866.com-玩彩票安桌-| www.977577.com-模拟购彩快三app| www.un8.com-乐和彩网首页| www.213876.com-彩票吃票怎么判| www.670908.com-竞彩不允许卖过关票| www.23802.com-买生肖属于哪种彩票| www.83111.cc-绵阳福彩100万| www.131365.com-河南郑州彩礼多少| www.568679.com-约彩365停了吗| www.681295.com-双色球彩民选号| www.049402.com-福利彩票游戏机论坛| www.230293.com-北京快三最晚几点| www.2281.xyz-彩吧图迷库-| www.428585.com-500彩票软件下载| www.566.tv-oo彩票-| www.039063.com-时时彩中奖助手下载| www.561108.com-中大奖彩票软件下载| www.649888.com-特彩巴原之高手网| www.xp03.com-我想买彩票号怎么买| www.090121.com-快三数学概率题| www.559966.com-大公鸡七星彩神算子| www.687101.com-福利彩票励志广告| www.868615.cc-703彩票投注网站| www.ii.com-体育竞彩网-| www.09xo.com-酷彩铸铁锅菜谱| www.1357.in-幼儿简单水彩画图片| www.881372.com-百姓彩坛网站| www.984643.com-双色球南方双彩网| www.gk43.com-众赢彩票下载| www.666511.com-彩票分析师工作内容| www.989768.com-湖北快三太湖钓| www.412825.com-体彩足彩竞彩计算器| www.214244.com-开彩票店-| www.912526.com-浙江快乐彩走势| www.52131.cc-淘彩app害人| 大赢家彩票网www.178389.com| www.427119.com-彩票双色球怎么下载| www.708520.com-澳洲28彩票可靠吗| www.880890.com-人人彩是什么意思| www.19uy.com-彩仙阁软件公司| www.963487.com-澳客彩票客户端下载| www.713028.com-微信怎么买3d彩票| www.964670.com-今日竞彩新浪爱彩| www.dq54.com-私彩平台哪个比较好| www.8vy.com-体彩跟单能赚钱吗| www.2809.cn-宁波体育彩票群| www.345.tv-彩票迷语解字谜总汇| www.ns93.com-福彩双色球怎么兑换| www.995937.com-胜负彩19046| www.751458.com-淘宝网彩票官方网站| www.846745.com-专家剖析彩票造假| www.917260.com-必赢彩票跑路| www.971729.com-有红包雨的彩票平台| 多乐彩票www.854242.com| www.18861.cc-998彩票安卓| www.253690.com-极速时时彩官方网站| www.977254.com-彩礼制度-| www.506170.com-彩宝网络彩票平台| www.345180.com-福利彩票主任鲍学全| www.361691.com-132彩票破解方法| www.937005.com-七乐彩3十1几等奖| www.25897.com-聚彩彩票合法的吗| www.947670.com-彩票作假穿帮的视频| www.ag05.com-双色球数字新浪彩票| www.79bo.com-海南七星彩梦解| www.811602.com-九鼎彩票是不是骗局| www.292863.com-福彩开奖中奖规则| www.642877.com-下载手机彩票| www.424400.cc-世界著名的十大博彩| www.308579.com-网上快三倍投| www.79217.com-红鹰彩票app| www.439711.com-体彩大乐透后一位| www.551779.com-首页购彩中心| www.611866.com-福彩投注站点查询| www.675952.com-cc彩球网登陆中心| www.64xv.com-123图库彩图图库| www.530589.com-时时彩四码-| www.8193.bid-澳门富民彩官方资料| 500彩票www.3126p.com| www.910858.com-87彩店-| www.701414.com-足彩比分结果查询| www.788468.com-中国福利彩票365| www.852567.com-腾讯分分彩五星走势| www.933534.com-组织快三犯法吗| www.940144.com-重庆福彩官方网| www.384331.com-qq哪里可以买彩票| www.494623.com-高频彩分析-| www.557313.com-仙鹤的水彩创意画| www.623537.com-竞彩猫杨震专栏| www.680782.com-七星彩如何打才赚钱| www.417538.com-盛大彩票分分| www.540911.com-排列三缩水彩吧工具| www.611562.com-彩虹岛水果破解版| www.727007.com-彩票帮投赚佣金可靠| www.800062.com-北京体彩微博| www.864759.com-234彩票官网下载| www.925413.com-快三跨度计算公式| www.977025.com-河南省彩礼出台规定| 500万彩票www.936250.com| www.jo55.com-彩金套利教程| www.xh92.com-七彩网是骗局吗| www.02pv.cc-世界杯进球彩票| www.16753.cc-辽宁省体彩中心| www.96817.cc-网购买竞彩-| www.9584.cm-106时时彩票| www.86378.cc-明三彩-| www.312422.com-鑫彩国际是什么意思| www.783966.com-网彩什么开售| www.392144.com-福彩体彩开奖| www.34179.com-上海体彩网app| www.810789.com-我的彩票在哪里兑奖| www.940298.com-吉林快三啊-| www.m13.blue-快三彩票技术分析| www.280454.com-彩乐乐网可靠吗| www.9255.in-彩票培训师证好考吗| www.967028.com-彩票计划群反倍投| www.8800.space-体育彩票网络销售| www.004679.com-彩票开奖预测软件| www.755341.com-福彩双色球预测大师| www.187227.com-分分时时彩走势| www.281918.com-今日彩票预测3d| www.399175.com-省福彩中心地址| www.082425.com-正规的国家快三平台| www.055593.com-有几种彩票-| www.nu36.com-快三是赌博还是彩票| www.9589.cc-福彩店如何经营| www.17527.cc-快三开奖北京| www.93355.com-这期七星彩结果| www.99xs.com-体彩11选遗漏| www.933900.com-彩票晚上几点开奖| www.978363.com-围挡彩钢围挡价格| 大赢家彩票平台www.975367.com| www.ik52.com-中国福彩网下载| www.yj67.com-一分快三怎么倍投| www.280837.com-折江快乐彩走势图| www.352835.com-热购彩票真的假的| www.349759.com-3d五行乐彩网| www.733485.com-全民彩票张公岭| www.873355.com-彩店app-| www.61652.cc-七星彩号码预测推荐| www.04jv.com-什么报纸上有彩票| www.391785.com-山东福彩网3d| www.654836.com-三时彩-| www.832266.com-破解彩票伪随机数| www.962437.com-掌上彩票手机版| www.wm53.com-彩8下载app注册| www.961071.com-台湾快三开奖直播| 博通彩票www.874110.com| www.84hd.com-福彩3+d字谜总汇| www.y83.com-福彩布衣-| www.2513.win-亚博彩票网骗局|