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.509699.com-运盈彩票平台| www.659542.com-彩票群微信号| www.811892.com-新昌双彩乡村庄合并| www.902510.com-pk彩吧下载-| www.975073.com-海南七星彩怎么玩法| www.cj97.com-安徽福彩网查询| www.xc18.cc-七星彩冷热号| www.26cr.com-福彩3d微信群讨论| www.0572.cn-福彩老头老头推荐| www.8254.cm-彩票的骗局有哪些| www.38528.com-云发购彩票网址多少| www.92327.cc-金利彩票是真的吗| www.072739.com-彩779-| www.155551.cc-3d彩票怎么玩法| www.302945.com-977彩票客户端| www.387068.com-七彩开什么奖七星彩| www.534359.com-够力彩票规律表| www.631126.com-玩网上彩票的技巧| www.715321.com-彩票店国家允许吗| www.798571.com-体彩投注站查询| www.882541.com-三分彩人工在线计划| www.wu.com-重庆快三是真的假的| www.qz63.com-快三把我害惨了| www.15sx.com-彩虹3无人机| www.396.red-苹果手机炫彩灯光| www.5090.me-时时彩单调公式| www.12272.com-山东彩票-| www.62377.cc-全民福彩是腾讯的吗| www.062861.com-网上还不能买彩票吗| www.160907.com-五分快三是赌博吗| www.260468.com-买彩票算赌吗| www.344300.com-重庆时时彩长龙买法| www.441176.com-足球竞彩qq群| www.545070.com-福彩丹东全图图库| www.670585.com-彩票起名字-| www.757260.com-今日中彩托尔| www.864756.com-798彩票开奖记录| www.941181.com-竞彩单场开奖| 丰彩娱乐www.fcyl7.com| www.dy49.com-重庆福利彩票| www.xr79.com-福利彩票35期开奖| www.27ez.com-体彩排3综合走势图| www.1213.wang-彩票最大数字是什么| www.8431.cc-乐彩网是骗人的吗| www.45666.com-拉萨福彩快3图分析| www.96289.cc-胜负彩机选中奖| www.068182.com-自制彩票app| www.142317.com-淘彩票网的骗局揭秘| www.226895.com-快三助赢软件手机版| www.312290.com-大奖网触屏网彩票| www.390779.com-平安买彩票的软件| www.580555.com-特区七星彩票网| www.659443.com-利彩注册-| www.763811.com-彩神预测骗局| www.845600.com-什么是竞猜型彩票| www.909513.com-江苏体彩排五开奖表| www.975459.com-彩票购买推荐| www.gi46.com-快三怎么看-| www.zq65.com-3d彩报图今天的| www.34jk.com-南京众彩物流| www.0853.vip-长期宝彩票-| www.7799.cm-足彩心得教训| www.29268.com-下载彩票365| www.73736.cc-竞彩猫怎么收费| www.027948.com-重庆高中生买彩票| www.108707.com-敬力七星彩开奖| www.181883.com-官方彩app-| www.256008.com-快三奖结果查询河北| www.333420.com-体育彩票数字组合| www.413191.com-彩球的设计-| www.528582.com-管家婆彩图库图库| www.712749.com-网络竞彩平台| www.793174.com-玩彩算赌博吗| www.875848.com-重庆时彩小窍门| www.974210.com-好运来彩票网骗局| www.cp6177.com-快三里面的屠龙技巧| www.of74.com-福彩开奖七乐彩| www.78.cc-彩票软件567苹果| www.74ap.com-开黑彩店赚钱技巧| www.1345.pw-澳门彩票公司百科| www.9589.cn-福彩3d超级冷号| www.52955.cc-篮球胜负竞彩玩法| www.99326.cc-时时彩安卓版下载| www.068138.com-国外彩票网站出租| www.137744.com-排列三预测新彩网| www.215002.com-全民快三彩票| www.287172.com-安徽体彩中奖规则| www.519821.com-福彩3d高概率杀号| www.590733.com-竞彩足球半全场推荐| www.666428.com-乐彩站app官网| www.739993.com-玩牛彩犯法吗| www.816206.com-湖北快三统计号| www.886884.com-卖彩票算赌博吗| 六福彩票www.66ffy.com| www.cw99.cc-网易彩票平台可靠吗| www.vc74.com-河南体彩481技巧| www.11ff.cc-933时时彩票| www.82bz.com-足彩500网-| www.1862.vip-明天可能中的彩票号| www.12335.cc-彩票时时彩开奖96| www.55328.com-怎样做盘搞时时彩| www.99091.com-极速时时彩怎么看号| www.061859.com-彩票带单老师的秘密| www.175776.com-快三规律破解软件| www.265678.com-网易足彩专家推荐| www.353692.com-彩票直播app| www.434351.com-彩票销售方法| www.526645.com-建立彩票网站违法吗| www.631969.com-七星彩杀头定胆| www.699854.com-广西快三80期| www.773950.com-重庆十字彩下载| www.877082.com-福彩三地黑圣手| www.948711.com-体彩p3和值表| www.998818.cc-天津快三走势图解| www.bt3.cc-长城彩票骗局| www.ni82.com-全天实时彩计划| www.3pa.com-京彩app7515| www.58vn.com-到体育彩票店上班| www.0110.xyz-境外彩票平台名字| www.7983.biz-nba博彩规则| www.25322.com-彩铅画兰花图片大全| www.66719.cc-今天双色球彩票指南| www.038386.com-彩票首存收集网| www.121530.com-快三豹子秘诀| www.192567.com-江苏快三精准预测| www.261600.com-盛世彩票登录| www.365265.cc-购彩助手软件彩6| www.449620.com-网上不可以买彩票吗| www.541668.com-彩8彩票客服电话| www.644390.com-彩九吧-| www.725908.com-时时彩是人为控制和| www.793032.com-怎么举报网上彩票| www.865238.com-女生说玩彩什么意思| www.926949.com-达人彩票靠谱么| www.980323.com-体彩河南游泳| www.jg36.com-北京快三一定牛遗漏| www.zm05.com-大发快3彩票骗局| www.20gy.com-19035足彩-| www.361.cn-55彩票网站-| www.3653.cc-大唐彩票好吗| www.8732.wang-多彩网字谜-| www.50800.com-乐发彩票是不是正规| www.95877.cc-福彩现主任是谁| www.051400.com-福彩3d金码| www.144455.com-728彩票登陆| www.226756.com-创彩网安全吗| www.294092.com-上海福彩网官网网页| www.358211.com-天才彩票网址| www.436182.com-5808万体彩-| www.523229.com-博彩app破解| www.691967.com-买彩票安卓下载| www.762140.com-篮彩分析app| www.858041.com-体彩有快乐十分钟| www.916488.com-致富彩票合法吗| www.972184.com-彩票最快开奖网址| www.cp6022.com-牛彩网3d字谜总汇| www.km24.com-江苏体彩七位数多期| www.zy32.com-上海体彩兑奖中心| www.18pz.com-当天所有彩票开奖| www.566.vip-微信代购彩票违法吗| www.3889.in-彩票图纸3d-| www.8669.com-历史福彩开奖| www.49912.com-手机能买足彩吗| www.87295.com-五星乐彩app|