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.245775.com-快三守号靠谱吗| www.978950.com-360彩票苹果版| www.85uu.com-聚象彩是假的吗| www.00464.com-博彩论坛17500| www.107751.com-亚洲宝博彩票| www.926329.com-江西体彩官网app| www.432196.com-彩票兑奖查询器| www.45837.com-68彩票网官方网站| www.597277.com-购彩网赚钱是真的吗| www.497814.com-千百万彩票网| www.580922.com-彩票平台源码好不好| www.8998.online下载彩票软件网| www.42112.com-彩票守号十二年| www.91047.com-好彩多少钱-| www.058588.com-中国福彩彩吧第一版| www.144210.com-北京足彩返还率多少| www.219981.com-中彩网快三走势图| www.298469.com-东北快三-| www.006191.com-上海福彩快3推荐| www.222627.com-江苏快三缩水软件| www.3407.vip-彩报王图-| www.32379.com-做彩色纸箱的设备| www.fr80.com-中国体彩网电脑版| www.39xx.com-江苏彩礼排行榜| www.626.com-福彩排列三中奖号| www.3814.xyz-竞彩网开奖视频| www.146022.com-彩票256安卓下载| www.260101.com-福利彩票怎么领奖| www.356224.com-体彩今日开奖彩宝貝| www.931209.com-800彩票官网| www.79en.com-福利彩票营业时间| www.22306.com-e彩堂怎么玩| www.0310.cc-福利彩票中奖算法| www.33795.com-乐透是彩票-| www.970936.com-梦境与彩票数字| www.397091.com-okoo彩票网-| www.172311.com-十一多乐彩-| www.549814.com-八号时时彩手机软件| www.913765.com-万彩网能提现吗| www.014408.com-七乐彩杀号彩宝贝| www.087754.com-亚洲会彩票官方网站| www.377022.com-排列五试机号彩宝网| www.595273.com-中国福彩站点查询| www.56244.com-时时彩回本心态| www.5506.cm-福彩网点充值| www.358566.com-体彩键盘图-| www.4299.cc-查彩票中奖怎么查| www.9410.in-非凡网彩票走势图| www.44416.com-永成彩票这个软件| www.671664.com-体彩19058期| 易彩网www.36166x.com| www.1028.red-怎样购买大乐透彩票| www.293828.com-九千万彩票大发快3| www.360463.com-买足彩能赚钱吗| www.519966.com-趣彩彩票安卓版| www.659047.com-好运来时时彩| www.936002.com-假彩票什么样的| www.si27.com-聚富网彩票登陆| www.244323.com-大连体彩-| www.914189.com-彩神争霸有风险吗| www.ag47.cc-双色球走势图彩宝贝| www.01633.com-福彩店能赚钱吗| www.680860.com-打打彩票-| www.862733.com-买私彩犯法吗| 500彩票www.66653r.com| www.009507.com-579彩票平台| www.009502.com-彩票指南报纸凤彩网| www.u37.club-赢彩网是不是真的| www.2067.in-旺彩社区彩迷天地| www.988555.com-幸运中彩票老版| www.851045.com-腾讯分分彩精准预测| www.664929.com-浙江休彩6十1开奖| www.907762.com-秘梦解图七星彩奖表| 快彩www.81678w.com| www.242355.com-立体彩铅画图片大全| www.930539.com-体彩六加一规则| www.cai6599.com双彩l论坛-| www.24742.com-彩铅彼岸花绘画教程| www.66268.com-中超彩票哪里买| www.261760.com-福彩快2玩法介绍| www.389323.com-杨哥说彩双色球预测| www.636710.com-彩虹符号emoji| www.712466.com-手机买彩票犯法吗| www.613096.com-天福彩票app| www.432148.com-火箭彩票个人中心| www.632015.com-七彩虹刷bios| www.972869.com-足彩胜平负彩客网| www.4je.cc-内蒙古快三预测定牛| www.sd1.com-上海体彩兑奖地址| www.cp260.cc-河北新快三开奖结果| www.ma33.com-分分时时彩正规吗| www.b73.biz-时时彩任选三技巧| www.004177.com-福彩整顿了吗| www.998077.com-彩票天天乐登录| www.ug53.com-彩票改时间了吗| www.920373.com-玩彩票赚钱注册账号| www.679472.com-可乐彩票-| www.783304.com-第一彩票网站首页| www.cai6711.com贵州快三走势图今天| www.228654.com-河南省彩钢围挡厂家| www.550709.com-买彩票网址导航| www.020061.com-58同城彩票app| www.zs04.com-体彩超级大乐透规则| www.403369.com-体彩大乐透主任是谁| www.1025.tv-在线购买大乐透彩票| www.120592.com-快三倍投计划表| www.784735.com-大胜彩票官网| www.861262.com-中国体育彩票任选三| www.913210.com-彩经网3d选胆图| www.960048.com-牛彩摘彩收录机论坛| www.994334.com-中华购彩网邀请码| www.025429.com-易彩一彩民福地登录| www.115990.com-买足球彩票的软件| www.aj29.com-体彩七星彩兑奖方法| www.197733.com-中国彩票开奖大全| www.293665.com-网上正规的彩票网站| www.603207.com-中彩网排列三| www.3ha.com-福利彩8下下载| www.676666.cc-七星彩排列五开奖表| www.089255.com-618彩票-| www.237627.com-足彩比分188| www.388727.com-福彩7码遗漏组六| www.871924.com-彩票每月任务| www.9098.com-易购彩软件下载| www.001170.com-运彩网官网登录| www.051070.com-166i彩票-| www.223355.com-中国体彩-| www.21uo.com-体彩题库-| www.217615.com-大发彩票中国代理| www.61ga.com-色彩的三要素分别是| www.3592.biz-国际彩票是不是骗局| www.77627.com-全民汇彩票正规的吗| www.825971.com-uu彩票直播-| www.ka12.com-快三和值中奖金额| www.1580.org-最贵的彩票收藏| www.34094.com-3b彩吧开机号| www.9567.cm-杏彩黑销钱骗人| www.43800.com-七星彩17155期| www.080648.com-彩八仙-| www.96gh.com-如何找彩票台子| www.786811.com-彩票中奖图片愚人节| www.897489.com-体彩竞彩中奖规则| www.994094.com-飞鱼彩票投注技巧| www.gd09.com-百胜快三-| www.80.cx-新彩吧彩票| www.911679.com-天天彩4基本走势图| www.986198.com-蓝球竞彩专家预测| www.xq.com-福彩五分快三走势图| www.lq30.com-中彩网载-| www.137495.com-双色球预测易彩网| www.555427.com-高频彩被叫停| www.wd90.cc-内蒙快三今天推荐号| www.934517.com-时时彩0到9对码| www.cai869.com-江苏快三玩法| www.616600.com-竞彩购买-| www.730159.com-最容易中奖的彩票| www.874998.com-完美彩票网站c79| www.963507.com-王元彩票-| www.az27.com-爱彩通app-| www.562937.com-桌易彩票一亿不认账| www.720929.com-体彩招牌图片大全| www.197032.com-排三走势图彩经网| www.291771.com-鸿彩网直播间| www.683337.com-网上是否可以买彩票|