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.668648.com-掌上彩票竞彩版| www.809392.com-众博彩票软件下载| www.001965.com-中国彩票走势图表| www.74eq.com-体育彩票排列三算法| www.7cy.com-篮球彩票让分胜负| www.712505.com-人人中彩网-| www.837336.com-立彩网址-| www.097017.com-彩票哪个奖金最高| www.094818.com-彩票3d图谜第三版| www.kk92.com-体彩7-| www.878364.com-体育彩票店哪个靠谱| 佰萬彩票www.560529.com| www.128432.com-最具权威的彩票网站| www.227668.com-江苏五分钟快三| www.564856.com-非凡彩票3d预测| www.637992.com-色彩斑斓女神款微信| www.711079.com-名彩票-| www.785308.com-2快三计划软件| www.857939.com-十分钟彩票平台| www.920752.com-伍佰万彩票下载| www.996470.com-黑龙江福彩票| www.am37.cc-亿网彩票-| www.rg90.com-北京快三今天走势图| www.656493.com-香港博彩王-| www.751572.com-在线刮刮彩-| www.913160.com-彩客网提现方便吗| www.tq6.cc-乐彩网可靠吗| www.sy32.cc-够力七星彩奖表最新| www.636922.com-emoji彩虹复制| www.723236.com-中国双色球福彩网站| www.809064.com-老彩民平台-| www.882597.com-中国高频彩合法吗| www.952836.com-旺彩推荐号码| 亿彩彩票www.ycp0.com| www.269537.com-彩名堂4.0版本| 大赢家彩票平台www.987580.com| www.tr99.com-彩七星彩票开奖结果| www.24nc.com-手机彩膜图片原图| www.5210.com-彩票321-| www.176730.com-福彩快三有啥规律| www.380414.com-西安快三走势图| www.531213.com-彩铅手绘教程入门| www.603107.com-彩虹六号禁播| www.679935.com-彩票每日首存送| www.752311.com-彩虹六号禁播原因| www.817323.com-诚信彩票cx88| www.882376.com-体育彩票销量下降| www.949241.com-湖北快三网络购买| www.996775.com-陕西快三走势图| www.aj92.com-彩票开奖公告立| www.49214.com-福彩彩宝开机号金码| www.819458.com-彩票计划免费app| www.685797.com-好运来彩票站怎么样| www.792581.com-福彩兑奖怎么验奖| www.lu43.com-小鹿时时彩软件| www.50686.com-博彩app平台开发| www.2381.vip-愚人节彩票中奖骗局| www.27561.com-体彩去哪里兑奖北京| www.806150.com-竞彩258彩票下载| www.933993.com-福彩快乐研彩app| www.993645.com-注册送388彩金| www.nw5.com-快三怎么看和值| www.wd69.com-东北快三-| www.259272.com-福彩双色球下期预测| www.766938.com-青蛙彩票导航网| www.63vf.com-彩票研究方法的博客| www.446700.com-竞彩6串1大奖| www.618474.com-福彩双色球30期| www.66315.cc-彩票赊账怎么解决| www.69568.cc-99彩票网靠谱吗| www.044445.com-信彩票赚钱是真的吗| www.723021.com-至尊彩-app中心| www.947758.com-爱彩乐可以买彩票吗| www.n76.shop-河南福利彩票网官网| www.670641.com-内蒙古省福彩中心| www.801192.com-160彩票官方下载| www.883372.com-高频彩网-| www.996731.com-体彩图谜总汇| www.hk13.cc-湖北快乐十分3彩| www.41me.com-划归七星彩-| www.58719.cc-大众彩票是正规的吗| www.021140.com-大乐透彩票开奖| www.128420.com-体彩福建11选五| www.224130.com-福彩玩法中奖规则| www.383068.com-16期七星彩-| www.541218.com-推荐大乐透彩票号码| www.679754.com-沉迷彩票无法自拔| www.971746.com-上海体彩app下载| www.cp3798.com-北京快三合法的吗| www.192114.com-河南福彩快三官网| www.517901.com-怎么当旺彩店主| www.675436.com-众彩网排列三走势图| www.765829.com-大发体彩网址| www.579596.com-福彩账号-| www.000443.com-加拿大时时彩骗局| www.639916.com-中国最大的彩票公司| www.820820.cc-彩钢瓦规格表| www.786069.com-大乐透福利彩票官网| www.930087.com-北京快三线路图| www.cai678.cc-全天1分快三计划| www.505168.com-天下彩址-| www.552013.com-彩票网址大全app| www.640044.com-22彩票网址是多少| www.757733.com-盈利彩票登录| www.849529.com-竟彩比分值播| www.918250.com-下载900彩票| www.my57.com-福彩3d技巧和秘籍| www.68zx.com-手机彩票怎么兑奖| www.97306.com-竞猜足彩比分| www.5785.biz-亚洲版时时彩| www.892181.com-武汉高频彩11选5| www.876710.com-幸运彩票不能提现| www.ea39.com-广西时时彩开奖网站| www.xa27.com-搜索贵州快三开奖| www.20ba.com-爱创彩票合法吗| www.f17.net-七乐彩中奖规则说明| www.547789.cc-福利彩票详细情况| www.653508.com-福彩3d鬼640| www.57ze.com-渭南彩票站转让| www.895273.com-60彩票官网-| www.974072.com-熊猫在线彩票| www.xc0.com-湖北快三必出号| www.446320.com-体彩3d开奖结果l| www.628877.com-福彩代打是什么| www.6802.vip-香港彩宝典ios| www.036268.com-福彩3地开机号| www.954113.com-海南彩票七星彩| www.989254.com-杭州福彩店怎么申请| www.cp6115.com-彩500下载-| www.861363.com-彩金宏辉游戏机厂家| www.7369.in-七星彩票长条局王| www.32822.cc-微彩娱乐平台| www.166839.com-彩票开挂软件| www.265963.com-福彩代理怎么弄| www.618809.com-打彩票是什么意思啊| www.699342.com-内蒙古快三综走势图| www.785653.com-领航彩下载app| www.873811.com-彩31是不是骗局| www.cp5787.com-手机买彩票怎么买| www.875638.com-牛蛙彩开奖现场| www.945557.com-河南农村彩礼多少钱| 大赢家彩票网www.54400y.com| www.im89.com-彩29安卓版-| www.xx12.cc-388彩票app-| www.21ay.com-彩世界安卓版下载| www.84ug.com-当前体彩的发展瓶颈| www.0722.cc-怎么刷彩票流水| www.48974.com-彩鸿彩票是真的吗| www.623216.com-红牛彩票qq群| www.9852.shop-古建彩绘行龙图案| www.254626.com-重庆时时彩停售原因| www.5440.cn-福彩3b开奖号| www.309288.com-快三提前开奖的软件| www.397849.com-体育彩票加盟店联系| www.567129.com-彩票社区数字达人| www.678922.cc-2017白菜送彩金| www.819367.com-福彩三三地走势图| www.723632.com-体彩大乐透亿元大奖| www.897677.com-福彩藏机图总汇| www.378.hk-福利彩票走图| www.085047.com-体育福利彩票app| www.418333.com-盛大彩票邀请码| www.629881.com-时时彩半顺怎么买| www.65zt.com-亚博彩票做什么|