QQ客服
當前位置 : 首頁 > 代碼 > 網頁特效 > 導航菜單 > jQuery網絡科技公司網站頭部設計代碼

原創商用 jQuery網絡科技公司網站頭部設計代碼

jQuery制作橙色大氣的網絡科技公司網站頭部布局,寬屏的下拉導航菜單圖標,大屏的banner輪播圖片,頁面滾動導航固定在頂部效果代碼。ps:代碼內有清晰的注釋,每個部位都有注釋說明。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權保護,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

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">歡迎您光臨深圳市網絡科技有限公司!</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">專注網站建設行業優質供應商</div>
				</div>
			</div>
			<!-- 導航 -->
			<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">網站建設</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_one">
									<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>手機微信網站建設</a>
										</li>

									</ul>

								</div>
							</div>
						</div>
					</li>
					<li id="m6" class="m">
						<a href="#" class="aa6 mmm">產品服務</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">網站建設</h2>
												<a href="#">- 企業營銷</a>
												<a href="#">- 響應式網站</a>
												<a href="#">- 創意品牌</a>
												<a href="#">- 營銷型網站建設</a>
												<a href="#">- 購物商城</a>
												<a href="#">- 網站改版</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">移動業務</h2>
												<a href="#">- 手機網站</a>
												<a href="#">- O2O電商</a>
												<a href="#">- 微信商城</a>
												<a href="#">- 小程序</a>
												<a href="#">- 微信分銷</a>
												<a href="#" class="a bgs2">手機網站設計</a>
											</div>
										</li>
										<li class="bgs3">
											<div class="xiao_six_con">
												<h2 class="xiao_six_l">基礎業務</h2>
												<a href="#">- 域名注冊</a>
												<a href="#">- 虛擬主機</a>
												<a href="#">- 企業郵箱</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>- 企業營銷</a>
										<a href="#"><i class="bgs2"></i>- 移動應用</a>
									</p>
									<p>
										<a href="#"><i class="bgs3"></i>- 購物商城</a>
										<a href="#"><i class="bgs4"></i>- 外貿網站</a>
									</p>
									<p>
										<a href="#"><i class="bgs5"></i>- 行業門戶</a>
										<a href="#"><i class="bgs6"></i>- 創意品牌</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>企業網站建設解決方案</b>更貼身、易落地、高性價比</a>
										</li>
										<li>
											<a href="#"><i class="bgs2"></i><b>營銷型網站建設解決方案</b>可精準流量統計與效果分析</a>
										</li>
										<li>
											<a href="#"><i class="bgs3"></i><b>行業門戶網站建設解決方案</b>能及時、準確、動態地更新</a>
										</li>
										<li>
											<a href="#"><i class="bgs4"></i><b>外貿網站解建設決方案</b>視覺、功能系統,展示產品</a>
										</li>
										<li>
											<a href="#"><i class="bgs5"></i><b>品牌形象網站建設解決方案</b>操作方便、結構先進的優點</a>
										</li>
										<li>
											<a href="#"><i class="bgs6"></i><b>購物商城網站建設解決方案</b>方便快捷購物車、購物指南</a>
										</li>
										<li>
											<a href="#"><i class="bgs7"></i><b>政府網站建設解決方案</b>可輕松定制風格各異、頻道</a>
										</li>
										<li>
											<a href="#"><i class="bgs8"></i><b>手機網站建設解決方案</b>可隱藏、訪問限制、可管理</a>
										</li>
									</ul>
								</div>
								<div class="xiao_four r">
									<div class="ul2">
										<h2>我們的產品</h2>
										<ul>
											<li>
												<a href="#"><b>企業營銷型網站建設</b>注重網站優化SEO結構</a>
											</li>
											<li>
												<a href="#"><b>微信電商<i></i></b>便捷、高效、開放、一站式管理</a>
											</li>
											<li>
												<a href="#"><b>購物商城型網站建設<i></i></b>量身定制,以銷售產品為目標</a>
											</li>
											<li>
												<a href="#"><b>微信分銷</b>分銷分傭,更廣闊的業務前景</a>
											</li>
											<li>
												<a href="#"><b>創意品牌型網站建設</b>適合注重美工形象的客戶</a>
											</li>
											<li>
												<a href="#"><b>B2B2C電商</b>經營模式支撐,招商、全支持</a>
											</li>
											<li>
												<a href="#"><b>手機微信網站建設</b>隨時、隨地、隨身訪問的優勢</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">新聞動態</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">網站優化</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news3.jpg">建站知識</a>
										</li>
										<li>
											<a href="#"><img src="statics/images/nav_news4.jpg">行業資訊</a>
										</li>

									</ul>
								</div>

							</div>
						</div>
					</li>
					<li id="m2" class="m">
						<a href="#" class="aa2 mmm">關于我們</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>發展歷程</a>
										</li>
									</ul>

								</div>

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

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

			</div>
			<!-- 導航 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">十年高端網站設計經驗</h2>網絡 . 您身邊的網站建設專家
				</div>
				<div class="banner1_two anim-1">
					<span class="f30">集團客戶<b class="f72">200+</b></span>
					<span class="f30">企業客戶<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">全網覆蓋 四網合一</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年持續追求更高品質</h2>
						<p class="f30 anim-2">專注于提供高端定制互聯網應用服務,讓我們的服務<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-->
<!--優勢begin-->
<div class="i_bg">
	<div class="gy2 i_one">
		<div class="i_service_t anim anim-1 anim-show">
			<h2>優勢之道·素謂天成</h2>
			<p>用心、用責、 用情、人無我有、人優我特;敬天惜福,愛人有度。</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年高端網站設計經驗</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+企業客戶的選擇</h3>

				</div>

			</div>
		</div>
	</div>
</div>
<!--優勢end-->

<script src="statics/js/main.js">//主要邏輯代碼</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 新浪注冊 立即下載

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了
cc竞速飞车公式规律