HTML橙色实用形式学术论文专业企业网站模板代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 34 12



模板描述:橙色 实用形式 学术论文专业。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用学术论文专业行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700&amp;subset=latin-ext" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/odometer.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

<!-- header -->
	<div class="header_address_mail">
		<div class="container">
			<div class="agileits_w3layouts_header_address_grid">
				<ul>	
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><i class="fa fa-phone" aria-hidden="true"></i></li>
					<li>+(000) 123 234 22</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="header">
		<div class="container">
			<div class="w3_agile_logo">
				<h1><a href="index.html"><span>A</span>ndragogy</a></h1>
			</div>
			<div class="header-nav">
				<nav class="navbar navbar-default">
					<div class="navbar-header navbar-left">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
						<nav class="link-effect-12">
							<ul class="nav navbar-nav w3_agile_nav">
								<li class="active"><a href="index.html"><span>Home</span></a></li>
								<li><a href="gallery.html"><span>Gallery</span></a></li>
								<li><a href="about.html"><span>About Us</span></a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="Short Codes">Short Codes</span> <b class="caret"></b></a>
									<ul class="dropdown-menu agile_short_dropdown">
										<li><a href="icons.html">Web Icons</a></li>
										<li><a href="typography.html">Typography</a></li>
									</ul>
								</li>
								<li><a href="mail.html"><span>Mail Us</span></a></li>
							</ul>
						</nav>
					</div>
				</nav>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- header -->
<!-- banner -->
<!-- banner-slider -->
			<div class="banner-slider">
					<div class="slider">
						<div class="callbacks_container">
							<ul class="rslides callbacks callbacks1" id="slider4">
								<li>
									<div class="agileits-banner-info">
										<div class="container">
											<div class="w3ls-banner-shadow">
												<h3>THE PLACE FOR HAPPY AND CREATIVE LEARNING</h3>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="agileits-banner-info agileits-banner-info1">
										<div class="container">
											<div class="w3ls-banner-shadow">
												<h3>Help on your way to academic excellence!</h3>
											</div>
										</div>
									</div>
								</li>
								<li>
									<div class="agileits-banner-info agileits-banner-info2">
										<div class="container">
											<div class="w3ls-banner-shadow">
												<h3>THE PLACE FOR HAPPY AND CREATIVE LEARNING</h3>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="clearfix"> </div>
						<script>
							// You can also use "$(window).load(function() {"
							$(function () {
							  // Slideshow 4
							  $("#slider4").responsiveSlides({
								auto: true,
								pager:true,
								nav:false,
								speed: 500,
								namespace: "callbacks",
								before: function () {
								  $('.events').append("<li>before event fired.</li>");
								},
								after: function () {
								  $('.events').append("<li>after event fired.</li>");
								}
							  });
							});
						 </script>
						<!--banner Slider starts Here-->
					</div>
			</div>
			<!-- //banner-slider -->
<!-- services -->
	<div class="services">
		<div class="container">
			<div class="w3layouts_header">
				<h2>RECENT <span>PROGRAMS </span></h2>
				<p><span><i class="fa fa-book" aria-hidden="true"></i></span></p>
			</div>
			<div class="w3_services_grids">
				<div class="col-md-6 w3l_services_grid">
					<div class="w3ls_services_grid agileits_services_grid3">
						<div class="wthree_service_text">
							<h3>EDUCATION</h3>
							<h4>EDUCATIONAL RESOURCES</h4>
						</div>
					</div>
				</div>
				<div class="col-md-6 w3l_services_grid">
					<div class="w3ls_services_grid agileits_services_grid4">
						<div class="wthree_service_text">
							<h3>ARTS & CULTURE</h3>
							<h4>RESOURCES, EVENTS & PROGRAMS</h4>
						</div>
					</div>
				</div>
				<div class="col-md-4 w3l_services_grid">
					<div class="w3ls_services_grid agileits_services_grid">
						<div class="wthree_service_text">
							<h3>WELLNESS </h3>
							<h4>EVENTS AND PROGRAMS</h4>
						</div>
					</div>
				</div>
				<div class="col-md-4 w3l_services_grid">
					<div class="w3ls_services_grid agileits_services_grid2">
						<div class="wthree_service_text">
							<h3>COURSES</h3>
							<h4>EVENTS AND PROGRAMS</h4>
						</div>
					</div>
				</div>
				<div class="col-md-4 w3l_services_grid">
					<div class="w3ls_services_grid agileits_services_grid1">
						<div class="wthree_service_text">
							<h3>RECREATION</h3>
							<h4>EVENTS AND PROGRAMS</h4>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //services -->
