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.89461.com-金华福彩申请| www.076615.com-福彩有几位数| www.234032.com-天津快三和值走势图| www.682666.cc-哪个网站可以买足彩| www.805278.com-彩色沥青做法| www.896964.com-aa彩票助手-| www.351548.com-彩神viii官方| www.174448.com-吉林快三快速开奖图| www.309970.com-彩票中了去哪兑换| www.412233.com-彩票空间-| www.51.me-彩票应用排行榜| www.108.pink-福彩双色球看奖结果| www.pk35.cc-彩票计划时时彩| www.185850.com-多少人玩快三| www.72557.cc-19023期体彩| www.569761.com-体育彩票怎么奖| www.418707.com-ig传统彩下载| www.716976.com-荷花彩铅-| www.44071.com-网游彩中彩-| www.f39.net-乐彩赢大发快3| www.66uw.com-彩宝彩票合法的吗| www.2244.biz-给彩金的彩票| www.749062.com-中彩官网快3| www.835793.com-好彩788-| www.986405.com-彩票课堂-| www.zr81.com-为什么玩不过时时彩| www.605357.com-有没有彩色的苹果| www.994861.com-3d牛网彩涂迷今天| www.614343.com-彩的组词是什么意思| www.750198.com-全民彩票真假| www.052192.com-彩票合买怎么计算| www.vd39.com-河南省体彩网| www.308079.com-76858彩票登录| www.722778.com-如何找到彩票网址| www.838759.com-五快三良-| www.132115.com-彩妆店品牌-| www.304005.com-快彩在线是不是真的| www.444809.com-nba篮彩官网| www.022632.com-福彩3d奇奇断组| www.970651.com-彩票高手带计划| www.lh20.com-中彩彩票安全吗| www.527662.com-彩合网933288| www.bc73.com-快三破解器是真的么| www.547311.com-苹果商城体彩88| www.8454.cc-小财神彩票预测| www.299651.com-彩中彩一旦拥有| www.823803.com-琉璃三彩官网| www.915856.com-开福利彩票店怎么样| www.993544.com-足彩结束日期| www.29yr.com-什么是三分彩| www.124369.com-辽宁福利彩票双色球| www.089715.com-分分快三怎么样| www.717508.com-画彩铅的技巧| www.833565.com-全民智投足彩老版本| www.926195.com-福建省体彩31选7| www.994820.com-彩票代玩返佣金| www.4371.xyz-福彩报纸的首页| www.84po.com-竞彩篮球胜分差教程| www.918216.com-体育彩票倍率| www.cp0025.com-快三骰子开奖助手| www.xf86.com-够力七星彩解梦查码| www.56df.com-陕西安康彩票中奖| www.50163.com-红牛彩票破解方法| www.9324.loan-在马来西亚积宝彩票| www.102755.com-马来三分彩网址| www.51rp.com-玛雅彩票游戏官方| www.695851.com-足彩十四场投注| www.357773.com-婚内中彩票-| www.868296.com-今天体彩5d走势图| www.049930.com-体彩排列五综合| www.90925.com-好彩开奖1-| www.80oe.com-双色球牛彩专家杀号| www.3497.vip-彩票现金盘平台| www.02963.com-爱中彩票-| www.304834.com-彩票app推荐| www.952811.com-海南七彩开奖号码| www.pg6.com-天津福彩-| www.yo57.com-彩8彩票下载| www.628033.com-山东体彩下载软件| www.214822.com-41亿彩票-| www.177565.com-河南快三彩票走势图| www.2450.win-易彩快三是什么| www.366800.com-支付宝上怎样买彩票| www.11md.com-b8彩票下载安装| www.is40.com-凤凰彩票合法吗| www.82wp.com-多彩网3d字谜总汇| www.4534.cm-七星彩走势图500| www.36243.com-华彩彩票网站| www.691531.com-76c彩票-| www.629793.com-256彩网-| www.707094.com-江苏快三和值表格| www.776382.com-江苏快三统计遗漏| www.092530.com-比特儿下线彩币交易| www.647988.com-生肖彩结果-| www.722595.com-足彩单关配的意思| www.789213.com-澳洲三分彩稳赢计划| www.rx34.com-中彩注册下载| www.20jf.com-赢发彩票真假问题| www.25hl.com-七星彩17153期| www.3345.com-彩票88官方网站| www.9293.top-马来西亚博彩公司| www.99007.cc-时时彩斗牛规律| www.946505.com-福彩61生肖走势图| 发彩www.50732p.com| www.9659.loan-体彩快乐十分钟预测| www.39844.com-彩八苹果怎么下载| www.81354.com-香港一彩吧-| www.si0.com-3d彩票开奖号码| www.kp58.com-福彩快三概率| www.p06.net-大乐透彩票开奖结果| www.63mn.com-多彩彩票时时彩平台| www.062469.com-开奖公告乐彩网| www.208882.com-哪里能玩吉林快三| www.4152.biz-七彩阳光背面示范| www.4632.cm-彩票不能网上买了吗| www.8930.top-三d中彩网-| www.21445.com-时时彩和值技巧稳赚| www.8001.xyz-彩虹伞小班-| www.231269.com-百胜快三预测| www.155369.com-什么彩票最好赚钱| www.537051.com-彩色算是颜色吗| www.382952.com-3月16日体彩| www.670236.com-天天彩选4彩票真伪| www.211113.com-湖南福彩开奖结果| www.5963.xyz-胜负彩直播开奖| www.244244.com-体彩网大乐透规则| www.385944.com-招彩票代玩-| www.573695.com-中兴彩票app下载| www.86128.com-印花彩涂钢板| www.791756.com-彩票中奖流程| www.908226.com-快乐彩票手机app| www.990415.com-汇彩网是什么| www.v35.net-玩时时彩用哪个软件| www.494049.com-三地天天彩报纸图| www.778670.com-中国彩吧牛彩网| www.646103.com-竞彩低配倍投| www.00zn.com-最美的彩虹写人作文| www.rq34.com-5分钟开彩票| www.ra95.cc-时时彩不会输的方法| www.0235.vip-时时彩杂六什么意思| www.613023.com-彩票系统程序源码| www.264819.com-北京快三买单双| www.2096.com-江苏福彩主页| www.05550.cc-刮刮乐彩票-| www.43353.com-彩友会官网-| www.84320.com-七星彩分布图| www.025762.com-喜乐彩票充值平台| www.085888.com-分分快三能赚钱吗| www.688611.com-手机短信买彩票方法| www.792701.com-西安福彩店转让| www.880774.com-淘宝买不了彩票了吗| www.953373.com-马来西亚彩票管理| 8816彩票www.8816i.com| www.lu51.com-甘肃快三规则| www.j88.net-福彩3d今日藏机图| www.079958.com-公司发彩票员工中奖| www.kq34.com-五百万彩票网完整版| www.33811.com-手机快三怎么玩稳赚| www.37852.cc-天下彩9o234| www.310129.com-漯河市体彩中心电话| www.311612.com-体彩排列五网上购买| www.bw48.com-甘快三一定牛| www.715272.com-彩神1可靠吗| www.782901.com-福运彩官网-|