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.3823.in-本期体育彩票规律图| www.mu44.com-手机玩彩票做代理| www.092186.cc-大连买彩票几点截止| www.729589.com-上海体彩11选5开| www.861211.com-福彩3d算号宝下载| www.930828.com-体彩玩法大乐透| www.276759.com-彩票大家玩2017| www.984.mobi-游戏机里面的彩票| www.36238.com-22彩票网站网址| www.008409.com-彩票挂机软件怎么用| www.437067.com-mega美国彩票| www.563684.com-皇冠彩票柬埔寨| www.31ey.com-体彩星期几可以买| www.0022.loan-彩票跟投-| www.357292.com-福彩体彩招牌图片| www.278872.com-新快三如何打| www.708696.com-彩神网中的安全密码| www.1177.com-体彩最多买多少倍| www.7755.cm-足彩支持率-| www.48582.com-彩票批发多少钱一张| www.019073.com-利彩彩票网官网| www.917.red-七星彩怎样算是中奖| www.03611.com-加拿大七星彩骗局| www.z97.net-神彩网手机版| www.934478.com-快三是真的么| www.ck55.cc-智能彩票算号器| www.yp45.com-中国体彩网直播| www.948158.com-江西体彩中心官网| www.kl72.com-官方幸运快三彩票| www.176009.com-快三软件app| www.589608.com-七星彩数字神奇组合| www.795221.com-今日彩票幸运号码| www.593556.com-鞍山七彩化学待遇| www.331765.com-2345彩票网-| www.702247.com-体育彩票加盟网站| www.9683.vip-大发快三是假的吗| www.xh49.com-彩七在哪里下载| www.767982.com-怎样购买外国彩票| www.907528.com-重庆时时彩赚钱方法| www.985715.com-福利彩票手机能买吗| www.e12.org-七星彩现场直播网站| www.334233.cc-万禧彩票-| www.078952.com-七星彩版面-| www.8646.vip-中彩乐网址-| www.76616.com-彩票测试出奖号软件| www.98477.com-比特币分分彩怎么玩| www.949840.com-福彩今晚开奖| www.aq96.cc-彩票贵州11选5| www.hy12.com-北京快三开奖和值| www.4147.xyz-彩虹台节目表| www.305673.com-彩票有必要坚持买吗| www.23nc.com-韩国15分彩app| www.237098.com-新浪爱彩比分旧版| www.365677.com-容易临摹的彩铅名画| www.542365.cc-248彩票苹果下载| www.296166.com-国家整顿重庆时时彩| www.2709.me-体彩排列三豹子遗漏| www.dq44.com-有福彩快三的省份| www.117113.com-竞彩足球胜平负结果| www.45498.com-微彩特区论坛| www.242185.com-彩票稳赚方案| www.320108.com-福彩小德定位今天| www.398684.com-本期七星彩开奖直播| www.63371.cc-晴予七星彩专栏| www.849450.com-浚县王庄彩礼| www.921945.com-约彩365无法注册| www.982523.com-彩票幸运快三| www.87sp.com-十分彩官网开奖结果| 华彩网www.www.hcw332.com| www.78331.cc-彩票属于哪个神仙管| www.920694.com-青海快三遗漏| www.193739.com-延吉市体彩管理中心| www.7749.org-风彩彩票可靠吗| www.781731.com-中奖彩票税费| www.89332.com-老彩民高手它坛| www.076652.com-体彩排列五专家预测| www.155346.com-中国足彩网第一彩| www.230876.com-北京福彩快乐3| www.302113.com-福彩人人快3骗局| www.528986.com-重庆时时彩推荐| www.962013.com-福彩计划软件app| 云博彩票www.990733.com| www.015815.com-唯彩专家预测| www.126074.com-88彩票软件-| www.10cu.com-彩之云官网-| www.059358.com-福彩双色球图表| www.462592.com-福彩500万-| www.755488.com-福彩三天计划独胆王| www.8885.cm-足彩庄家永远赚钱| www.015681.com-七星彩中二等奖领奖| www.571259.com-中彩之家88cc| www.921249.com-云南体彩票11选5| 体彩网www.3890d.com| www.mh46.com-亚博彩票首页登录| www.595316.com-足彩论坛虎扑讨论区| www.663337.com-七乐彩开奖结果| www.730717.com-重庆时时走势图彩经| www.803753.com-湖北快三统计表| www.882628.com-易彩彩票犯法吗| www.956077.com-精彩彩票是真的吗| 500彩票www.722571.com| www.382834.com-胜负彩190344| www.513155.com-彩民最新故事| www.747211.com-平台彩票-| www.821737.com-附近的福彩站点地图| www.977289.com-河南的彩礼害死人| www.hh80.com-湖北快三分布走势图| www.u78.net-多彩贵州网十佳| www.32193.cc-易彩集团账付| www.245.cm-时时彩5星直选复式| www.4222.in-高频彩分析软件| www.261028.com-尊彩官网-| www.359286.com-网站博彩注册送59| www.444302.com-福彩3d绝杀的公式| www.38zi.com-头彩发饰加盟连锁| www.2408.com-众彩之家-| www.913219.com-彩票什么叫复式单式| www.997411.com-传奇彩票下载| www.nd29.com-安徽快三中奖助手| www.zc09.cc-甘肃福彩开奖结果| www.970786.com-安阳所有中彩票故事| www.cp9800.com-实时快三走势图青海| www.kz38.com-彩票开奖大全下载| www.99zj.com-三彩网-| www.9154.cc-七星彩透露信息| www.020771.com-彩票计划源码| www.542284.com-360彩票原始版| www.645711.com-玩快彩心得-| www.31253.com-鸿彩网骗局-| www.83585.com-对买彩票的看法| www.024428.com-国彩网投彩票返点| www.082817.com-众信彩票信誉怎样| www.062575.com-利用彩票漏洞赚钱| www.181163.com-宁夏快三开奖在哪看| www.246775.com-足彩新浪爱彩| www.314987.com-彩票手机投注玩法| www.792093.com-福彩什么是码积| www.866819.com-周五彩票什么开奖| www.943530.com-久久彩票老版| www.984284.com-福利彩票怎么玩儿| www.lu0.com-人人中彩票下载安装| www.056233.com-合肥体彩几点上班| www.130114.com-055hcc福彩-| www.128069.com-儿童彩虹简笔画彩色| www.5522.site-福利彩加盟-| www.944670.com-福建福州体彩| www.07tf.com-体彩6?1开奖| www.84lk.com-彩票注数和每注金额| www.2178.in-幸运彩票如何提现| www.yu96.com-用手机买彩票| www.967441.com-云南福彩3d高手群| www.856433.com-彩票网站建设极云| www.334660.com-彩票每天有多少人买| www.220993.com-快三三不同号| www.90505.cc-彩83登录-| www.761584.com-甘肃快三投注技巧| www.232737.com-体育彩票竞技新浪网| www.302525.com-打开福彩和值表| www.42298.com-12号彩票-| www.029921.com-网名雨后彩虹的含义| www.92782.com-体彩电话投注| www.491918.com-体彩大透开奖| www.596979.com-久彩彩票ios| www.725608.com-中福彩票平台安全吗|