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.236953.com-竞彩310预测| www.089951.com-江苏快三最多连开| www.450021.com-篮彩竞猜网站| www.201254.com-十分快三是骗人的么| www.xm64.com-江苏省福彩快三走执| www.855276.com-体彩机选中奖故事| www.973445.com-彩虹宝宝彩虹堡| www.cp7158.com-网上刷彩-| www.383029.com-彩票中奖捐款| www.737328.com-顶级彩票技术分析| www.277619.com-彩票中奖破解软件| www.325486.com-福利彩票谜语总汇| www.650111.cc-博彩官网-| www.741522.com-2018竞彩普及日| www.821023.com-彩色水泥价格| www.896747.com-一分快彩怎样玩| www.975945.com-旧够力七星彩奖表| www.bg03.com-8k彩排怎样看走势| www.ih5.com-快乐彩开奖号码走势| www.1466.cc-彩铅手绘古风少女| www.005317.com-体彩历史开奖号码| www.324236.com-青岛福彩中心地址| www.513631.com-官方彩有人被骗吗| www.621153.com-众盈彩票是黑彩吗| www.717005.com-安徽体彩家园网| www.872010.com-贵州彩票投注站| www.970841.com-七星彩开奖宝贝| www.cn65.com-5分快3购彩平台| www.1xt.cc-办公彩色标签打印机| www.034406.com-篮球竞彩推荐| www.1iq.com-乐彩三地开奖号| www.523531.com-希腊五分彩开奖结果| www.344187.cc-手机时时彩票模拟器| www.447881.com-今日丫头说彩| www.570231.com-福彩3d二码分沁图| www.673108.com-体彩七星彩领奖地址| www.766703.com-超级快三是不是真的| www.085859.com-彩票对刷刷反水| www.217106.com-彩票托一个月多少钱| www.311377.com-极速快三开奖网页| www.405432.com-修武彩票6000万| www.539390.com-八号彩票不能用了| www.665899.cc-时时3分彩开奖记录| www.059415.com-信心彩路线入口| www.321298.com-全民足球彩票下载| www.7df.com-员工年终奖彩票中奖| www.79qm.com-惠州福彩-| www.3193.com-七乐彩免费最准预测| www.066466.cc-玩彩票大平台怎么样| www.649896.com-天牛图库天牛彩报| www.767279.com-时时彩倍投方案表| www.079227.com-时时彩二星万能码| www.797953.com-福利彩票直播频道| www.874280.com-两个平台彩票对刷| www.970937.com-福利彩票原则| www.cp5685.com-五分快三是哪开奖| www.568338.cc-微彩论坛排列五| www.664839.com-彩霸王料杀10码| www.750014.com-彩票代理app下载| www.830766.com-500彩票苹果下载| www.11gv.com-福彩三第字迷汇总| www.636467.com-彩虹六号高清图片| www.717077.com-彩铅渐变法-| www.228797.com-好彩彩票合法吗| www.326176.com-p3走势图彩宝网| www.411300.cc-下载中国彩票开奖| www.k68.cn-大发云彩票系统平台| www.343128.com-体育彩票一等奖金额| www.752511.com-有什么彩组词| www.900501.com-陕西百宝彩票网| www.986575.com-4码彩票-| www.15if.com-腾讯时时彩彩开奖| www.911174.com-福彩三d的运算方法| www.916035.com-怎样开福彩投注站| www.183434.com-青海快三综合走势图| www.na84.com-中国福彩快三新规| www.541207.cc-天下彩票159| www.726393.com-彩运网-| 500彩票网www.611036.com| www.6578.in-下载彩民堂-| www.636117.com-彩虹真美阅读及答案| www.ry18.com-快三杀号超准方法| www.52290.com-幸运中彩票安卓版| www.870684.com-彩票印象客服| www.953586.com-胜负彩直播比分直播| 彩票驿站www.621361.com| www.42966.com-快三走势软件下载| www.952254.com-世界三大博彩| www.co86.com-168彩票-| www.55rn.com-山西体育彩票中心| www.5456.win-快三大小倍投必死| www.445239.com-河南彩票78人| www.538690.com-威尼斯国际时时彩| www.623811.com-足彩14场app| www.899116.com-足彩十四场规则| www.961431.com-湖北福彩3d日报| www.cai2955.com安徽快三是骗局吗| www.347350.com-天天竞彩安卓版| www.494518.com-百姓彩坛香港最快| www.071286.com-人人中彩票跑路了| www.590956.com-彩809首页-| www.667382.com-免费彩票计划网站| www.742006.com-好运彩网站-| www.807397.com-老师带单买彩票| www.873837.com-3d彩票玩法介绍| www.933862.com-彩票和赌博的区别| www.989653.com-国民彩票安不安全| www.ax95.com-七乐彩几个号算中奖| www.rs11.com-玩彩票赔了怎么办| www.03ve.com-山东体彩顶呱刮活动| www.67ft.com-333彩网平台| www.8112.in-巨弘国际彩票靠谱吗| www.89336.cc-2019买彩票平台| www.g10.shop-海南四码彩票賠率| www.88320.com-春天彩票是什么| www.026374.com-怎样开一个私彩平台| www.0960.cc-高频彩直播开奖网| www.8710.in-六六顺官网彩票平台| www.8167.org-顶级会员彩票登陆| www.185646.com-福彩理念-| www.905737.com-新浪竞彩足球直播| www.66203.com-乐彩vip无法提现| www.057663.com-福彩3d资料-| www.0942.cc-怎样玩转内蒙古福彩| www.43yj.com-新浪中国竞彩对阵表| www.2173.shop-一张彩票的利润| www.02355.cc-私营彩票犯法吗| www.1219.in-网易的人人红彩票| www.9184.com-七星彩万字号奖图| www.481455.com-彩经网过滤-| www.p36.bid-体育彩票几个数字| www.273859.com-希望手游三分快三| www.277316.com-七星彩去哪才能买| www.339362.com-澳门博彩網址| www.75585.cc-多赢彩票下载安装| www.581116.com-宝哥胜负彩推荐| www.83468.com-福彩三三地走势图| www.600346.com-彩票可以多期投注吗| www.702127.com-爱彩乐平台正规吗| www.769743.com-福彩兼营店是真的吗| www.856574.com-怎么买彩票技巧| www.924618.com-快三专家杀号定胆| www.974262.com-彩票和值是什么| 大玩家彩票www.84499e.com| www.dn35.com-能玩河北快三的软件| www.ph11.com-彩票筛选工具| www.275652.com-休彩-| www.377734.com-腾讯时时彩官网下载| www.508517.com-福利彩票几点停购| www.577757.com-帮我查一下福利彩票| www.22334.com-e彩堂邀请码| www.95892.com-足彩要多少钱| www.28962.cc-彩票11选5分析器| www.34826.com-辽宁福彩3d和值| www.180932.com-今日中彩-| www.45599.com-微彩特区七星论坛| www.140110.com-779彩票靠谱吗| www.16795.cc-瑞彩祥云幸运快3群| www.266440.com-河北省福利彩票| www.58863.com-信彩下载-| www.012466.com-彩经网河北快三开奖| www.123452.com-今彩539-| www.200680.com-昨晚彩票中奖号码| www.270239.com-天津时时彩开奖网址|