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.109545.com-7星彩开奖结果网易| www.313009.com-青蛙彩-| www.440449.com-大乐透彩票购买时间| www.546908.com-皇冠彩票真的假的| www.639727.com-体彩兑奖是拿现金吗| www.730570.com-易彩快三骗局| www.808895.com-任选九场竞彩网| www.887581.com-360快三杀号定胆| www.969101.com-兼职刷彩金单| www.cp9770.com-3快三走势图青海| www.97mu.com-体彩竞彩怎样打票| www.363046.com-福彩选四开奖查询| www.618288.com-体彩有公益性吗| www.95ut.com-球彩友多店铺二维码| www.693571.com-f彩网分分快三计划| www.287064.com-五亿彩官方-| www.449962.com-博彩公司如何风控| www.553594.com-体育彩票nba竞猜| www.648178.com-霍金彩票公式原版| www.802369.com-彩友多app下载| www.884454.com-湖北福彩快三app| www.231555.com-幸运中彩票下载| www.341859.com-3d和值走势图大彩| www.454650.com-博彩十大公司| www.555737.com-3607乐彩走势图| www.621959.com-看彩啦分析-| www.861111.com-好彩20299-| www.748259.com-有兼职叫注册中彩网| www.835029.com-好彩香烟哪里有得卖| www.cai8080.com吉林快三值和走势图| www.xu40.com-38彩票app-| www.68sy.com-酷彩苹果下载安装| www.4257.biz-渐江快三开奖结果| www.kq43.com-玩大发快三技巧| www.321137.com-体彩七星开奖| www.430756.com-永利彩票是正规的吗| www.8909.vip-竞彩3x1-| www.219413.com-彩票投注方式有哪些| www.369218.com-买彩票上瘾怎样戒掉| www.553224.com-邯郸体育彩票站点| www.76081.com-足彩2串1计算公式| www.0266.cm-时时彩半顺杂六计划| www.590993.com-唯彩看球双色球杀号| www.867359.com-一定牛彩票怎么样| www.4950.net-4567彩票主页| www.0697.cm-西安彩票店生意转让| www.9918.live-官方彩票之免费资料| www.99293.cc-2d福彩奖金规则| www.114830.com-精英彩票9118| www.209023.com-易彩游戏app下载| www.830344.com-qq分分彩怎么玩| 华夏彩票www.hx3355.com| www.hy29.com-巨彩彩票安全吗| www.258135.com-安全购彩app| www.036836.com-爱投彩票软件| www.233860.com-河南省福彩快三| www.333403.cc-微信分分彩官网| www.433489.com-假彩票图片-| www.cp0412.com-手机购彩软件| www.351744.com-福彩销售提成| www.532862.com-澳门≡和彩开奖结果| www.03700.com-买彩票一定会亏吗| www.839940.com-数字彩票体育彩票| www.456149.com-海南七星彩预测码| www.562244.com-什么是彩票流水| www.72892.com-彩友多官方下载| www.317085.com-黑龙江时时彩首页| www.wi55.com-六给彩票香港图片| www.kf01.com-福利彩票奖金多少| www.640019.com-大通彩票有没有作假| www.713610.com-王者彩票开奖| www.132158.com-彩票306是黑网吗| www.mw67.com-微彩app下载| www.358149.com-足彩最新开奖论坛| www.518737.com-11选5旺彩-| www.602790.com-立彩助手准吗| www.681119.com-l浙江福彩网| www.365046.com-惠民彩票的导师号码| www.526963.com-英国幸运五星彩走势| www.1375.net-九龙国际彩票揭秘| www.9056.vip-重庆时时彩源码下载| www.43644.com-中彩网选号助手| www.789611.com-女足世界杯竞彩| www.961737.cc-北京快三口诀| www.62838.cc-篮球竞彩新浪| www.683801.com-恒彩app-| www.729773.com-愚人节中奖彩票制作| www.137442.com-彩票返点-| www.00210.com-投彩彩票哪个好| www.sj8.cc-福彩开奖结果查询| 博友彩www.371z.cc| www.zo96.com-七彩阳光-| www.4296.vip-246赢好彩-| www.79387.com-体彩黑龙江11| www.670980.com-赢网彩票-| www.136138.com-网上买彩票哪个好| www.338917.com-够彩大厅网址| www.hq3.com-中国福彩快开彩| www.835679.com-青海省体彩任5| www.571649.com-盈彩app正规吗| www.28169.cc-凤彩双色球字谜| www.667156.com-时时彩四星小概率| www.826305.com-信达国际里面是彩票| www.957888.com-北京爱彩乐快3| www.hx.cc-北京快三大小单双| www.ub09.com-好123彩票导航| www.548988.com-自己玩彩票犯法吗| www.678271.com-更懂彩民-| www.767010.com-20号快三开奖结果| www.41032.com-中英彩票网官网| www.ao80.com-贵州中彩票-| www.956051.com-3d彩票字谜图谜| www.6280.cc-彩涂钢板的使用寿命| www.036769.com-快三拖码全中| www.22762.cc-彩票平台送试玩金| www.qa99.com-彩票主任是什么梗| 大赢家彩票网www.178215.com| www.e10.pw-竞彩神人-| www.2676.wang-福彩3d蜂巢配胆图| www.60232.com-python彩票-| www.772624.com-彩票中奖上税多少| www.909460.com-彩票网cpw-| www.83xu.com-花生彩票-| www.86236.com-福彩3d模拟摇奖噐| www.80084.cc-河内1分彩规则| www.035276.com-至尊大发快三| www.1909.me-加盟机器人福利彩票| www.525530.com-重庆彩票中心网站| www.835738.com-中彩那天课文分段| www.593408.com-滁州乐彩城-| www.180218.com-快三倍投方案稳赚| www.676904.com-进口彩妆批发市场| www.751436.com-福彩怎么买法| www.04qe.com-先学线描还是彩铅好| www.82kp.com-福彩3d杀八个跨| www.3450.wang-免费下载中彩易| www.672012.com-彩票反追杀系统| www.427715.com-德国鲸彩漆-| www.21vj.com-福利彩票试题| www.q09.cn-利盈彩票-| www.819797.com-刮彩票的秘诀| www.923499.com-彩票店主吃票怎么判| www.np38.com-福彩主任-| www.640887.com-中国体育彩票标志| www.791121.com-彩票大师下载软件| www.895889.com-永诚中彩票安全吗| www.984748.com-彩运8官网登录| www.iy07.com-彩票倍投有成功的吗| www.701991.com-竞彩软件下载| www.537417.com-彩色的填什么| www.789890.com-银川体彩兑奖中心| www.862890.com-彩票挂机软件教程| www.908112.com-七乐彩经典杀号公式| www.959669.com-战狼彩票精准计划| www.998171.com-国民彩票app官网| www.nk7.com-福彩三d走势图综合| www.86907.com-福彩3d复式-| www.79474.com-彩6采票时时彩| www.425702.com-上海快三360| www.797.red-体育彩票返点时间| www.4834.biz-物超所值的彩票程序| www.280650.com-彩票虚拟投注网| www.841201.com-七哥足彩微博| www.953079.com-中国福彩体彩足彩|