jQuery云服務(wù)器網(wǎng)站導(dǎo)航圖片布局代碼

jQuery基于SuperSlide.js制作通用的云服務(wù)器托管網(wǎng)站頂部導(dǎo)航下拉的寬屏菜單，banner圖片輪播，促銷(xiāo)推薦模塊列表，頁(yè)面滾動(dòng)頂部始終固定導(dǎo)航，結(jié)合的網(wǎng)站頂部樣式布局代碼。

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/font-awesome.min.css" /><!--圖標(biāo)庫(kù)-->

<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">登錄/注冊(cè)</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>優(yōu)惠促銷(xiāo)</a>
						</li>
						<li>
							<a href="#">會(huì)員中心</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"> 簡(jiǎn)體中文
				<b class="caret"></b>
			</span>
									<ul class="dropdown-menu language-select" style="display: none;">
										<b class="caret caret1"></b>
										<li>
											<a href="#">簡(jiǎn)體中文</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>產(chǎn)品中心</a>
							</li>
							<li class="item" _h_nav="plan">
								<a>解決方案</a>
							</li>
							<li class="item" _h_nav="support">
								<a>服務(wù)支持</a>
							</li>
							<li class="item" _h_nav="cooperation">
								<a>合作共贏</a>
							</li>
							<li class="item" _h_nav="culture">
								<a>企業(yè)文化</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;">云虛擬主機(jī)</dt>
							<dd>
								<a href="#">新云主機(jī)</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">新云主機(jī)獨(dú)享版</a>
							</dd>
							<dd>
								<a href="#">企業(yè)主機(jī)</a>
							</dd>
							<dd>
								<a href="#">PHP云主機(jī)</a>
							</dd>
						</dl>
						<dl style=" width: 18%;">
							<dt style="font-size:15px;">云計(jì)算服務(wù)</dt>
							<div class="col-xs-6 p-l-0 p-r-0">
								<dd>
									<a href="#" title="云服務(wù)器">云服務(wù)器<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公網(wǎng)">BGP公網(wǎng)</a>
								</dd>
							</div>
							<div class="col-xs-6 p-r-0" style="padding-left: 15px;">
								<dd>
									<a href="#" title="云硬盤(pán)">云硬盤(pán)</a>
								</dd>
								<dd>
									<a href="#" title="私有網(wǎng)絡(luò)" class="cloudrouter">私有網(wǎng)絡(luò)</a>
								</dd>
								<dd>
									<a href="#" title="高防IP">高防IP</a>
								</dd>
							</div>
							<div class="clearfix"></div>

						</dl>

						<dl>
							<dt style="font-size:15px;">服務(wù)器租用</dt>
							<dd>
								<a href="#">香港服務(wù)器</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">韓國(guó)服務(wù)器</a>
							</dd>
							<dd>
								<a href="#">美國(guó)服務(wù)器</a>
							</dd>
						</dl>
						<dl>
							<dt style="font-size:15px;">高防服務(wù)器</dt>
							<dd>
								<a href="#" title="香港高防服務(wù)器租用">香港高防服務(wù)器</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#" title="美國(guó)高防服務(wù)器租用">美國(guó)高防服務(wù)器</a>
							</dd>
						</dl>
						<dl>
							<dt style="font-size:15px;">專(zhuān)業(yè)方案</dt>
							<dd>
								<a href="#">服務(wù)器托管</a><span class="hot">hot</span></dd>
							<dd>
								<a href="#">機(jī)柜租用</a>
							</dd>
							<dd>
								<a href="#">IP Tranist</a>
							</dd>
						</dl>
						<dl style="margin-left: -0px;">
							<dt style="font-size:15px;">域名注冊(cè)</dt>
							<dd>
								<a href="#">域名注冊(cè)</a>
							</dd>
							<dd>
								<a href="#"> 域名轉(zhuǎn)入</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安全證書(shū)</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">企業(yè)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;">系統(tǒng)維護(hù)</dt>
					<dd>
						<a href="#">系統(tǒng)維護(hù)</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財(cái)務(wù)系統(tǒng)</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;">數(shù)據(jù)中心</dt>
					<dd>
						<a href="#">數(shù)據(jù)中心</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="#">推廣聯(lián)盟</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="#">發(fā)展歷程</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">招賢納士</a>
					</dd>
				</dl>
				<dl>
					<dd>
						<a href="#">聯(lián)系我們</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">
										機(jī)柜租用<br><span>香港SDC數(shù)據(jù)中心</span>
									</p>
									<ul class="banner-slogan">
										<li>T3+ 級(jí)容災(zāi)環(huán)境，高達(dá)60G BGP+CN2帶寬接入</li>
										<li>7*24小時(shí)技術(shù)支援，歡迎機(jī)位、電源、帶寬定制配搭</li>
									</ul>

									<div class="free-use-btn btn-white" style="margin-top:15px;">立即選購(gòu)
									</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>

		<!-- 下面是前/后按鈕代碼，如果不需要?jiǎng)h除即可 -->
		<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">專(zhuān)享</div></span>
						</li>
						<li>注冊(cè)送660元現(xiàn)金券</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">香港服務(wù)器<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">云服務(wù)器<b></b> </span><span></span>
						</li>
						<li>卓越OpenStack?架構(gòu) </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>推介賺現(xiàn)金 </span> <span><div class="new-mj">財(cái)富</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>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

0 17867 64

軟件 Dreamweaver
格式 HTML
作者迷茫
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書(shū)面授權(quán)，請(qǐng)勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識(shí)產(chǎn)權(quán)，如知識(shí)產(chǎn)權(quán)權(quán)利人認(rèn)為平臺(tái)內(nèi)容涉嫌侵權(quán)，可通過(guò)郵件：3264130392@qq.com提出書(shū)面通知，我們將及時(shí)處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國(guó)旗、國(guó)徽、黨徽...），目的在于配合國(guó)家政策宣傳，僅限個(gè)人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。