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天

知道了
彩票123现在叫什么名字 www.lv95.com-时时彩平台注册| www.503578.com-赢彩与你同行| www.609678.com-头奖彩票开奖| www.704104.com-福利彩票三等奖| www.319857.com-北京五分彩开奖官网| www.112822.com-火箭彩票站-| www.779755.com-福彩三d布衣图| www.885132.com-神州行彩票欢迎使用| www.976831.com-洛阳孟津彩礼是多少| www.ag4.cc-宁夏福彩宁夏体彩| www.82098.com-仑头福彩迷app| www.284506.com-国彩骗局-| www.379115.com-彩票火凤凰网站| www.vt87.com-如何网购3彩票| www.48hz.cc-休育彩票七星彩| www.0559.net-体彩票查询表| www.684457.com-投资彩票站-| www.781640.com-福利彩票20期| www.869636.com-体彩扑克牌几点开始| www.972024.com-24号体彩中奖号码| www.cp292.cc-今天福彩快三| www.pc64.com-网上快三输钱| www.327626.com-福彩3d矩阵宝典| www.099797.com-快三专家推荐号| www.201498.com-快三所有号码表图片| www.388423.com-天下彩五行数字| www.170456.cc-江西快三基本走势图| www.86cv.com-福彩365遗漏| www.6982.me-打出的彩票能注销| www.34873.com-体彩三地走势图| www.365937.cc-彩票29平台-| www.605833.com-云南福彩官方网站| www.03ut.com-如何办理体彩销售点| www.5062.cn-世界杯足彩彩票| www.15751.com-重庆时实彩怎么注册| www.67lh.com-9号彩票官网网站| www.339614.com-高频彩票盈利的方法| www.486745.com-打鱼送彩金可提款| www.785121.com-海南7星彩解梦| www.926859.cc-彩票达-| www.bd43.com-内蒙快三和值走势图| www.16qm.com-最近彩票开奖一千万| www.98fo.com-刻家奇门测彩最准| www.dr17.com-大发彩票官网登录| www.zi46.com-中国快三福彩官网| www.22837.cc-百事彩票官方网站| www.589608.com-七星彩数字神奇组合| www.671686.com-cb88彩宝-| www.757080.com-中华彩票导报网址| www.848519.com-c61彩票下载安装| www.926602.com-瑞祥祥云彩票技巧| www.988024.com-幸运中彩票老版本| www.az99.com-多乐彩基本走势图| www.um30.com-彩票16安卓-| www.805001.com-彩票126app-| www.930114.com-3d彩票玩法技巧| 500彩票www.359500.com| www.ua56.com-江苏快三倍投技巧| www.35wy.com-沈阳体彩中心地址| www.1112.in-福彩开奖近20期| www.59.me-中国福利彩票网投| www.14os.com-体彩兑奖需要哪些| www.73813.com-福彩上可以买吗| www.236648.com-竞彩足球赛果开奖| www.9652.biz-河北永年县农村彩礼| www.800032.cc-体彩福彩福彩票开奖| www.903383.com-赢彩吧打不开| www.968033.com-今天胜负彩必发指数| www.0816.bid-时时彩宝宝计划下载| www.02at.com-3d彩票交流群群号| www.688.cn-日立彩票平台正规吗| www.301202.com-快三快三和值表| www.449298.com-各种体育彩票提成| www.591055.com-福彩排列七玩法说明| www.719400.com-吉林快三豹子技巧| www.916785.com-守信彩票网页版| 大赢家彩票平台www.536210.com| www.469411.com-万彩办公大师有毒| www.g11.me-彩票缩水软件苹果版| www.83vi.com-彩色釉子瓷器| www.5059.cc-彩票停售2019| www.171360.com-体彩开奖是多少| www.383335.com-5k彩票骗人-| www.080273.com-奇门测彩简易抵消法| www.6271.biz-体彩天下快3可靠吗| www.37799.cc-彩票庄家如何赢利的| www.fl57.com-彩票快三全天计划| www.483.pw-快三组合号有哪些| www.491.mobi-彩票计划群骗局分析| www.y02.top-福利彩票中奖走势| www.4434.cn-全球彩票app注册| www.736.cm-华富鼎彩票诈骗| www.7509.vip-体彩刮刮乐如何取钱| www.81018.com-即时开彩2-| www.752920.com-幸福彩手机报app| www.852246.com-体彩七位数中奖金额| www.933065.com-网上买彩票平台可靠| www.iy89.com-6+1走势体彩| www.761044.com-秒速时时彩大小计划| www.896695.com-天津华夏快三彩票| www.973284.com-儿歌《彩虹》| www.cp9777.cc-青海西宁快三下载| www.759550.com-中华彩票提现不了| www.866778.com-周六开什么彩票| www.921368.com-彩票中奖图片大全| www.970710.com-福利彩票是由民政部| 99彩票www.129985.com| www.176106.com-彩票平台注册送28| www.299562.com-凤凰vip一分快三| www.388999.com-剪彩葫芦-| www.513171.com-三彩女装官方| www.3268.top-福建省彩票管理中心| www.6771.cn-福彩超级大乐透奖池| www.20168.com-河南快三二码| www.719152.com-520快三首页| www.815683.com-福利彩票排列7| www.886888.com-大发快3淘彩票| www.980105.com-彩票站招聘-| www.799.tv-舟山飞鱼走势彩票| www.9372.xyz-彩票在哪里买最好| www.68565.com-廊坊彩票大奖得主| www.2638.com-福彩3d之家开奖| www.279133.com-快三2豹的规律| www.228255.com-河南彩礼规定| www.10bp.com-足彩封盘-| www.234422.com-合法彩票-| www.375214.com-名彩论坛-| www.447033.com-众购彩票下载安装| www.833097.com-三国张星彩-| www.993544.com-足彩结束日期| www.wk78.com-123彩票网官网| www.0mg.cc-福彩双色球奖金多少| www.11490.com-足彩十四场奖金| www.0556.com-彩坛达人每天看三胆| www.888798.cc-778彩票-| www.cai0400.com安徽快三一定牛| www.18852.com-中国教育台福彩开奖| www.514688.com-澳洲lotto彩票| www.761508.com-搜神传好彩妹配音| www.924905.com-丹麦快乐彩选五计划| www.rt69.cc-牛蛙彩票资料大全| www.571386.com-福利彩票官网客服| www.192167.com-快三开奖软件下载| www.5208.tv-今天七星彩切头尾| www.90rs.com-上海快三彩票| www.22mp.com-彩票靠谱平台有几个| www.529228.com-热门彩票开奖查询| www.750345.com-彩票客服电话| www.937531.com-网站快三押单双大小| www.vh36.com-体彩蓝琪儿今日断组| www.1142.net-买彩票屠龙-| www.68728.cc-乐彩网怎么注册账号| www.560381.com-体育彩票新玩法| www.42ur.com-彩票会被别人复制吗| www.125671.com-澳客手机彩票网下载| www.809439.com-体彩软件哪个软件好| www.966780.com-彩票一撕为二能兑奖| www.vn91.com-甘肃快三和值图| www.096.link-淘金彩票是干什么| www.6916.org-七彩图-| www.72343.com-大奔驰彩票官网| www.123612.com-玩运彩即时比分| www.11050.cc-wap竞彩足球| www.68990.com-印尼五分彩开奖软件|