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.7116.vip-博创彩票官方下载| www.40925.com-立彩彩票助手| www.83959.com-投资彩票稳赚的方法| www.867559.com-湛江南国彩票| www.951635.com-江苏快三软件制作| www.ab97.com-江苏体彩网首页| www.xc07.com-福彩快三一共多少期| www.23xd.com-盛彩彩票是真的吗| www.707536.com-连中彩彩票网| www.832282.com-七彩视界怎么用不了| www.910427.com-彩99安卓下载安装| www.7lw.com-体彩店网店-| www.93dr.com-078彩票公益代打| www.3656.wang-快三正文-| www.01106.com-121七星彩走势图| www.003945.com-中国彩票坑了多少人| www.093090.com-靠彩票发财可能吗| www.189172.com-二分快三是什么彩票| www.301165.com-体彩任三玩法| www.232762.com-北京中彩票大奖| www.6966.bid-安徽快三21号开奖| www.010043.com-足彩网站-| www.237513.com-新浪足球竞彩网| www.501268.com-下载迷彩虎军事| www.650528.com-最流行的彩票| www.809086.com-好彩客老版-| www.062426.com-瑞彩祥云官方邀请码| www.306673.com-彩票中数字规律| www.470338.com-时时彩源码安装教程| www.624728.com-33彩票是谁超控| www.802143.com-内蒙快三下注平台| www.18yi.cc-今期的七乐彩开奖| www.v58.cc-牛彩网摘网收录彩吧| www.p25.cc-体育彩票多少个号码| www.524646.com-大乐透幸运彩乐乐| www.297587.com-四川重庆快三开奖查| www.613862.com-马来西亚福彩字光| www.915320.com-淘宝彩票真实吗| www.401851.com-搜索彩票查询| www.683098.com-刮刮乐彩票-| www.948113.cc-福利彩票的中奖规则| www.ce56.com-快三可以赚钱吗| 彩客博www.8667n.com| www.tj44.com-真实彩票网站| www.42dl.com-希望彩票安卓版下载| www.0566.net-福彩3d蓝精灵| www.961615.com-各种釉彩大瓶也自| www.eb98.com-怎么注册快三账号| www.2548.cc-众恒彩票app| www.55580.cc-英国五星彩开奖号码| www.db47.com-彩神争8下载| www.57242.com-网络投彩是否骗局| www.966202.com-中国足彩即时比分| www.eq40.com-今日体彩开奖| www.8412.net-五福彩彩票软件下载| www.914300.com-福利快福利快三下载| www.wg66.com-旧版360彩票| www.323728.com-七星彩网易开奖直播| www.64wv.com-一分彩计划网| www.61138.com-开彩票投注站经历| www.809481.com-qq腾讯彩票网| www.269922.com-彩票送58-| www.yh24.com-甘肃福彩双色球预测| www.lf7.com-一分快3彩票网| 六福彩票www.66ffa.com| www.670918.com-七彩色吉祥吗| www.83578.com-不归路买彩-| www.689.club-竞彩足球亏了十万| www.38809.com-彩神v11靠谱吗| www.gi75.com-江苏彩票巨奖骗局| www.49zw.cc-质量可靠的足球彩票| www.205569.com-快三怎么观察走势| www.j17.cc-吉林快三一百期在哪| www.871.red-乐彩客网址-| www.jq26.cc-网赌一分快三| www.18333.cc-福彩中奖故事| www.102084.com-幸运快三彩下载| www.018092.com-傲赢彩票下载| www.839515.com-足彩最大推荐平台| www.314905.com-深圳一定牛彩票网| www.am40.cc-易彩网app下载| www.892849.com-500彩票下载安卓| www.77693.cc-哪个软件买彩票可靠| www.124779.com-腾讯5分彩靠谱不| www.446410.com-无损对刷彩票| www.983240.com-盈彩把钱提得出来不| www.025945.com-3号彩app-| www.802662.com-198时时彩注册| www.822412.com-爱博彩票网-| www.947763.com-大连福彩事业编| www.21pv.com-彩票网站入侵| www.150182.com-安徽快三时时彩网站| www.1949.loan-彩票最高有多少条龙| www.24478.com-彩色铅笔画樱桃| www.564688.com-七星彩解码梦册网| www.46918.com-非凡高频彩票网| www.485758.com-购彩网是合法的吗| www.052995.com-足球彩票app下载| www.398026.com-乐米彩票无法提现| 吉利彩票www.66376m.com| www.8959.in-聚彩堂计划下载| www.72770.com-天津福彩在哪兑奖| www.1345.hk-苹果彩票靠谱吗| www.477460.com-彩神通双色球手机版| www.247393.com-上海福利彩票选四| www.5178.cn-韩国彩票都有哪些| www.130801.com-爱彩app是真的吗| www.207311.com-至尊争霸快三| www.652790.com-彩中堂zzycc| www.5499.net-开个彩票店怎么加盟| www.937908.com-云彩app-| www.333717.com-体彩排列3中奖说明| www.553863.com-足球竞彩知识| www.539954.com-什么叫杀时时彩跨度| www.682505.com-今日福彩3藏机图| www.3374.cm-足彩加命中率怎么样| www.93499.cc-竞彩主队让一球负| www.285591.com-彩票外围网站哪个好| www.135086.com-360彩票购彩平台| www.710808.com-558赢彩能信吗| www.163131.com-易彩彩票官网app| www.671155.com-彩独2-| www.965432.cc-01彩票是什么| www.984394.com-高频彩那么假还玩| www.fg47.com-彩票平台赚返点| www.90bv.com-地下博彩-| www.qo57.com-广西福彩官网客户端| 500彩票网www.61655w.com| www.144584.com-今日足彩竞猜分析| www.38383.com-天天爱彩票安卓| www.462081.com-彩票充值陷阱| www.597976.com-阿莉彩票网站| www.96wh.com-奔驰彩票apk| www.7190.biz-七彩印象16支香烟| www.346213.com-天天彩票坑人吗| www.426726.com-快三直选奖金多少| www.918898.com-怎么举报卖私彩的| www.997248.com-江苏利彩快三| www.nw79.com-98彩票登入-| www.971804.com-创彩网兼职-| www.ga17.com-天天中彩票正规吗| www.31589.com-双色球易彩网买彩票| www.106027.com-3d彩经网专家杀号| www.953426.com-310竞彩足球推荐| www.93417.com-专业玩彩双色球| www.419560.com-怎么申请开体彩店| www.635920.com-七乐彩精准杀号公式| www.56av.com-西安三彩服饰专卖店| www.838703.com-七乐彩推荐号码预测| www.78wk.com-台湾五分彩开奖分析| www.41214.com-彩票网投大全| www.545754.com-长沙福利福彩店| www.5684.vip-麒麟彩票网骗局| www.425432.com-七彩冰淇凌-| www.7055.org-信特斯收购虹彩| www.940770.com-彩44平台安全吗| www.3912.org-阿里彩票官方平台| www.672760.com-福彩3今天开机号| www.128611.com-福彩3d宗合走试图| www.bs55.com-老彩民app玩快三| www.88gb.com-彩票粉有毒吗| www.588957.cc-福彩网充值网址| www.zd74.com-乐透乐博彩三地字谜| www.1225.net-缅甸博彩工作安全吗|