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天

知道了
百盈PK10 www.838394.com-千万彩票得主死亡| www.53709.com-美团彩票游戏| www.59933.com-快三012走势图表| www.366054.com-彩铅手绘肖像超逼真| www.516256.com-中发彩票怎么下载| www.28722.com-cc彩票会员登录| www.380075.com-什么的彩云填空词语| www.871440.com-福彩彩图吧-| www.963674.com-彩票被骗了怎么办| TT彩票www.526170.com| www.mp14.com-时时彩后一稳赚公式| www.749.bid-时时彩三星怎么做号| www.9888.cn-国家管控竞彩| www.004383.com-福利彩票停售后| www.251036.com-一号彩票安卓| www.460690.com-01彩票网络平台| www.559209.com-克市红山体彩| www.628983.com-彩票同ip多账号| www.847275.com-足彩去哪里买得到| www.23882.com-龙江福彩22选5| www.020797.com-彩票源码模板| www.180625.com-江苏快三是不是真的| www.194649.com-河北福彩快三玩法| www.990991.com-易彩票极速快三| www.280639.com-乐玩彩-| www.235297.com-陕西福利彩票app| www.356604.com-宁波年会彩票中奖| www.522764.com-5位分分彩出牌规律| www.625566.com-七乐彩摇奖直播| www.750003.com-金牛彩票下载| www.856773.com-中奖彩票电影| www.968974.com-时时中彩票平台| www.121973.com-福彩头奖是内定的吗| www.yg64.com-广东竞彩快三查询| www.9814.xyz-481彩票倾家荡产| www.006454.com-河南福彩中心在哪| www.100110.cc-湖北百宝彩公众号| www.623389.com-顺亿彩票是真的假的| www.029824.com-彩票10086-| www.177022.com-三分快三如何回本| www.kh02.com-双彩图3d-| www.476934.com-体彩组任三什么意思| www.571329.com-彩票3d2码软件| www.668275.com-河北彩礼多少钱| www.739824.com-福彩3d坑人-| www.818703.com-世界杯体彩软件| www.895822.com-福利彩票合买中心| www.961758.com-支付宝买不了彩票| 500彩票www.52072e.com| www.ik05.com-500万彩票网登录| www.858525.com-竞彩胆拖可以打吗| www.948579.com-福彩3的定位| 818合彩www.www.9889hc.com| www.hf10.com-快三开奖所有号码| www.xy04.cc-体育彩票中奖查询| www.387366.cc-8p彩膜-| www.552252.com-壹玖玖彩票-| www.671982.com-类似彩宝彩票的软件| www.761145.com-好彩1走势-| www.302664.com-977彩票官方| www.54215.cc-重庆时彩客户端| www.837565.com-亮力彩-| www.923285.com-补偿公告腾讯彩票| www.983598.com-天津市福利彩票兑奖| www.bq69.com-广西快三app下载| www.rs48.com-彩票中奖打错该赔嘛| www.04ij.com-彩铅画玫瑰花线稿| www.75oj.com-高档古建彩绘图案| www.1784.me-最牛的彩票预算大师| www.7534.pw-福彩发行中心主任| 博友彩www.977657.com| www.402755.com-四川福彩兑奖地址| www.465777.com-彩绘图片-| www.618331.com-咸阳市体育彩票| www.730569.com-哪个彩票软件靠谱| www.2736.wang-中国福利彩票网山西| www.76818.com-e乐彩登录平台| www.054982.com-出租体育彩票机器| www.822661.com-彩票创新-| www.938719.com-5亿彩赚钱-| www.93iz.com-速赢彩app下栽| www.7093.live-七彩联盟有哪些学校| www.582234.com-彩客网彩票完整| www.934304.com-智博彩票平台| 8816彩票www.8816p.com| www.7236.biz-画一个彩虹的美术画| www.308944.com-大马开彩成绩| www.633235.com-双色球彩经专家杀号| www.763129.com-缅甸时时彩是真的吗| www.7698.shop-彩票五个亿-| www.53297.cc-腾讯分分彩和值计划| www.060614.com-琼海最大私彩老板| www.226060.com-快乐彩12选5胆拖| www.362517.com-一年级彩虹课文| www.94pw.com-福星福彩3d-| www.218610.com-彩票代理找客户方法| www.15913.com-老翁识彩双色球专栏| www.280853.com-福彩3d心得经验| www.237751.com-竞彩网计算器胜平负| www.2567.xyz-808彩吧app-| www.826771.com-福彩3d藏机诗正版| www.190082.com-中国第一快三彩票网| www.318142.com-官方彩传统彩| www.567203.com-彩票平台会控制输赢| www.778657.com-中彩彩票广东快三| www.934376.com-快彩电视走势图安装| www.gf59.com-韩国彩票开奖| www.690922.com-盛典彩票下载| www.800016.cc-湖南福彩走势图| www.885096.com-神洲彩票网-| www.841149.com-体彩的类别-| www.968390.com-时时彩开奖历史数据| www.061079.com-可靠的购彩app| www.2494.top-全国彩票计划| www.99225.cc-极速时时彩公式集合| www.42075.com-澳发彩票手机版| www.921375.com-彩神l软件-| www.fq34.com-至尊彩一分快3| www.021.cc-体彩内蒙古-| www.044654.com-美团彩票机-| www.82ht.com-南洋彩开奖现场下载| www.15582.cc-中彩网排列五走势图| www.48xe.com-彩票充值不到账| www.858459.com-中国湖北彩票网| www.931812.com-淘金网买足彩骗局| www.pp59.com-体彩官竞-| www.187702.com-时时彩长期稳定玩法| www.256983.com-3d彩票分析软件| www.325861.com-新浪竞彩足球比分| www.699327.com-云南时时彩开奖今天| www.160061.com-一个软件是个8彩神| www.663153.com-体彩篮球怎么玩| www.790958.com-今天广西快三结果| www.877221.com-113彩票app-| 吉利彩票www.66376t.com| www.193.live-零基础学彩铅画入门| www.599499.com-如何提高彩票店销量| www.ew2.com-广西十分彩开奖直播| www.uh34.com-谁有彩票邀请码| www.19vj.com-彩仙阁挂机软件| www.93jt.com-最近的体彩售卖点| www.289281.com-5分彩官网-| www.036163.com-统计学怎么研究彩票| www.86182.cc-彩民堂官网-| www.97yh.cc-乐彩网3b试机号| www.21ea.com-体彩中心笔试题库| www.1964.xyz-3d彩吧怪字-| www.358195.com-爱彩国际有听说过吗| www.494813.com-老郑个人展示竞彩| www.55840.com-福利彩票147| www.95340.com-福彩3太湖字谜| www.7245.cn-彩虹六号妖怪无人机| www.672557.com-下載彩吧助手| www.750063.com-旺彩彩票查询| www.813086.com-彩票兼职诱骗| www.187641.com-内蒙古福彩快三预测| www.4080.net-四海图库彩看图区图| www.09769.com-彩友沙龙-| www.98lw.com-黑彩有人赚钱走吗| www.292123.com-彩票站打票员好干吗| www.723933.com-快乐扑克3彩乐乐| www.937307.com-湖北彩妆培训| www.331009.com-大发彩票助软件| www.773747.com-时时彩大小单双平刷|