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.187551.com-重庆时时彩已下架| www.xh31.com-优乐彩票app| www.252615.com-万鸿彩票-| www.4756.cm-别人彩票中奖我领了| www.15300.com-嘉兴体育彩票店转让| www.952913.com-旺彩大乐透安卓版| www.618584.com-中国体彩排列五玩法| www.208287.com-快三单注中奖多少钱| www.818221.com-腾讯分分彩开讲结果| www.002024.com-福彩3d徐柯-| www.059254.com-时时彩趣味玩法说明| www.646813.com-职业彩民年收入| www.391244.com-怎么下载意彩app| www.54338.com-天际彩官网-| www.818381.com-搜狐彩票可以买吗| www.582458.com-彩票中头奖-| www.383951.com-彩票高频是什么意思| www.260571.com-快三第一门户网址| www.211666.com-k彩彩民福-| www.978829.com-雷语好彩一预测| www.cf78.com-大发快三手机购彩网| www.44495.cc-彩色沥青混凝土厂家| www.836715.com-足彩混合过关计算器| www.966144.com-全民快三真的假的| www.im8.com-内蒙快爱乐彩| www.qf09.com-体育彩票app扫码| www.81we.com-规模大的足彩推荐| www.223086.com-10分快三是真的吗| www.299057.com-彩29彩票下载安装| www.57115.cc-江苏快三号码走势| www.19671.cc-一分时时彩规律| www.5184.live-四川福彩双色球| www.764447.com-四场进球彩开奖| www.92ho.com-玩五分彩提现危险吗| www.gx78.com-进入百盈彩票网站| www.83989.com-彩票别的店给兑奖吗| www.py89.com-盗窃彩票的案例| www.832297.com-七彩视界最新版本| www.75ub.com-500彩票破解方法| www.299110.com-快乐双彩开奖结果| www.6371.xyz-可以买足彩app| www.348511.com-乐彩网官方平台| www.447468.com-福彩3d五线的连接| www.552923.com-彩票回血群-| www.621357.com-三分彩简介-| www.085591.com-彩票技巧软件| www.271592.com-广东福彩好彩1详情| www.517176.com-中彩网社区论坛| www.708843.com-腾讯分分彩人为改号| www.358295.com-中彩票的人是什么命| www.620303.com-澳客体彩苹果下载| www.733134.com-中国体彩投诉电话| www.821328.com-彩票这事业发展| www.905170.com-滨州体彩转让| www.980176.com-梦想网彩票-| www.nu82.com-网赌福彩快三| www.v85.com-中彩票后如何领奖| www.866363.com-福彩3d123-| www.69093.com-网上美女买彩票| www.571927.com-怎样申请开彩票站| www.673859.com-159彩票登录| www.3444.wang-福彩3d和值技巧| www.23396.cc-福彩五分彩全天计划| www.76vm.com-百姓彩票提现| www.cp7173.com-皖快三走势图带连线| www.760959.com-三分时时彩定胆计划| www.957885.com-66彩票网登录网址| www.969159.com-天天彩票正规吗| www.cai001.cc-上海快三走势图开奖| www.582460.com-长春快三福彩| www.196358.com-全国彩票360开奖| www.430583.com-江苏丰彩涂料| www.633366.cc-河南福彩中奖规则| www.81810.com-如何开一个私彩平台| www.089842.com-彩票刷流水是什么罪| www.210647.com-一分彩是国家开奖吗| www.954385.com-23彩票网怎么样| www.yp.com-中国福利彩票快3| www.388569.cc-彩友会是不是真的| www.362978.com-描写彩虹的成语| www.162700.com-福彩3d和值定位图| www.166537.com-兰州快三-| www.305653.com-80彩票-| www.405105.com-七星彩对数怎么看| www.535164.com-梦见数字买彩票中奖| www.600095.com-彩票最低充值1元| www.664689.com-黑客彩美-| www.751945.com-亚上彩怎么注册| www.827280.com-彩票开龙是什么意思| www.902037.com-黑彩平台代理| www.966882.com-综艺股份彩票| 豪彩VIPwww.816830.com| www.nz75.com-百盈彩票主页| www.033510.com-彩站宝-| www.403930.com-彩陶传奇-| www.788628.com-时时彩专家-| www.275910.com-北京快中彩中奖| www.353653.com-亚洲足彩公司有哪些| www.444177.com-福利彩票坐标走试图| www.550112.com-怎么没有台湾十分彩| www.628030.com-新疆时时采彩app| www.706299.com-皇都彩票国际版| www.779830.com-商场里的彩票游戏机| www.861385.com-五分彩破解器| www.922925.com-江西彩票11选5| www.982705.com-67彩下载-| www.as93.com-2d福彩玩法-| www.9955.hk-篮球竞彩258| www.062797.com-竞彩足彩推荐平台| www.280689.com-重庆彩票中心| www.425005.com-豹赢彩票最新苹果版| www.593886.com-七彩艺术集团| www.254404.com-手机彩票app排行| www.836503.com-快频彩是正规的吗| www.3025.net-体彩排列三今天| www.9877.cn-4a彩票-| www.22958.cc-好彩网和王者彩票| www.94977.com-福彩内部号是真是假| www.119537.com-快三儿-| www.205314.com-三分彩怎么玩| www.lw49.com-好彩36开奖-| www.452030.com-优优彩票网怎么样| www.581517.com-福彩快3预测分析| www.666239.com-e乐彩可以赌吗| www.738116.com-好运快三的计算公式| www.847589.com-福彩蛋-| www.970800.com-财神彩票平台注册| www.sw9.cc-今日甘肃快三走势| www.025189.com-大发快三邀请码| www.108657.com-彩票之家应用| www.515262.com-2010年七星彩| www.588877.com-乐彩体彩网-| www.657887.com-彩25app-| www.756651.com-加州45秒彩票骗局| www.851668.com-精彩出行怎么收费| www.909262.com-甘肃体彩网首页| www.14433.cc-足彩怎么玩法介绍| www.1758.com-帮忙代玩彩票| www.954946.com-福彩中奖怎么领奖| www.632131.com-破网络私彩诈骗案| www.fh66.com-彩票注册送23| www.ud04.com-体彩排列3奖金多少| www.426109.com-旭彩网怎么样| www.519829.com-网上赌彩票判多少年| www.51958.cc-彩票投注网站哪个好| www.bc60.com-上海天天彩选四开奖| www.043143.com-中国福利彩票报纸| www.119271.com-快三奖-| www.76dq.com-福彩一周几次开奖| www.514012.com-福彩模拟选号app| www.954506.com-博彩票平台-| www.4411.biz-贩卖私彩构成什么罪| www.75753.cc-老猫看彩公众号| www.028404.com-500彩票是赌博吗| www.69983.cc-盛世彩票ss-| www.301584.com-福彩3d谜语大全| www.114181.com-体彩官方-| www.745440.com-今日3d福彩试机号| www.829986.com-盈彩客服-| www.883040.com-女孩投彩-| www.950231.com-彩宝彩票app安卓| 彩客博www.8667s.com| www.hv06.com-重庆快三是真是假| www.108495.com-彩票上瘾是什么症状|