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.137028.com-滨州福彩-| www.340640.com-竞彩高手谈心得| www.445635.com-开彩网程序-| www.540139.com-时时彩不倍投方案| www.4624.vip-体彩大乐透三等奖| www.567822.cc-创富彩票是合法的吗| www.14007.com-中国足球客彩网| www.072708.com-大乐彩注册-| www.529305.com-中国足彩网竞彩比分| www.351228.com-加盟体育彩票赚钱吗| www.059813.com-吉林福彩中心官网| www.808267.com-赢彩彩票不能买| www.993596.com-足彩怎么兑奖规则| www.319936.com-陕西派彩代理电话| www.314965.com-腾讯分分彩后4玩法| www.147944.com-体彩排列3预测| www.667533.com-彩球滑梯类似游戏| www.5496.cm-彩票投注站微信| www.474148.com-整点抢红包的彩票| www.638911.com-如何购买彩票| www.713607.com-王者彩票苹果手机| www.792530.com-一注彩票提成多少| www.868049.com-南国体彩论坛4十1| www.957478.com-265彩票下载| 大众彩票www.712887.com| www.015767.com-免费够力七星彩奖表| www.112844.com-鸿乐彩票下载| www.184559.com-湖北快三出号统计图| www.062986.com-体彩福彩加盟条件| www.220433.com-上海快三查询结果| www.877201.com-113彩票安卓版| www.970722.com-中国的福利彩票| www.oe0.com-好彩36选3奖金| www.191730.com-北京快三跨走势图| www.271597.com-快三012路-| www.846108.com-买彩票亏了几百万| www.678779.com-彩票精准计划网| www.959921.com-顺丰彩票是正规吗| www.089212.com-快中彩开奖记录| www.629281.com-咨询彩票-| www.245067.com-11选5彩票软件| www.686673.com-免费彩票助手| www.853448.com-浙江体彩飞鱼开奖| www.949701.com-新一首页彩票走势网| 乐彩网www.869809.com| www.740338.com-福彩天下是正规的吗| www.00044.com-晋州彩色包装印刷| www.904133.com-星光彩票下载| www.5vs.com-谁中过彩票大奖| www.84zn.com-打鱼游戏平台送彩金| www.7598.cm-甘肃快三彩票网上买| www.761776.com-竞彩足球购彩软件| www.838712.com-极速60秒彩票| www.950939.com-捷报网足彩分析预测| 福彩www.86267o.com| www.kb01.com-体彩11选5是赌博| www.k56.top-好彩0567com| www.033781.com-体彩排列三独胆杀号| www.422282.com-视频彩铃下载| www.531908.com-奔驰彩票是什么平台| www.596673.com-体彩出的什么中奖号| www.669632.com-海南七星彩网投| www.2223.vip-七星彩票安全吗| www.722444.com-福彩九宫八卦图| www.492242.com-临夏福利彩票转让| www.666646.cc-彩票书哪个最好用| 彩天下www.c5615.com| www.vd04.com-体彩481对子技巧| www.50nv.com-开彩票站挣钱吗| www.70gg.com-红菜苔彩票客服| www.4650.cm-中彩票只是运气好吗| www.2739.me-足球彩票系统升级| www.6965.xyz-快开彩定位胆| www.to07.com-今天的江苏快三| www.06774.com-广西彩票11选5| www.620094.com-大数据计算彩票| www.773680.com-乐透福彩3d软件| www.033202.com-七乐彩走势图表新浪| www.qv12.com-对子玩法快三| www.17qx.com-正规的体彩实体店| www.371189.com-澳客彩票手机客户端| www.486185.com-彩票人工计划靠谱不| www.565016.com-天客彩票-| www.637209.com-彩虹6号在哪里下载| www.718272.com-2017彩库宝典| www.155724.com-重庆肘时彩开奖直播| www.237300.cc-彩票倍投有成功的吗| www.308406.com-万彩吧高手计划| www.329752.com-腾讯体育彩票下载| www.438989.com-营业中体彩店转让| www.497008.com-彩票13app-| www.87sl.com-三度博彩论坛网址| www.63763.com-足彩圈app下载| www.272076.com-上期七星彩开奖号码| www.350334.com-十堰市体彩中心| www.436155.com-中国投彩网-| www.520562.com-探探上全是彩票托| www.659636.com-乐彩网吧-| www.720084.com-锋彩直播手机版官网| www.788332.com-足彩19039分析| www.876625.cc-环球彩票平台| www.968040.com-福彩14人涉贪| www.j41.com-深圳体彩中心| www.61gz.com-36o彩票开奖公告| www.s88.top-大家乐彩票机技巧| www.l15.org-福彩排列七开奘结果| www.63nj.com-今天排列三3d彩涂| www.0684.cc-怎么样申请彩票站| www.32139.cc-好彩门户开奖现场| www.846353.com-龙山彩票站-| www.133123.cc-足球彩票店-| www.231155.com-苹果手机彩票app| www.313965.com-3d天天彩就业报| www.83aw.com-移动彩云怎么注销| www.27338.cc-彩是什么数字组成的| www.gg11.cc-500万彩下载| www.397620.com-彩票牛彩网迷图3d| www.571532.com-好运彩票网黑平台| www.679250.com-彩至尊app-| www.785035.com-中彩票的几率有多大| www.597843.com-竞彩14场任九投注| www.791888.cc-竞彩8串28错1场| www.951534.com-红彩网软件-| www.cp860.cc-教你百盈快三怎么玩| www.4189.biz-七彩艺术集团| www.40528.com-希腊分彩下载| www.760422.com-神彩网3d免费预测| www.821652.com-出兑福利彩票站| www.877124.com-分分彩倍投方法| www.948022.com-体育彩票篮球竞彩网| www.985481.com-足彩竞彩比分直播| www.mq97.com-彩票的规律怎么算| www.j12.cc-制作中彩网网站| www.28ge.com-海南私彩大奖软件| www.98nx.com-竞彩足球合买靠谱吗| www.3124.vip-彩票选号走势图| www.258701.com-唯彩竞彩网-| www.315654.com-彩虹六号手机版战队| www.155532.com-66微彩正规吗| www.414243.com-彩票开奖号能算| www.539486.com-大连彩票站转让| www.596303.com-福彩通选-| www.655322.com-手机投彩是什么| www.aw17.com-恐龙快三-| www.365798.cc-福彩3d电视直播| www.102947.com-口袋彩店-| www.607732.com-首尔在哪儿买彩票| www.358966.com-体彩怎样买-| www.693469.com-七天彩掌上购彩| www.47122.com-东北结婚彩礼多少钱| www.015744.com-彩神软件骗局揭秘| www.065481.com-彩虹宝宝第一季| www.950290.com-福彩3d杀又飞| www.cp519.com-快三开奖走试图| www.643325.com-彩彯开奖查询| www.331661.com-体彩排列五中三个号| www.391717.com-uu直播购彩-| www.339423.com-彩票支票取钱流程| www.813242.com-彩友吧朋友们的家| www.905806.com-幸运彩票手机版官网| www.981254.com-两元彩票网在线缩水| www.pv73.com-彩1平台-| www.21da.com-彩久极速pk10| www.496705.com-小米8彩蛋-|