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天

知道了
亚洲28 www.40156.com-掌上中彩app| www.684278.com-福彩3d211路号| www.818281.com-2013彩票app| www.911453.com-福彩公益项目报道| www.978597.com-彩8彩票苹果版| www.cd0.cc-好彩三开奖结果查询| www.384062.com-买彩票中5000万| www.2148.pw-502彩票-| www.22908.com-王者彩票的网址| www.616494.com-体育彩票代码| www.738544.com-澳彩风情开奖结果| www.898943.com-亚太彩票api接口| www.gq40.com-河南省彩钢围挡厂家| www.40no.com-国家规定彩礼多少钱| www.765020.com-彩票平台搭建开发| www.590610.com-彩票之家免费资大全| www.865070.com-吴旭萍华彩-| www.sq62.com-彩民之家-| www.7755.me-足彩最新伤停情况| www.854632.com-福彩三d开门彩| www.0768.org-刷彩蛋是什么| www.77vd.com-彩娃app官方下载| www.771272.com-天天中彩票网址| www.893052.com-免费彩票缩水软件| www.990797.com-彩票超越软件| www.037400.com-彩克星-| www.158848.com-黑龙江体育彩票中心| www.283575.com-1分彩和值怎么看| www.562127.com-彩506彩票-| www.680522.com-登录亚彩会| www.909038.com-澳门六会彩开奖日期| www.fi58.com-内蒙古福利彩票官网| www.6qk.cc-智慧彩官网论坛| www.1205.wang-地方快三最长龙| www.732379.com-河南和重庆结婚彩礼| www.830704.com-888彩票登录网址| www.968789.cc-乐彩vip登录| www.br82.com-福彩3d软件-| www.50sp.com-毕节附近彩票站| www.ne1.com-鸿彩快三彩票下载| www.387135.com-未派彩是什么意思| www.0275.cc-桃花运电视剧彩票| www.288135.com-数字彩购彩-| www.566048.com-下载彩票bb网站| www.ln90.com-苹果手机彩膜| www.23ul.com-软彩茶具-| www.618677.com-刮刮彩怎么看| www.86hw.com-新浪彩票是黑平台吗| www.9243.wang-重庆彩个位盈利计划| www.505430.com-瑞博国际彩票怎么样| www.889034.com-王者彩票218us| www.f19.com-彩票开奖查询走势图| www.613881.com-中彩啦开挂什么意思| www.679014.com-最新送彩金的网站| www.751944.com-亚彩yc500-| www.818045.com-足彩19024分析| www.893801.com-安徽快三平台下载| www.957429.com-王牌彩票是什么| www.cai0678.com北京快三和值走势图| www.575377.com-中国福彩3d开机号| www.578371.com-甘肃省11选5体彩| www.38fn.com-彩铅画入门教程书籍| www.7884.in-好彩运88hcy| www.55552.com-七星彩获奖规则| www.2301.me-怎么看微彩票分分| www.593810.com-下载够力七彩奖| www.686720.com-福彩网络公司犯法么| www.784307.com-体彩排列五预测| www.854578.com-开门彩下载安装| www.930398.com-正版新粤彩图| www.993766.cc-蓝彩开奖-| www.cs36.com-淘宝彩票大乐透| www.662019.com-南通彩票中奖者| www.cp3711.com-百盈快三是合法的吗| www.267792.com-彩神争vll-| www.ma06.com-11选5爱乐彩推荐| www.9jf.com-体彩一等奖是多少钱| www.234469.com-支持微信提现的彩票| www.363861.com-江苏快三豹子怎么看| www.007400.com-体彩将号-| www.122023.com-8828彩票欺诈| 乐彩网www.695756.com| www.wl21.com-内蒙古快三新规定| www.93dz.com-彩票中的数字规律| www.4575.cc-顶尖的彩票网站系统| www.940484.com-168彩票正规吗| www.cai1555.com网络快三平台| www.012865.com-兼职彩票游戏代打| www.29rq.com-株洲福彩新闻| www.ai89.com-星期六什么彩票开奖| www.0466.vip-79彩票app-| www.148054.com-彩票助手追号计算器| www.627018.com-七喜彩票-| www.339776.com-一品彩票网上买彩票| www.0477.me-广州超大彩箱厂| www.5754.org-快三软件开发| www.2782.biz-今天3b彩报-| www.8797.cm-什么东西能透视彩票| www.485386.com-篮球彩票分析群| www.907380.com-vr3分彩开奖历史| www.982775.com-山西体彩兑奖地址| www.tq2.com-江西福彩假彩票| www.5775.cn-美狮彩票安全吗| www.45sq.com-广西快乐双彩走势阁| www.1368.in-南京福彩网-| www.76nm.com-七乐彩开始销售年份| www.155323.com-体彩胜负平玩法| www.180977.com-湖北快三和值推荐| www.4675.biz-中彩网三地开奖结果| www.234127.com-安徽省福彩兑奖中心| www.948807.com-2018万彩吧-| www.520828.com-彩票中奖喜报| www.3302.cc-易盈彩票邀请码| www.884732.com-亿彩堂是正规平台吗| www.968004.com-竞彩足彩app下载| 大彩网www.660665.com| www.ks01.com-快三怎么充值平台| www.a16.xyz-新浪爱彩app| www.46sb.com-体彩店转让协议| www.2759.pw-唐山体彩中心| www.9073.biz-简单彩铅画风景建筑| www.45616.com-中华彩票网兼职| www.560455.com-彩票收米动态图片| www.578876.com-体彩装修效果图| www.024010.com-苏州福利彩票总部| www.0665.vip-彩票推广员好做吗| www.5816.me-竞彩购买-| www.02756.com-找一下江苏快三| www.585478.com-注册就送免费送彩金| www.830789.cc-注册送彩金的| www.536.me-喝彩中华霍尊| www.3223.mobi-网冠彩下载-| www.377669.com-结婚彩礼和嫁妆问题| www.380141.com-彩鸾归令老宅忆娘亲| www.3238.org-彩票999apk| www.993851.com-中国足球彩票第一期| www.62893.cc-竞彩足球混-| www.667330.com-腾讯分分彩倍投方法| www.583580.com-彩票有多少个号| www.30630.com-福彩3d网址-| www.566941.com-彩神l平台网址| www.222697.com-上海的快三走势| www.499967.com-平台计划师带你玩彩| www.583725.com-中彩网喜点-| www.651860.com-甘肃快三在线开奖| www.713828.com-彩票大小应该怎么买| www.797672.com-中国彩吧新彩吧首页| www.866843.com-七星彩高手交流论坛| www.913422.com-万彩彩票正规吗| www.962146.com-彩涂钢板卷-| www.999848.com-易彩双色球预测| www.pl3.com-新时时彩开奖将结果| www.3788.me-福建即乐彩-| www.zv53.com-彩虹6号围攻多少钱| www.fl20.com-贵州体彩欧阳宵预测| www.ss50.com-彩票33苹果版下載| www.978387.com-来彩020官网网页| www.34902.com-山东体彩论坛bbs| www.53193.cc-重庆时时彩账户申请| 汇彩网www.www.hcw266.com| www.ku82.com-彩票是什么定律| www.p80.in-滴滴彩票多少提现| www.yl96.cc-d8彩票网络平台| www.16dg.com-彩虹6号买了后悔|