jQuery網(wǎng)絡(luò)科技公司網(wǎng)站頭部設(shè)計代碼

jQuery制作橙色大氣的網(wǎng)絡(luò)科技公司網(wǎng)站頭部布局，寬屏的下拉導(dǎo)航菜單圖標，大屏的banner輪播圖片，頁面滾動導(dǎo)航固定在頂部效果代碼。ps：代碼內(nèi)有清晰的注釋，每個部位都有注釋說明。

使用方法：

1、head引入css文件

<!--主要樣式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

<!--動畫庫-->
<link rel="stylesheet" type="text/css" href="statics/css/anim.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js"></script>
<script src="statics/js/jquery.SuperSlide.2.1.1.js"></script>
<script src="statics/js/jquery.ckSlide.js"></script>
<script src="statics/js/waypoints.min.js"></script>

3、body引入HTML代碼

<div class="holer"></div>
<div id="headdiv">
	<div class="top01">
		<div class="gy2">
			<span class="l">歡迎您光臨深圳市網(wǎng)絡(luò)科技有限公司！</span>
			<div class="top01_center">
				<img src="statics/images/top_tel_icon.png" width="18" height="18"> 全國熱線：xxxx-xxxx 深圳：0755-xxxxxxxxx
			</div>
		</div>
	</div>
	<div class="top02">
		<div class="top02_center">
			<div class="logo">
				<a href="#"><img src="statics/images/logo.png" width="180" height="60"></a>
				<div>
					<div class="logo-year">10年</div>
					<div class="logo-text">專注網(wǎng)站建設(shè)行業(yè)優(yōu)質(zhì)供應(yīng)商</div>
				</div>
			</div>
			<!-- 導(dǎo)航 -->
			<div class="nav">
				<ul>
					<li id="m1" class="m on">
						<a href="#" class="aa1 mmm" id="sel">首頁</a>
					</li>
					<li id="m3" class="m">
						<a href="#" class="aa3 mmm">網(wǎng)站建設(shè)</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_one">
									<ul>
										<li>
											<a href="#"><i class="bgs1"></i>企業(yè)營銷型網(wǎng)站建設(shè)</a>
										</li>
										<li>
											<a href="#"><i class="bgs2"></i>創(chuàng)意品牌型網(wǎng)站建設(shè)</a>
										</li>
										<li>
											<a href="#"><i class="bgs3"></i>購物商城型網(wǎng)站建設(shè)</a>
										</li>
										<li>
											<a href="#"><i class="bgs4"></i>手機微信網(wǎng)站建設(shè)</a>
										</li>

									</ul>

								</div>
							</div>
						</div>
					</li>
					<li id="m6" class="m">
						<a href="#" class="aa6 mmm">產(chǎn)品服務(wù)</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_six">
									<ul>
										<li class="bgs1">
											<div class="xiao_six_con">
												<h2 class="xiao_six_l">網(wǎng)站建設(shè)</h2>
												<a href="#">- 企業(yè)營銷</a>
												<a href="#">- 響應(yīng)式網(wǎng)站</a>
												<a href="#">- 創(chuàng)意品牌</a>
												<a href="#">- 營銷型網(wǎng)站建設(shè)</a>
												<a href="#">- 購物商城</a>
												<a href="#">- 網(wǎng)站改版</a>
												<a href="#">- 手機微信</a>
												<a href="#" class="a bgs1">建站免費報價</a>
											</div>
										</li>
										<li class="bgs2">
											<div class="xiao_six_con">
												<h2 class="xiao_six_l">移動業(yè)務(wù)</h2>
												<a href="#">- 手機網(wǎng)站</a>
												<a href="#">- O2O電商</a>
												<a href="#">- 微信商城</a>
												<a href="#">- 小程序</a>
												<a href="#">- 微信分銷</a>
												<a href="#" class="a bgs2">手機網(wǎng)站設(shè)計</a>
											</div>
										</li>
										<li class="bgs3">
											<div class="xiao_six_con">
												<h2 class="xiao_six_l">基礎(chǔ)業(yè)務(wù)</h2>
												<a href="#">- 域名注冊</a>
												<a href="#">- 虛擬主機</a>
												<a href="#">- 企業(yè)郵箱</a>
												<a href="#" class="a bgs3">在線咨詢</a>
											</div>
										</li>
									</ul>
								</div>

							</div>
						</div>
					</li>
					<li id="m4" class="m">
						<a href="#" class="aa4 mmm">成功案例</a>
						<div class="sub">
							<div class="nav_xiao max1100">
								<div class="xiao_five">
									<img src="statics/images/cr_img1.png">
								</div>
								<div class="xiao_five2">
									<p>
										<a href="#"><i class="bgs1"></i>- 企業(yè)營銷</a>
										<a href="#"><i class="bgs2"></i>- 移動應(yīng)用</a>
									</p>
									<p>
										<a href="#"><i class="bgs3"></i>- 購物商城</a>
										<a href="#"><i class="bgs4"></i>- 外貿(mào)網(wǎng)站</a>
									</p>
									<p>
										<a href="#"><i class="bgs5"></i>- 行業(yè)門戶</a>
										<a href="#"><i class="bgs6"></i>- 創(chuàng)意品牌</a>
									</p>
								</div>
							</div>
						</div>
					</li>
					<li id="m8" class="m">
						<a href="#" class="aa8 mmm">解決方案</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_four l">
									<h2>解決方案</h2>
									<ul class="ul">
										<li>
											<a href="#"><i class="bgs1"></i><b>企業(yè)網(wǎng)站建設(shè)解決方案</b>更貼身、易落地、高性價比</a>
										</li>
										<li>
											<a href="#"><i class="bgs2"></i><b>營銷型網(wǎng)站建設(shè)解決方案</b>可精準流量統(tǒng)計與效果分析</a>
										</li>
										<li>
											<a href="#"><i class="bgs3"></i><b>行業(yè)門戶網(wǎng)站建設(shè)解決方案</b>能及時、準確、動態(tài)地更新</a>
										</li>
										<li>
											<a href="#"><i class="bgs4"></i><b>外貿(mào)網(wǎng)站解建設(shè)決方案</b>視覺、功能系統(tǒng)，展示產(chǎn)品</a>
										</li>
										<li>
											<a href="#"><i class="bgs5"></i><b>品牌形象網(wǎng)站建設(shè)解決方案</b>操作方便、結(jié)構(gòu)先進的優(yōu)點</a>
										</li>
										<li>
											<a href="#"><i class="bgs6"></i><b>購物商城網(wǎng)站建設(shè)解決方案</b>方便快捷購物車、購物指南</a>
										</li>
										<li>
											<a href="#"><i class="bgs7"></i><b>政府網(wǎng)站建設(shè)解決方案</b>可輕松定制風格各異、頻道</a>
										</li>
										<li>
											<a href="#"><i class="bgs8"></i><b>手機網(wǎng)站建設(shè)解決方案</b>可隱藏、訪問限制、可管理</a>
										</li>
									</ul>
								</div>
								<div class="xiao_four r">
									<div class="ul2">
										<h2>我們的產(chǎn)品</h2>
										<ul>
											<li>
												<a href="#"><b>企業(yè)營銷型網(wǎng)站建設(shè)</b>注重網(wǎng)站優(yōu)化SEO結(jié)構(gòu)</a>
											</li>
											<li>
												<a href="#"><b>微信電商<i></i></b>便捷、高效、開放、一站式管理</a>
											</li>
											<li>
												<a href="#"><b>購物商城型網(wǎng)站建設(shè)<i></i></b>量身定制,以銷售產(chǎn)品為目標</a>
											</li>
											<li>
												<a href="#"><b>微信分銷</b>分銷分傭，更廣闊的業(yè)務(wù)前景</a>
											</li>
											<li>
												<a href="#"><b>創(chuàng)意品牌型網(wǎng)站建設(shè)</b>適合注重美工形象的客戶</a>
											</li>
											<li>
												<a href="#"><b>B2B2C電商</b>經(jīng)營模式支撐，招商、全支持</a>
											</li>
											<li>
												<a href="#"><b>手機微信網(wǎng)站建設(shè)</b>隨時、隨地、隨身訪問的優(yōu)勢</a>
											</li>
											<li>
												<a href="#"><b>O2O電商</b>全方位流量平臺支持</a>
											</li>
										</ul>
									</div>
								</div>
							</div>

						</div>
					</li>
					<li id="m5" class="m">
						<a href="#" class="aa5 mmm">新聞動態(tài)</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li>
											<a href="#"><img src="statics/images/nav_news.jpg">最新簽約</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news5.jpg">公司新聞</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news2.jpg">網(wǎng)站優(yōu)化</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news3.jpg">建站知識</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news4.jpg">行業(yè)資訊</a>
										</li>

									</ul>
								</div>

							</div>
						</div>
					</li>
					<li id="m2" class="m">
						<a href="#" class="aa2 mmm">關(guān)于我們</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_two">
									<ul>
										<li>
											<a href="#"><i class="bgs1"></i>公司介紹</a>
										</li>
										<li>
											<a href="#"><i class="bgs2"></i>匯款方式</a>
										</li>
										<li>
											<a href="#"><i class="bgs3"></i>公司團隊</a>
										</li>
										<li>
											<a href="#"><i class="bgs4"></i>發(fā)展歷程</a>
										</li>
									</ul>

								</div>

							</div>
						</div>
					</li>

					<li id="m7" class="m">
						<a href="#" class="aa7 mmm">聯(lián)系我們</a>
					</li>
				</ul>

			</div>
			<!-- 導(dǎo)航 end -->
		</div>
	</div>
