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天

知道了
百盈PK10 www.722755.com-省份快三彩票| www.34xy.com-海南七星彩坛论| www.282638.com-福彩百位振幅走势图| www.574612.com-河北十选五爱乐彩| www.281000.com-天津时时彩官方| www.450014.com-网上彩票有哪些种类| www.698708.com-彩票走势图1000| www.829203.com-新乐彩票app| www.988090.com-彩民乐图库-| www.kg21.com-新浪彩票3d走势图| www.12pw.com-福彩的奖号-| www.87232.com-彩票2元排三走势图| www.3131.net-河北快三骗局| www.872402.com-彩票推广代理加盟| www.990430.com-505彩票直播网| www.rt64.com-彩之家平台合法么| www.048833.com-体福彩-| www.110616.com-七星彩最新中奖故事| www.335840.com-私彩平台快三| www.485438.com-重庆时时彩咋封盘了| www.657874.com-彩民村新一心水之家| www.616738.com-中奖彩票掉了| www.877390.com-彩票计划全天在线| www.022483.com-2彩票网-| www.505241.com-中圆竞彩票-| www.758074.com-中彩网专家预测汇总| www.fn85.com-中国人人福利彩票| www.247178.com-新快三单机游手机版| www.860402.com-体育彩票多久兑奖| www.974507.com-下载福彩快三走势图| www.395098.com-彩票员-| www.985594.com-28彩票官网-| www.824748.com-福彩牛彩图谜汇总九| www.753709.com-qq彩色字体-| www.961191.com-分分彩预测网站| www.x08.cc-辽宁体彩十二选五| www.939022.com-澳客彩版本-| www.622083.com-澳门118彩票网| www.944.cc-七星彩2位数多少钱| www.110459.com-福彩3d百度百科| www.180.gg-彩铅简化-| www.12558.cc-哪个彩票就买四个数| www.085976.com-足彩中奖规则和奖金| www.239325.com-e彩堂下载-| www.978734.com-微信买彩票安全吗| www.7630.shop-金凤凰网站彩票网| www.062148.com-神牛福彩双色球推荐| www.085401.com-上海快三和值十四点| www.335864.com-福利彩票.com| www.503928.com-火星彩票可信吗| www.yv2.com-体彩怎么玩详细介绍| 大赢家彩票平台www.820289.com| www.013878.com-七星彩跨度-| www.021720.com-福彩20选8走势图| www.97605.com-二分时时彩规律| www.122163.com-举报时时彩-| www.tc7.cc-吉林市快三预测| www.26ya.com-体彩足球竞彩兑奖| www.3763.xyz-彩经网专家免费预测| www.955382.com-合创彩票app下载| www.pl39.com-55128中国彩吧| www.57xc.com-《中彩那天》生字| www.6222.in-快三分分彩规律| www.31854.com-足彩竞彩预测分析| www.83074.com-邢台体彩中心地址| www.791744.com-博京娱乐平台时时彩| www.953125.com-中国足球竞猜竞彩网| www.uj21.com-贵州快三开奖走试图| www.hx85.com-安徽快三豹子规律| www.033525.com-王者彩票218us| www.703003.cc-福利双彩票开奖结果| www.992455.com-期星彩开奖结果查询| www.04279.com-彩票工具一今日运势| www.413737.com-腾讯分分彩预测胆码| www.586241.com-七乐彩独胆泌下| www.419779.com-直播七星彩-| www.418163.com-全民彩票改名| www.g33.club-七星彩票开奖| www.557630.com-68好运彩-| www.58892.cc-金冠彩票app| www.023590.com-113彩票安卓版| www.097198.com-福彩3d大花虎2| www.176713.com-江苏快三稳赢技巧| www.245300.com-彩票开奖i结果| www.314521.com-福利彩票注销的规则| www.375282.com-ttcp彩票官网| www.011993.com-周日哪些彩票开奖| www.257955.com-爱彩票破解-| www.170261.com-网络快三是骗局揭秘| www.267679.com-福彩自助北京快三| www.344717.com-178彩票代理平台| www.525874.com-全民彩票安卓版下载| www.31121.com-彩票小助手官网| www.356889.com-过生日买彩票会中吗| www.201123.com-七星彩没人敢买了| www.60175.com-体彩即时彩-| www.99687.cc-比利时分分彩走势图| www.077925.com-玩彩网官方网站| www.420019.com-体彩哪个中奖率高| www.537767.com-彩色包括黑白吗| www.69270.com-九场胜负彩预测| www.048777.com-3d彩界发大财| www.503298.com-广州鸿彩灯光官网| www.610097.com-为什么有人买彩票| www.120342.com-英国五分彩下载| www.280380.com-乐8彩下载安装| www.400352.com-体彩大乐透历史号码| www.543077.com-今天福彩排三开奖号| www.75558.com-彩票走势图数据大全| www.129442.com-众彩网手机端| www.349067.com-我中啦彩票网有密| www.63518.com-足彩竞彩赛事| www.100080.com-e时彩彩票-| www.502581.com-快3私彩-| www.066619.com-博友彩赚钱是真的吗| www.019211.com-彩票达人软件下载| www.lj73.com-亚彩平台登录| www.re10.com-很灵的彩票中奖咒语| www.04187.com-彩票怎么电话投注| www.853346.com-河口彩客化学电话| www.968314.com-时时彩导师的骗局| www.cp0122.com-十分快三助手| 博乐彩票www.35918r.com| www.397319.com-腾龙时时彩统计官网| www.36873.cc-彩票北京28-| www.134999.cc-新闻彩票全部中奖| www.75656.com-彩票一拳-| www.015832.com-澳客彩票网乐彩网| www.654824.com-时时彩和快三哪个稳| www.625242.com-51彩卡-| www.733593.com-福彩开机弓码| www.790496.com-彩票模拟器安卓版| www.971694.com-彩店宝官网下载| www.yf07.com-什么叫派彩-| www.1681.org-盈利彩票软件下载| www.uu76.com-国家正规的高频彩| www.111184.com-十分彩票-| www.841528.com-竞彩足球外围比分| www.gc1.com-彩票网名-| www.707061.com-安徽合肥快三走势图| www.835936.com-中国福利彩票领奖处| www.962408.com-易赢668彩票| www.ad08.com-福彩3d开奖奖号| www.026841.com-yy刷彩金兼职平台| www.355252.cc-唯彩杀号-| www.627275.com-256彩票下载安装| www.905276.com-凤凰彩票官网计划| www.87jt.com-威尼斯彩票游戏网站| www.9306.cn-7乐彩杀号方法| www.978174.com-彩钢瓦围挡规格| www.cp9369.com-安徽福彩快3玩法| www.317011.com-浙江省福彩兑奖中心| www.452813.com-竞彩套路-| www.590625.com-709彩票苹果下载| www.690989.com-竞彩篮球群-| www.770412.com-篮彩吧-| www.829059.com-苹果版ee彩票| www.910833.com-三d玩彩老头预测| www.969855.com-七乐彩4拖6多少钱| 500彩票www.904861.com| www.ee84.com-快三怎么刷流水不亏| www.57192.cc-彩八万软件下载| www.ut.com-快三客是什么软件| www.200160.com-快三一定牛快三|