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天

知道了
9彩注册 www.29tg.com-彩色铅笔风景画图片| www.865351.com-3d杨哥说彩-| www.951433.com-信誉大的彩票平台| 天朝彩票www.99355.cc| www.924747.com-如何买彩票才能中奖| www.995745.com-足彩专家预测胜负| www.fa27.com-678彩票-| www.vv48.com-玩一分快三欠了三万| www.25rm.com-天然华彩-| www.478658.com-深圳彩票事件| www.891310.com-福利彩票宣传标语| www.61449.com-金博在线彩票| www.59kc.com-彩钢板岩棉厚度| www.66530.com-宁夏彩票大奖| www.560938.com-彩票大师安装不了| www.326860.com-浙江快乐彩app| www.uo22.com-江苏e球彩开奖结果| www.1086.vip-爱收米彩票-| www.957758.com-台湾乐透彩開獎网址| www.060032.com-快三数字分析软件| www.656818.com-亿彩网合法吗| www.774181.com-英国五星彩-| www.848435.com-每日竞彩二串一推荐| www.913058.com-彩票中奖神奇预测| www.972557.com-彩虹岛手游版| www.oh83.com-微信快三群犯法吗| www.824918.com-福彩牛彩会-| www.912458.com-聚众买彩票犯法吗| www.979790.com-体育彩票专业版| www.ay5.cc-彩票走势图软件| www.499450.com-五八同城彩票销售员| www.101229.com-京彩挂机能赚钱多| www.262615.com-手机福彩投注| www.374196.com-湖北体育彩票大奖| www.614604.cc-黑彩是什么意思| www.03012.com-中彩网中奖如何领奖| www.551059.com-竞彩合买网-| www.713678.com-福彩彩吧图库图谜| www.881429.com-足球博彩在哪买| 500彩票www.500232.com| www.7316.vip-彩虹娱乐领取新手卡| www.022802.com-重庆时彩时彩下载| www.951975.com-彩天下靠谱吗| 虹彩集团www.hcjt4.com| www.539019.com-福彩营销计划书| www.744639.com-暗网彩票如何加入| www.776056.com-时时彩龙虎玩法介绍| www.65te.com-多摩豪全彩无码漫画| www.811541.com-七乐彩4拖7多少钱| www.0507.cc-广西七乐彩开奖结果| www.73al.com-800vip彩票-| www.125095.com-彩票有哪些类型| www.1394.tv-简单水彩画入门| www.169068.com-体彩481-| www.391991.com-竞彩串关-| www.570277.com-彩票开奖提示图片| www.3718.cc-海南省七星彩局王| www.277.in-ac彩妆价格表| www.553677.com-竞彩故事-| www.022482.com-彩票趋势怎么看| www.218218.cc-福建快三开奖助手| www.424133.com-三国杀张星彩| www.581390.com-世界杯竞彩足球分析| www.717170.com-彩铅画注意事项| www.550623.com-福利彩票蓝球杀号| www.21131.com-运盛彩票app| www.33376.cc-众彩手机站-| www.830079.com-彩票平台中博安全吗| www.08nz.com-七星彩开奖时间周几| www.08000.cc-彩票中奖的梦境| www.019473.com-彩经网双色球开机号| www.72002.com-单机彩票手机版| www.202650.com-网易购彩163| www.158464.com-足彩北单胜负彩| www.298653.com-qq彩票竞猜在哪| www.355607.com-刘军时时彩教程全集| www.292195.com-3亿彩票-| www.2vu.com-福利彩票双色球资料| www.706229.com-中园竞彩网放假| www.r55.top-快钱彩票是正规的吗| www.ga99.com-欢乐彩-| www.59592.com-热门彩票软件| www.35bw.com-京彩e账户怎么激活| www.883125.com-足彩任九胆拖投注表| www.397202.com-体彩3地出什么| www.755812.com-汇旺彩票骗局揭秘| www.532560.com-临沂市体彩中心地址| www.654159.com-彩票多级遗漏| www.9876.top-红蚂蚁团队彩票| www.72854.com-中彩彩票怎么销户| www.085626.com-一分快三是不是假的| www.151547.com-彩经网杀号定胆图表| www.233262.com-彩票开奖软件| www.351287.com-竞彩输了好多| www.471633.com-台湾5分彩下载| www.171807.com-遵义福彩中心地址| www.206410.com-福彩快3软件有哪些| www.485706.com-中国足彩网欧亚指数| www.513175.com-排列五彩票大赢家| www.520521.cc-2018年彩票销量| www.625702.com-趣9购老彩票平台| www.735866.com-中国彩吧图库第一版| www.857311.com-gc国彩下载-| www.9922.biz-彩界网-| www.61114.cc-互联网售彩开放| www.og43.com-五分彩技巧-| www.7303.cm-彩虹六号安卓版| www.33526.com-老新浪爱彩-| www.027021.com-稳定的彩票平台制作| www.058128.com-下载乐彩论坛| www.193077.com-贵州快三预测号推荐| www.276337.com-七乐彩复试-| www.373865.com-山东十一选五彩票空| www.502617.com-星际彩票是真的吗| www.578828.com-一定牛吉林快三走势| www.673643.com-古建彩绘纹样大全图| www.759061.com-彩票机号查询| www.475868.com-1分钟快三规律| www.2468.vip-天天时时彩计划网站| www.370798.com-彩钢瓦规格尺寸| www.505647.com-长沙市福利彩票公司| www.ke27.com-中彩票的人-| www.3qs.cc-京彩挂机能赚钱吗| www.73dn.com-一般买彩票在哪里买| www.2699.top-时时彩网贴吧| www.087118.com-福利彩票福利彩票| www.619038.com-山东体彩中心的地址| www.687893.com-4188彩票-| www.930734.com-想玩快三怎么进群| 双彩网www.637012.com| www.427512.com-彩经网快三-| www.mh27.com-湖北快三今天推荐号| www.828822.com-叫销售彩票代买彩票| www.895298.com-京东快彩无法注册| www.960443.com-足彩宝-| 天天彩票www.1035h.com| www.0358.xyz-各大彩票期望值| www.966379.com-快三推波倍投方法| www.4939.vip-未来彩票app下载| www.20844.com-彩神lx邀请码| www.24jk.com-汽车贴彩大全| www.228035.com-河南省的彩礼规定| www.sy51.cc-3d福彩开奖直播| www.04sn.com-彩铅画技法-| www.1166.net-体彩大乐透宣传口号| www.6713.shop-什么是极速快三| www.159756.com-青蛙彩票开奖现场| www.486783.com-福彩中彩网3b开奖| www.051225.com-彩票合买规则| www.501455.com-彩票系统平台包网| www.505556.com-名人彩票技巧| www.950143.com-互联网违规销售彩票| www.307244.com-派彩网每日推荐| www.4707.net-有钱人买彩票| www.ku66.cc-uu直播快三-| www.2fs.com-安徽体彩排三技巧| www.896108.com-博彩套利还能做吗| www.965521.com-手机购买彩票怎么买| 亿发彩票www.802933.com| www.71761.com-福建体彩票大乐透| www.35571.com-vip彩票快3-| www.060728.com-幸运彩福彩手机网| www.57ki.com-广西彩票中心在哪| www.74405.com-七乐彩中七个基本号|