</div>

<!--slider-->
<div class="fuSlide ck-slide imgs rel">
	<ul class="ck-slide-wrapper">
		<li class="li6" style="background-image: url(statics/images/banner.jpg); "> <img src="statics/images/banner.jpg" style="display:none;" class="img">
			<div class="banner_con">
				<div class="f48 banner1_one leftto">
					<h2 class="f90">十年高端網(wǎng)站設(shè)計經(jīng)驗</h2>網(wǎng)絡(luò) . 您身邊的網(wǎng)站建設(shè)專家
				</div>
				<div class="banner1_two anim-1">
					<span class="f30">集團客戶<b class="f72">200+</b></span>
					<span class="f30">企業(yè)客戶<b class="f72">5000+</b></span>
				</div>
			</div>
		</li>
		<li class="li5" style="background-image: url(statics/images/banner2.jpg); "> <img src="statics/images/banner2.jpg" class="img">
			<div class="banner_con">
				<div class="gy2">
					<div class="banner2_one">
						<h2 class="f72 anim-1">全網(wǎng)覆蓋 四網(wǎng)合一</h2>
						<p class="f36 anim-2">完美兼容PC、手機、微信、IPad全終端給您良好的瀏覽體驗。</p>
					</div>
				</div>
			</div>
		</li>
		<li class="li1" style="background-image: url(statics/images/banner3.jpg); ">
			<a href="#"><img src="statics/images/banner3.jpg" class="img">
				<div class="banner_con">
					<div class="gy2">
						<div class="banner2_one">
							<h2 class="f72 anim-1">精雕細琢 再鑒真品</h2>
							<p class="f36 anim-2">我們一次又一次的蛻變，只為陪您走的更遠</p>
							<em class="leftto">查看案例</em>
						</div>
					</div>
				</div>
			</a>
		</li>
		<li class="li2 current" style="background-image: url(statics/images/banner4.jpg);"> <img src="statics/images/banner4.jpg" class="img">
			<div class="banner_con">
				<div class="gy2">
					<div class="banner4_one">
						<h2 class="f72 anim-1">10年持續(xù)追求更高品質(zhì)</h2>
						<p class="f30 anim-2">專注于提供高端定制互聯(lián)網(wǎng)應(yīng)用服務(wù)，讓我們的服務(wù)<br>幫助您的品牌更有效率的傳播！ </p>
					</div>
				</div>
			</div>
		</li>
	</ul>
	<div class="index-waper-box">
		<div class="index-back-box digital">
			<div class="sub-arrows bx-controls-direction">
				<i class="icom prev bx-prev ck-prev"></i>
				<i class="icom next bx-next ck-next"></i> </div>
			<div class="sub-mouse">
				<span><img src="statics/images/sub-mouse.png" ></span> </div>

		</div>
	</div>

