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.ck32.com-彩界联盟官方下载| www.1908.net-福利彩票机器人代理| www.03934.com-沈阳市福彩中心| www.74688.cc-重庆时时彩每年停售| www.035515.com-彩票大数据软件| www.295833.com-广西快三选号助器| www.024597.com-彩神通内部会员四码| www.lz94.com-808彩票加急彩版| www.818485.com-双色球机选新浪爱彩| www.503122.com-c彩-| www.338153.com-可以合买的彩票网站| www.300027.com-苏宁易购彩票| www.628899.cc-香港6和合开彩结果| www.739493.com-08彩票app-| www.845422.com-中国福利彩票介绍| www.947673.com-马云阿里巴巴彩票| 大赢家彩票网www.544010.com| www.189172.com-二分快三是什么彩票| www.728548.com-海南体彩客户端| www.0921.top-彩票合买机会多吗| www.591621.com-救世主博彩论坛| www.665293.com-七乐彩2000-| www.736022.com-赚钱网站彩票| www.815403.com-体彩手机在线即开彩| www.886324.com-盈彩吧app-| www.40fw.com-七星彩走势近30期| www.18123.com-竞彩足球比分怎么玩| www.20089.com-浙江省福彩中心| www.71148.com-杀号定胆360彩票| www.295019.com-5分彩官方网站| www.395058.com-彩虹授权官网查询| www.255689.com-时时彩五星单式规律| www.622077.com-彩赢国际注册| www.733923.com-佛山快三路线查询| www.831909.com-中国福彩七乐彩规则| www.942822.com-go彩安卓-| www.cp9956.com-好运彩快三app| www.380192.com-今日快三-| www.584677.com-正规的皇冠彩票网站| www.864765.com-305彩票app-| www.55gm.com-海南七星彩梦册大奖| www.0033.me-彩票一组号码是几个| www.012112.com-体彩组选六8码遗漏| www.812083.com-广发彩票是什么| www.906525.com-哪个彩票快三很好| www.980111.cc-彩票销售员招聘| www.at60.com-下载吉林快三| www.wd74.com-东北快三查询| www.568719.com-历下体育彩票| www.651065.com-7070彩-| www.731657.com-竞彩足球比赛结果| www.822122.com-手机彩票能兑奖吗| www.889378.com-98如意彩票网注册| www.954441.com-牛蛙彩票四不像图| 好运彩票www.007hy.cc| www.ko30.com-华夏彩票领导者| www.k24.biz-微信群北京快三大小| www.38zp.com-儿童彩铅风景画简单| www.629257.com-彩票咨询服务| www.09005.com-广东省体彩中心官网| www.382028.com-点击看更多精彩视| www.839663.com-今日新鲜事一彩票| 大赢家彩票平台www.756693.com| www.159881.com-福彩3d两码和差| www.500087.cc-最新出兑福利彩票| www.768769.com-8k彩票网址-| www.26786.cc-彩票带单套路| www.108352.com-总是买彩票什么心态| www.716371.com-彩铅画河流-| www.88174.com-乐猫彩票下载| www.836882.com-立彩彩票欺骗| www.385981.com-彩票三地开奖| www.094234.com-足彩十四场胜负预测| www.737852.com-欢乐彩票官网下载| www.po46.com-大发快三破解器开挂| www.2570.net-趣趣彩票-| www.400559.com-中国福利彩票的类型| www.659420.com-体彩七星直播| www.770877.com-竞彩足球app源码| www.978800.com-皮得欢好彩1预测| www.759882.com-幸运测算时时彩宝典| www.493338.com-中你体育彩票| www.375644.com-体彩兑奖需要哪些| www.944914.com-乐发彩票下载| www.ij39.com-新版7070彩票| www.ht38.com-黑龙江福利彩票| www.719998.com-七星彩奖金表| www.272157.com-快三1分彩-| www.407377.com-两元七星彩走势图| www.590152.com-苏宁体彩-| www.730581.com-老梁说彩票是哪一年| www.919166.com-玩黑彩的软件| www.4676.org-彩票30号-| www.66269.cc-电竞彩票下注app| www.255255.cc-彩票.开奖-| www.374268.com-七星彩80期走势图| www.639365.cc-自助售彩终端机| www.129589.com-3d众彩网精品杀号| www.69634.com-山西十分彩-| www.118190.com-中国体育彩票电脑| www.266625.com-河北快三对子号分析| www.370317.com-摇骰子彩票-| www.686051.com-十分彩app下载| www.809638.com-官方彩合法吗| www.802908.com-长沙福利彩票| www.898521.com-彩票扫一扫在哪里| www.ch96.com-炫乐彩票官网| www.d13.net-快三和值最大遗漏| www.940.mobi-一分极速澳门彩票| www.138241.com-577彩票网平台| www.951074.com-立彩怎么赚钱| www.30826.com-彩票中奖现实吗| www.130236.com-查福彩开奖-| www.tj06.com-江苏体彩玩法介绍| www.577985.com-鄂彩女装是品牌吗| www.222112.com-盈彩网属于合法的吗| www.531193.com-彩铅画涂色搭配技巧| www.82cb.com-足彩四场进球彩预测| www.679226.com-聚彩手机网-| www.345270.com-大发彩平台-| www.473520.com-福彩3d今晚杀码| www.633166.com-竞彩篮球彩票规则| www.841121.com-淘宝彩妆店铺推荐| www.0950.vip-福州彩票app制作| www.011513.com-福彩昨天的中奖号| www.2029.vip-河南大乐透彩票中心| www.207598.com-五分彩分析软件| www.2518.net-彩形声字-| www.792656.com-快三数据专家触屏版| www.yf00.com-好彩店客服电话| www.70504.com-彩票打印模板| www.260111.cc-福彩兑奖方式| www.654196.com-高仿热敏彩票机| www.024642.com-中国福彩网积分兑换| www.57571.cc-皇冠体彩安全吗| www.345174.com-彩票与棋牌-| www.9475.loan-下载够力七星彩长条| www.079970.com-彩票交多少税| www.577135.com-彩票怎样解除银行卡| www.899775.com-彩81软件-| 天下彩www.648689.com| www.k39.la-快三群二维码| www.014481.com-七乐彩专字定胆杀号| www.012527.com-海南体彩开奖结果| www.qr60.com-中国体彩的发行宗旨| www.311115.com-分分快三买单双技巧| www.443543.com-搜索青蛙彩-| www.591651.com-sb是哪个博彩公司| www.345168.com-福利彩票8官方网站| www.647768.com-好彩运-| www.863237.com-彩票源代码-| www.145316.com-中国彩吧助手走势| www.367685.com-筒井彩芽生日| www.590323.com-法律规定结婚彩礼钱| www.824015.com-三彩女装正品折扣店| www.45533.cc-微彩店是正规的吗| www.041205.com-广西福利彩票下载| www.214989.com-全民快三官网| www.377087.com-葡京彩票下载安装| www.580115.com-彩神计划江苏快3| www.734633.com-91彩神吧-| www.928076.com-3d新彩票走势图| www.qf70.com-全民足彩app下载| www.4446.xyz-澳门快三计划|