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天

知道了
彩01彩票 www.984460.com-体彩大乐透摇奖时间| www.v01.cn-金彩平台怎么样| www.4230.win-网易红彩竞彩专家| www.253155.com-好彩妹电视剧演员表| www.667220.com-七乐彩头奖多少钱| www.859581.com-蜂鸟团队5分彩骗局| www.n53.cc-天天爱彩票下载| www.6395.org-丹麦快乐彩开奖| www.95605.cc-彩票用途-| www.455535.com-七乐彩准确杀号公式| www.en59.com-快三体育娱乐平台| www.703345.com-福彩软件手机版下载| www.967746.com-玩时时彩心得| www.251082.com-爱彩彩票软件| www.508907.com-圆梦彩票app| www.987561.com-乐优炫彩可以用吗| www.ui1.com-百宝彩票网手机版| www.o76.cn-足球彩票怎么看| www.503503.cc-彩虹直播ios| www.668737.com-胜负彩14场技巧| www.778206.com-精彩音乐汇歌曲名单| www.882290.com-彩票有34数字吗| www.cp986.com-福建快三开奖号码表| www.980570.com-玩体彩屋犯法吗| www.261950.com-腾讯快三app| www.414448.com-出彩近义词-| www.540410.com-网络高频彩为什么输| www.650339.com-创意水彩笔画| www.848915.com-万彩吧彩票开奖| www.80055.cc-彩票快3河北| www.99595.cc-最近的体育彩票站| www.50094.cc-佰万彩票下载安装| www.020002.com-欠债突然中彩票| www.35706.com-一中体彩竞彩实体店| www.069046.com-百万彩票一今日盈亏| www.81wj.com-稿彩3d新彩网| www.288717.com-江苏快三最长的龙| www.495618.com-抠门博彩-| www.16990.cc-可变条码彩票价格| www.54481.com-彩票群名称-| www.044785.com-牛彩一湖北快三专用| www.184340.com-湖北快三走势头| www.262225.com-福彩快3在线投注| www.339466.com-11选5爱乐彩浙江| www.556150.com-乐彩网正规吗| www.528833.com-歌词里最美的彩虹| www.619806.com-足彩推荐佬牛| www.ri24.com-动物福彩-| 中彩www.zcwf4.com| www.m00.cc-七乐彩平台下载| www.870698.com-秒速时时彩开奖盛世| 大彩网www.193195.com| www.q32.link-广西快三50期| www.98iw.com-长城彩注册-| www.264861.com-中国福彩中心在哪里| www.zo62.com-玩重庆时时彩的心态| www.230182.com-3d彩票专家预测| www.355713.com-3d彩吧红五图库| www.273631.com-五分快三顺口溜| www.972992.com-彩库宝典开奖现场| www.235.cn-体彩5d出什么号码| www.10787.com-盈彩彩票app下载| www.22752.cc-大众商家彩票新快三| www.458505.com-竞彩串关计算方法表| www.892572.com-有人知道彩票榜吗| 云博彩票www.15199.cc| www.km40.com-中国足彩网德甲| www.s46.com-谁有注册送彩金的| www.91fi.com-如何成为彩票分析师| www.4842.top-梦见进了彩票店| www.025693.com-内蒙古体彩网| www.422798.com-彩民乐阳光探码图吧| www.620108.com-永盛彩票直播网| www.633567.com-神彩通四码-| www.777580.cc-彩票代赚-| www.04186.com-超级彩票助手全能版| www.888054.com-香港赛果及派彩| www.252566.com-中彩网提现-| www.433323.com-搜索彩票双色球| www.794307.com-北京快中彩奖池| www.157892.com-竞彩足球ios| www.434380.com-最专业移动彩票软件| www.662601.com-重庆实时彩代理返点| www.999329.com-大运彩票手机app| www.u66.me-现金彩票平台怎么样| www.9126.shop-七乐彩近期开奖| www.396200.com-周一买啥彩票| www.850854.com-足彩胜负彩复式表| www.yp6.com-彩票快三怎么玩法| www.080996.com-競彩-| www.69756.com-拉萨市体彩11选5| www.772120.com-时时彩组三倍投方法| www.882700.com-易彩网黑我钱| 大赢家彩票平台www.165370.com| www.eu35.com-彩票助赢计划网页| www.369047.com-3d福彩图纸322| www.916307.com-彩71彩票快三玩法| 豪彩VIPwww.966026.com| www.zp22.com-好彩2中奖规则| www.949571.com-运盈彩票骗局| www.2107.shop-福利彩票42-| www.06599.com-3d竞彩网-| www.cai26.com-大发快三怎么玩| www.499698.com-韩国足球彩票| www.p85.org-9万彩票官网| www.027.vip-老徐说彩论坛公众号| www.035944.com-彩票中奖提醒软件| www.380310.com-中国彩票中心官网| www.580470.com-众发彩票害了多少人| www.zp02.com-33372幸运彩票| www.1675.vip-超高彩票平台| www.23259.com-彩神3是真的吗| www.223249.com-凤凰彩票专属计划群| www.376608.com-腾讯时时彩群| www.798572.com-彩票中200万图片| www.961036.com-台湾天天快三| www.73xa.com-婚恋骗局重庆时时彩| www.43246.com-乐优炫彩彩票诈骗| www.047998.com-专业玩彩3d彩票网| www.212448.com-彩票加盟多少钱| www.344436.com-海南体彩4十1规则| www.ny.com-宁夏福彩快三开奖号| www.9407.loan-金三角博彩公司图片| www.427206.com-全彩网报码室| www.587632.com-彩票13期-| www.352839.com-手机黑彩怎么运行| www.it03.com-彩票预测推荐| www.044299.com-7星彩预测最准号码| www.70002.com-大钱庄彩票官网| www.154557.com-足彩结束日期| www.429408.com-陕西乐彩-| www.fp43.com-uu直播大发快三| www.393092.com-吉林快三三不同赔率| www.807161.com-废旧彩票折-| www.rf42.com-北京福彩网官方首页| www.79er.com-彩票小说彩票小说| www.677259.com-全国彩票查询| www.713830.com-彩神x合法吗| www.874945.com-有游彩票平台| www.865788.com-有彩票中几十万的么| www.1211.net-彩票中2亿-| www.21048.com-西甲竞彩预测| www.17um.cc-今晚七乐彩中奖号码| www.6665.cn-百盈快三犯法吗| www.117751.com-足彩竞彩360| www.414140.com-新浪中国竞彩对阵表| www.cai9995.com分分快三-| www.1407.org-大赢家彩票提现失败| www.059876.com-湖北快三选号图| www.206028.com-体彩第19017期| www.9311.cn-超级福彩七乐彩| www.6656.site-迅盈彩票提款不了| www.066189.com-彩票网模拟投注器| www.324782.com-去马来西亚做博彩| www.558791.cc-富贵彩app下载| www.52012.com-在中彩网注册没事吧| www.cp6008.com-福彩3d跨度-| www.03he.com-风之彩app彩票| www.28781.cc-彩线条旗舰店| www.083397.com-福彩3d开奖时间| www.276263.com-七乐彩9中5-| www.456916.com-金巴黎彩票手机注册| www.677077.com-福彩体彩是不是骗局| www.249818.com-棒棒彩票骗局|