</div>
<!--slider end-->
<!--優(yōu)勢begin-->
<div class="i_bg">
	<div class="gy2 i_one">
		<div class="i_service_t anim anim-1 anim-show">
			<h2>優(yōu)勢之道·素謂天成</h2>
			<p>用心、用責、 用情、人無我有、人優(yōu)我特；敬天惜福，愛人有度。</p>
		</div>

		<div class="priorities">
			<div class="advantage">

				<div class="num_box anim anim-1 anim-show">

					<div class="num" data-num="10">10</div>

					<h3>10年高端網(wǎng)站設(shè)計經(jīng)驗</h3>

				</div>

				<div class="num_box anim anim-2 anim-show">

					<div class="num" data-num="28">28+</div>

					<h3>28+政府單位的認可</h3>

				</div>

				<div class="num_box anim anim-3 anim-show">

					<div class="num"  data-num="56">56+</div>

					<h3>56+上市公司的選擇</h3>

				</div>

				<div class="num_box anim anim-4 anim-show">

					<div class="num" data-num="800">800+</div>

					<h3>800+品牌客戶的選擇</h3>

				</div>

				<div class="num_box anim anim-5 anim-show">

					<div class="num" data-num="5000">5000+</div>

					<h3>5000+企業(yè)客戶的選擇</h3>

				</div>

			</div>
		</div>
	</div>
</div>
<!--優(yōu)勢end-->

<script src="statics/js/main.js">//主要邏輯代碼</script>

使用聲明

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

查看演示下載資源

0 30000 175

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

版權(quán)聲明

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

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

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