<!-- statistics -->
	<div class="statistics">
		<div class="container">
			<div class="col-md-6 w3layouts_statistics_grid_left">
				<div class="w3_statistics_grid_left_grid">
					<img src="images/g5.jpg" alt=" " class="img-responsive" />
				</div>
			</div>
			<div class="col-md-6 w3layouts_statistics_grid_right">
				<h4>Nulla faucibus mauris ac leo imperdiet, id auctor urna consectetur</h4>
				<div class="col-md-4 w3_stats_grid">
					<h3 id="w3l_stats1" class="odometer">0</h3>
					<p>Experience</p>
					<div class="w3layouts_stats_grid1">
						<i class="fa fa-calendar" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-md-4 w3_stats_grid">
					<h3 id="w3l_stats2" class="odometer">0</h3>
					<p>Awards</p>
					<div class="w3layouts_stats_grid1">
						<i class="fa fa-trophy" aria-hidden="true"></i>
					</div>
				</div>
				<div class="col-md-4 w3_stats_grid">
					<h3 id="w3l_stats3" class="odometer">0</h3>
					<p>Students</p>
					<div class="w3layouts_stats_grid1">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //statistics -->
<!-- odometer-script -->
	<script>
		window.odometerOptions = {
		  format: '(ddd).dd'
		};
	</script>
	<script>
		setTimeout(function(){
			jQuery('#w3l_stats1').html(25);
		}, 1500);
	</script>
	<script>
		setTimeout(function(){
			jQuery('#w3l_stats2').html(330);
		}, 1500);
	</script>
	<script>
		setTimeout(function(){
			jQuery('#w3l_stats3').html(542);
		}, 1500);
	</script>
<!-- //odometer-script -->
<!-- featured-services -->
	<div class="services">
		<div class="container">
			<div class="w3layouts_header">
				<h5>PORTAL  <span>BENEFITS</span></h5>
				<p><span><i class="fa fa-book" aria-hidden="true"></i></span></p>
			</div>
			<div class="w3layouts_skills_grids w3layouts_featured_services_grids">
				<div class="col-md-6 w3_featured_services_left">
					<div class="w3_featured_services_left_grid">
						<div class="col-xs-4 w3_featured_services_left_gridl">
							<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
								<i class="hi-icon fa-cubes"> </i>
							</div>
						</div>
						<div class="col-xs-8 w3_featured_services_left_gridr">
							<h4>lacinia vehicula </h4>
							<p>Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="w3_featured_services_left_grid">
						<div class="col-xs-4 w3_featured_services_left_gridl">
							<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
								<i class="hi-icon fa-globe"> </i>
							</div>
						</div>
						<div class="col-xs-8 w3_featured_services_left_gridr">
							<h4>tincidunt urna </h4>
							<p>Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 w3_featured_services_right">
					<img src="images/3.jpg" alt=" " class="img-responsive" />
				</div>
				<div class="col-md-6 w3_featured_services_right">
					<img src="images/4.jpg" alt=" " class="img-responsive" />
				</div>
				<div class="col-md-6 w3_featured_services_left">
					<div class="w3_featured_services_left_grid">
						<div class="col-xs-4 w3_featured_services_left_gridl">
							<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
								<i class="hi-icon fa-gear"> </i>
							</div>
						</div>
						<div class="col-xs-8 w3_featured_services_left_gridr">
							<h4>nullam elementum </h4>
							<p>Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="w3_featured_services_left_grid">
						<div class="col-xs-4 w3_featured_services_left_gridl">
							<div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
								<i class="hi-icon fa-hotel"> </i>
							</div>
						</div>
						<div class="col-xs-8 w3_featured_services_left_gridr">
							<h4>ullamcorper nisl</h4>
							<p>Maecenas bibendum nisi purus, in ullamcorper nisl aliquam id.</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //featured-services -->
<!-- subscribe -->
	<div class="footer-top">
		<div class="container">
			<div class="col-md-4 welcome">
				<h3>Andragogy</h3>
				<p>The opportunity to help students learn and grow. Come be a part of our schools, whether as an involved parent, a student, a community volunteer, or a partner. Pulling together, we can accomplish our goal.</p>
			</div>
			<div class="col-md-3 address">
				<h3>Address</h3>
					<p>Eiusmod Tempor inc
						<span>St Dolore Place,Kingsport 56777.</span>
					</p>
					<p class="phone">Phone : +1 123 456 789
						<span>Email : <a href="https://www.51qianduan.com/" target="_blank">51前端</a></span>
						<span>FAX : <a href="https://www.51qianduan.com/" target="_blank">51前端</a></span>
					</p>
			</div>
			<div class="col-md-5 wthree-subscribe">
				<h3>Newsletter </h3>
				<p>Receive the latest useful information, daily.</p>
				<div class="w3-agileits-subscribe-form">
					<form action="#" method="post">
						<input type="text" placeholder="Email" name="Subscribe" required="">
						<button class="btn1">Subscribe</button>
					</form>
				</div>
				<div class="agile_header_social">
					<ul class="agileits_social_list">
						<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
					</ul>
				</div>
			</div>
				<div class="clearfix"></div>
		</div>
	</div>
<!-- //subscribe -->
<!-- copy-right -->
	<div class="copy-right-grids">
		<div class="container">
			<div class="copy-left">
				<p class="footer-gd">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
				<div class="clearfix"></div>
		</div>
	</div>
<!-- //copy-right -->
<!-- start-smooth-scrolling -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smooth-scrolling -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
			});
	</script>
<!-- //here ends scrolling icon -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到