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.119352.com-彩神ⅰv-| www.20ba.com-爱创彩票合法吗| www.8240.biz-福利彩票体彩大乐透| www.350956.com-南方购彩网-| www.915166.com-福彩七乐彩走势| www.cp7660.com-数字彩票破解术| www.41kw.com-彩妆店加盟连锁网| www.031562.com-买彩票算赌博吗| www.9540.in-彩色通道下载| www.090518.com-福彩套利兼职| www.87542.com-彩票为什么输钱| www.337595.com-青海省福彩投诉| www.8588.bid-31竞彩吧安全吗| www.441125.com-体彩大乐透购买方法| www.004583.com-竞彩胆拖彩票图片| www.503535.com-高频彩联盟网址| www.848869.com-19055期足彩| www.973581.com-一定牛河南快三遗漏| www.e35.top-最新的彩票查询结果| www.604496.com-彩票打码量是什么| www.724667.com-彩票和股票哪个害人| www.2928.top-兰州体育彩票| www.033675.com-福彩2元彩-| www.7xl.com-彩票公司员工做什么| www.206151.com-078网络彩票骗局| www.562338.com-快三号码有多少| www.727918.com-易盈彩票官网| 大赢家彩票平台www.165370.com| www.965872.com-彩票最佳对联| www.344514.com-彩票预测公司| www.51076.com-体彩兑奖期限| www.31080.com-体彩官方唯一网站| www.wf66.cc-查一下体彩开奖结果| www.028073.com-星际彩票骗局| www.243336.com-浙江彩票11选五| www.535823.com-彩票和佛-| www.792672.com-在福彩中心工作人员| www.014776.com-7星彩中奖查询结果| www.219954.com-广西快三1定牛| www.365537.cc-水溶彩铅用什么纸| www.568000.com-女孩子玩福彩十选五| www.kp45.com-成都竞彩快三查询| www.283.live-怎样购买七星彩票| www.26258.com-广东十分彩下载| www.020679.com-今天3d彩民乐| www.144711.com-彩票2元网首页官网| www.ja58.com-福州快三开奖| www.30mq.com-四季型人色彩测试| www.73755.com-福彩字谜画谜大全| www.296809.com-今天双彩图-| www.573394.cc-倍数最高的彩票网站| www.712666.cc-宁夏彩票兑奖中心| www.133486.com-好彩彩票是正规的吗| www.317193.com-重庆时时彩的心得| www.948945.com-福利彩票内部数据| 大赢家彩票平台www.210793.com| www.48lz.com-七加一是什么彩票| www.383593.com-福利彩票电视台直播| www.477044.com-亚搏彩票公司| www.587168.com-巨人彩票是诈骗吗| www.691623.com-烟台福彩官网| www.318990.com-时时彩快3一分技巧| www.384422.com-福彩3d胆码图库| www.483986.com-体育彩票周几开奖| www.549656.com-欧冠冠军足彩| www.613992.com-立彩助手追号计划| www.683822.com-乐八彩app-| www.761140.com-体彩足球胜平负规则| www.831103.com-广州彩钢板-| www.893361.com-快开彩官网-| www.958324.com-七星彩预测专家汇总| 金彩网www.jcai0.com| www.963103.com-湖北省体彩兑奖地址| www.tg79.com-福彩快3跨度走势图| www.41sl.com-七星彩要不要按顺序| www.1415.in-重生洪荒之九彩凤凰| www.25234.com-兰花彩铅画教程| www.004048.com-福利彩票3d断组| www.126961.com-福彩6十1开奖公告| www.286994.com-安徽快三正规吗| www.123133.com-酷彩吧买彩票| www.389538.com-六助彩票手机论坛| www.565694.com-时时彩代打骗局贴吧| www.683666.com-505彩票下截| www.867656.com-七星彩头尾永久准确| 聚彩网www.290282.com| www.029932.com-呼市体彩怎么代理| www.535511.com-八位数彩票-| www.721155.com-一号彩票手机客户端| www.812882.com-尼彩手机倒闭了吗| www.897993.com-彩票合买口号| www.963597.com-盘点河南各地彩礼钱| www.fi42.com-最稳一分快三计划| www.06lf.com-南京彩票兑奖中心| www.3355.top-彩色的中国伴奏| www.55908.com-l快三彩票-| www.ks75.com-福彩中奖概率| www.29fu.com-长春彩票中奖去哪领| www.1376.net-九龙彩票安全吗| www.ia90.com-网络彩票平台排行榜| www.562205.com-福彩300秒-| www.222554.com-能买彩票的正规网站| www.759265.com-七乐彩开奖公告结果| www.cai6211.com江西快三开奖走势图| www.61769.com-国外做彩票客服电话| www.914448.com-开奖公告乐彩网| www.474.tv-凤凰彩票2320| www.58926.com-福彩3d个位杀号法| www.608805.com-赌博的派彩是什么啊| www.726613.com-福彩3d奖金-| www.4110.wang-安装七星彩开奖结果| www.215717.com-青海快三平台网址| www.320208.com-今天体彩排三开奖号| www.zr93.com-中国中国竞彩网| www.807559.com-福彩3d守号中奖| www.48222.cc-竞彩足彩彩票下载| www.983496.com-绵阳福彩中心官网| www.uk94.com-内蒙古福彩网站| www.33754.com-彩票巨奖骗局细节| www.4sz.com-武汉开彩票店挣钱吗| www.352654.com-黑彩网址怎么举报| www.165279.com-体育彩票任五走势图| www.5976.com-黑龙江中彩网| www.302626.com-福彩3d和尾表| www.666138.com-爱乐透彩票软件| www.yf74.com-好彩投彩票安全吗| www.799365.cc-彩票打印模板| www.251887.com-江苏快三投柱技巧| www.700097.com-2018彩票弃奖| www.o67.club-中奖彩票不能随便| www.017353.com-福彩上海基本走走势| www.498572.com-彩票有没有破解方法| www.646469.com-奔驰宝马博彩| www.6816.cn-海南七星彩打奖| www.150581.com-彩83官方网站| www.779100.com-印尼分分彩在线计划| www.874391.com-福彩2d多少钱| www.949053.com-大发快三倍投技巧| www.993786.com-体彩胜负彩怎么玩| www.ws0.cc-中国彩票开奖大全| www.uo47.com-黑龙江快三开奖| www.9xl.com-体彩数从几到几| www.60sk.com-网易彩票认账吗| www.08977.com-短信彩票-| www.826885.com-卖彩票提成-| www.932008.com-最新双色球维彩视频| www.yz92.com-五福彩票安卓app| www.162180.com-彩乐汇登录-| www.267637.com-中国体育彩票玩法| www.355599.com-刘军玩彩实战| www.24368.com-星空麋鹿彩铅画教程| www.167215.com-贵州快三一定牛| www.49333.cc-温州彩票店开到几点| www.065234.com-乐迎彩票注册邀请码| www.529312.com-直播间聊彩票| www.43858.com-中彩在线吉林快三| www.092078.com-一分彩平台-| www.299836.com-天天中彩票能不能用| www.628956.com-诚信彩app下载| www.906278.com-开黑彩判刑-| www.371882.com-体彩5d昨天开奖号| www.731544.com-体彩怎么买球| www.901416.com-排列三牛彩l网预测| www.984898.com-有玩彩运8的吗|