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天

知道了
密歇根神奇彩票 www.492902.com-七彩长岭麻将辅助| www.640400.com-迅雷新浪彩票| www.781780.com-分分彩不死挂机方案| www.873720.com-86彩票人工计划网| www.962045.com-福彩3d多彩网字谜| 网易彩票www.506433.com| www.lr45.com-中彩网是什么真的么| www.z97.cc-七乐彩新浪尾数走势| www.71ay.com-七马彩四不像| www.2111.space-福彩3d布衣42期| www.8688.vip-海南7星彩规律图| www.77262.cc-彩票怎么那么难中| www.038629.com-万彩吧彩票开奖结果| www.146648.com-竞彩篮球比分| www.251405.com-分彩彩票app下载| www.335916.com-河北快三数据统计表| www.432109.com-大乐彩票开奖规则| www.539437.com-彩票有黑幕吗| www.665719.com-87彩票网客户端| www.753291.com-中彩吧平台是真的么| www.872230.com-山西体彩在哪儿兑奖| www.953498.com-玩快三输了三万| 红旗彩票www.39957g.com| www.hn15.com-福彩快三代玩| www.d50.top-人工智能彩票| www.42rk.com-搜狗彩票计算器下载| www.894.live-八卦九宫图用于彩票| www.5850.biz-联发彩票网可靠吗| www.17705.cc-体彩283中奖规则| www.67821.cc-公务员彩票-| www.101562.com-彩22平台安全吗| www.179578.com-易彩快3有没有规律| www.258850.com-雪缘园足彩胜负彩| www.338776.com-彩票大奖得主姓名| www.430418.com-牛彩网彩摘网彩收录| www.537930.com-彩宝的意义-| www.685603.com-江苏快3彩控网| www.771465.com-时时彩开庄机器人| www.929512.com-七星彩计算器360| www.989765.com-湖北快三直播画面| www.vg8.com-安然七星彩专家预测| www.sn00.cc-中国竞彩首页| www.16ha.com-体育彩票加盟费用| www.268.tv-什么是快三福彩| www.4265.org-篮彩神棍区_虎扑| www.9944.cc-体彩五排开奖| www.68933.com-彩票店主助手| www.030722.com-大马彩票违法吗| www.113346.com-彩票五行属于什么| www.191529.com-湖北福彩-| www.266306.com-268彩票下载| www.388636.com-首批网络彩票牌照| www.518109.com-鸿运彩双色球| www.590512.com-福彩3d天宇字谜| www.666293.com-航天彩虹百度百科| www.745984.com-天天中彩票正规版| www.821932.com-买彩票能中五百万吗| www.899759.com-彩票号码自动生成器| www.964407.com-官方福彩幸用快三| 顶级娱乐www.088186.com| www.ij45.com-下載福利彩票| www.d91.club-彩票3d漏洞研究| www.39kn.com-青海省福利彩票| www.1685.vip-千亿彩票官方客户端| www.8799.bid-中国彩票排列五| www.43300.com-四川福彩学院| www.90101.cc-七彩影院苹果版| www.051900.com-彩票3d双福-| www.161616.com-时时彩黑客入侵改单| www.252309.com-全民彩票老版| www.326648.com-七星彩众彩网预测| www.397573.com-彩票卖到几点| www.533191.com-多格印象5d彩印机| www.634666.com-宋代七彩建盏| www.738281.com-福彩微信-| www.803460.com-海南福彩开奖| www.877808.com-五星彩票下载安装| www.990063.com-中彩网手机买彩票| www.cp9597.com-网上中彩网是真的吗| www.of85.com-长沙彩票-| www.9sz.com-体彩七星彩选号方法| www.69kl.com-高频彩票输死人| www.1203.vip-五分快三吧-| www.9308.cm-福彩3d擂台大赛| www.50305.com-七星彩加急一夜谈| www.93837.com-足彩欧赔-| www.057398.com-中国福彩论坛首页| www.163232.com-七乐彩复式投注表| www.253391.com-好彩妹主演-| www.324681.com-福利彩票能买吗| www.396216.com-中国十大彩宝| www.539058.com-乐盈彩票赚钱吗| www.622760.com-中国福彩体彩走势图| www.697166.com-体彩虚拟足球技巧| www.773335.com-足彩赔率计算公式| www.880028.com-天天彩4选开奖号码| www.952491.com-越战越勇中彩票| www.998431.com-北京福彩兑奖| www.fc5.com-玩黑彩一定输的原因| www.ok97.com-河北快三彩-| www.4tv.com-彩票怎么对-| www.59in.com-彩票店招聘营业员| www.0365.me-玩彩票官网下载| www.8233.com-足彩今日强胆推荐| www.29865.cc-彩漫福利软件| www.71985.com-彩票猫下载-| www.055686.com-六位数的彩票网赌| www.134474.com-南通体彩店怎么申请| www.208638.com-苏州快三开奖技巧| www.278662.com-苹果手机怎么买彩票| www.380961.com-开个彩票站赚钱吗| www.557817.com-玩彩虹伞的欢快音乐| www.623686.com-财富彩票是骗局吗| www.692301.com-宝马线上博彩公司| www.765543.com-808彩票网站| www.877335.com-七乐彩杀号公式| www.948284.com-多彩网彩吧论坛汇总| www.988374.com-副利彩票机选| www.cp172.com-大发快三安卓网| www.jy10.com-广西快三冷热号| www.a14.loan-南方双彩网手机版下| www.25tk.com-彩票平台注册送白菜| www.979.biz-彩票中6位数多少钱| www.6249.cm-七星彩定胆杀码| www.16045.com-乐利2分彩计划| www.57148.com-快三拉花-| www.026384.com-搜索福彩新彩网| www.096446.com-彩吧网多彩网| www.157425.com-网上购彩软件可靠吗| www.260663.com-福彩3d怎么兑奖| www.326876.com-36○彩票全国| www.389593.com-彩票开奖结果33期| www.527789.com-彩票之家是正规的吗| www.606646.com-竞彩足球18年停售| www.671689.com-竞彩足球玩法介绍| www.739672.com-网上彩票赔20万| www.804056.com-介绍几个彩票平台| www.872034.com-毕节彩票站-| www.969579.com-酷彩官网-| www.ef96.com-体彩究竟是不是骗局| www.ug12.com-vip彩票软件| www.81.cc-500彩票提现规则| www.62iw.com-广州彩票店-| www.903.cm-中三千万彩票后| www.4255.cn-优乐彩会不会踢人| www.9004.in-123体育彩票| www.70362.com-七天彩彩票-| www.024874.com-玩时时彩买单双技巧| www.090286.com-彩票通彩票-| www.144030.com-足球体彩-| www.209378.com-爱乐彩彩票官方网站| www.271081.com-南海网七星彩论坛| www.389761.com-东莞凤岗体彩店转让| www.505684.com-黑彩受骗-| www.566915.com-二四六好彩免费资料| www.627156.com-068彩票-| www.686613.com-今天3d彩圣字谜| www.758580.com-福彩网是什么性质| www.876030.com-爱乐彩广西快三| www.950862.com-上期六台彩开奖特马| www.995872.com-怎么举报好彩店彩票| www.be2.com-新彩app-| www.li67.com-掌优彩票app| www.zt45.com-极速3d彩票规则|