藍色簡潔風格的兒童教育企業網站源碼下載



5 18 7



模板描述:藍色簡潔風格 兒童教育 企業網站,藍色簡潔風格的兒童教育企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

2. 引入JS

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

	<!-- header -->
	<div class="header-w3layoutstop">
		<div class="container">  
			<div class="hdr-w3left navbar-left">
				<p><span class="glyphicon glyphicon-earphone"></span> +01 999 888 7777 </p> 
			</div>
			<div class="w3ls-bnr-icons social-icon navbar-right">
				<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
				<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a> 
				<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a> 
				<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a> 
			</div> 
		</div>
	</div>
	<!-- //header -->
	<!-- banner -->
	<div class="agileits-banner">
		<div class="bnr-agileinfo"> 
			<!-- navigation -->
			<div class="top-nav w3-agiletop">
				<div class="container">
					<div class="navbar-header w3llogo">
						<button type="button" class="navbar-toggle" 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>  
						<h1><a href="index.html">Learn Kids</a></h1> 
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<div class="w3menu navbar-right">
							<ul class="nav navbar">
								<li><a href="index.html" class="active">Home</a></li>
								<li><a href="about.html">About</a></li> 
								<li><a href="gallery.html">Gallery</a></li>
								<li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span data-letters="Pages">Pages</span><span class="caret"></span></a>
									<ul class="dropdown-menu"> 
										<li><a href="icons.html">Web Icons</a></li>
										<li><a href="codes.html">Short Codes</a></li>
									</ul>
								</li>  
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</div> 
						<div class="clearfix"> </div>  
					</div>
				</div>	
			</div>	
			<!-- //navigation -->
			<div class="banner-w3text w3layouts">
				<div class="container">
					<h2>LEARN KIDS</h2>
					<div class="w3lsmore">
						<a class="w3-agilebtn" href="about.html"><span>More About</span></a>
					</div> 
				</div> 
			</div> 
		</div>
	</div>
	<!-- //banner --> 
	<!-- about -->
	<div class="about">
		<div class="container">
			<div class="about-agileinfo">
				<h3 class="w3ls-title">Welcome</h3>
				<p>Lorem Ipsum was popularised In sit amet sapien eros Integer dolore magna aliqua Temporibus autem quibusdam et aut officiis debitis aut
					rerum necessitatibus saepe eveniet ut et voluptates repudiandae Integer vitae ligula sed lectus consectetur pellentesque blandit nec orci. Nulla ultricies nunc et lorem semper, quis accumsan dui aliquam aucibus sagittis placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			</div>	
		</div>	
	</div>
	<!-- //about -->
	<!-- welcome --> 
	<div class="welcome agileits">  
		<div class="col-md-8 col-sm-8 w3welcome-img"> 
		</div>
		<div class="col-md-4 col-sm-4 w3welcome-right"> 
			<div class="w3welcome-text"> 
				<h5 class="w3l-subtitle">- Our Mission</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at placerat ante.</p>
			</div> 
			<img src="images/img2.jpg" class="img-responsive" alt=""/>
		</div> 
		<div class="clearfix"> </div> 
	</div> 
	<!-- //welcome --> 
	<!-- services -->   	
	<div class="services">   
		<div class="container">
			<h3 class="w3ls-title">Our Services</h3>	 
			<div class="services-agileinfo">  
				<div class="col-md-3 col-sm-3 col-xs-6 services-w3lsgrids"> 
					<div class="services-w3text"> 
						<i class="fa fa-cutlery" aria-hidden="true"></i> 
						<h5>Feeding</h5>  
					</div>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 services-w3lsgrids"> 
					<div class="services-w3text srvs-w3text2"> 
						<i class="fa fa-map" aria-hidden="true"></i> 
						<h5>Playing</h5> 
					</div>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 services-w3lsgrids"> 
					<div class="services-w3text srvs-w3text3"> 
						<i class="fa fa-credit-card" aria-hidden="true"></i>
						<h5>Caring</h5> 
					</div>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6 services-w3lsgrids"> 
					<div class="services-w3text srvs-w3text4"> 
						<i class="fa fa-truck" aria-hidden="true"></i>
						<h5>Learning</h5> 
					</div>
				</div>
				<div class="clearfix"> </div> 
			</div>
		</div>
	</div>
	<!-- //services -->    
	<!-- news -->
	<div class="services news">
		<div class="container">   
			<h3 class="w3ls-title">News & Events</h3>  
			<div class="news-agileinfo">
				<div class="col-sm-4 news-w3lgrids">
					<div class="news-gridtext">
						<div class="news-w3img">
							<a href="single.html"><img src="images/img3.jpg" class="img-responsive zoom-img" alt=""/></a>
						</div>
						<div class="news-w3imgtext">
							<h5 class="w3-agilep">Nov 12, 2016 </h5>
							<h4><a href="single.html">Fringilla</a></h4> 
							<p>In dignissim nunc curabitur eleifend orci eu sapien imperdiet tempus.</p>
							<a class="w3-agilebtn" href="single.html"><span>Read More</span></a>
						</div>
					</div>
				</div>
				<div class="col-sm-4 news-w3lgrids">
					<div class="news-gridtext">
						<div class="news-w3img">
							<a href="single.html"><img src="images/img4.jpg" class="img-responsive zoom-img" alt=""/></a>
						</div>
						<div class="news-w3imgtext">
							<h5 class="w3-agilep">Nov 4, 2016</h5>
							<h4><a href="single.html">Cfringilla</a></h4> 
							<p>Curabitur eleifend orci eu sapien imperdiet tempus dignissim nunc.</p>
							<a class="w3-agilebtn" href="single.html"><span>Read More</span></a> 
						</div>
					</div>
				</div>
				<div class="col-sm-4 news-w3lgrids">
					<div class="news-gridtext">
						<div class="news-w3img">
							<a href="single.html"><img src="images/img5.jpg" class="img-responsive zoom-img" alt=""/></a>
						</div>
						<div class="news-w3imgtext">
							<h5 class="w3-agilep">Sept 21, 2016</h5>
							<h4><a href="single.html">Sectetur</a></h4> 
							<p>Morbi a vehicula risus, vitae interdum orci Praesent acelei turpis.</p> 
							<a class="w3-agilebtn" href="single.html"><span>Read More</span></a>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //news --> 
	<!-- features -->
	<div class="features about">
		<div class="container">   
			<div class="wthree-features-row">
				<div class="col-md-4 features-w3grid">
					<div class="col-xs-3 features-w3lleft">
						<i class="fa fa-phone" aria-hidden="true"></i>
					</div>
					<div class="col-xs-9 features-w3lright"> 
						<h4>CONTACT</h4>
						<p>+01 111 222 3333</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 features-w3grid">
					<div class="col-xs-3 features-w3lleft">
						<i class="fa fa-map-marker" aria-hidden="true"></i>
					</div>
					<div class="col-xs-9 features-w3lright"> 
						<h4>LOCATION</h4>
						<p>Broome St, New York, NY 10002</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 features-w3grid">
					<div class="col-xs-3 features-w3lleft">
						<i class="fa fa-envelope" aria-hidden="true"></i>
					</div>
					<div class="col-xs-9 features-w3lright"> 
						<h4>EMAIL</h4>
						<p><a href="mailto:[email protected]"> [email protected]</a></p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //features -->
	<!-- footer -->
	<div class="footer w3layouts">
		<div class="container">
			<div class="footer-agileinfo">
				<div class="col-md-3 col-sm-6 footer-grid">
					<h3>Useful Info</h3>
					<p>Lorem Ipsum was popularised In sit amet sapien eros Integer dolore magna aliqua Temporibus autem quibusdam et aut officiis debitis aut rerum necess itatibus saepe.</p> 
				</div> 
				<div class="col-md-3 col-sm-6 footer-grid footer-tags">
					<h3>Navigation</h3>
					<ul>
						<li><a href="index.html"><i class="fa fa-angle-right"></i> Home</a></li>
						<li><a href="about.html"><i class="fa fa-angle-right"></i> About</a></li> 
						<li><a href="gallery.html"><i class="fa fa-angle-right"></i> Gallery</a></li>
						<li><a href="contact.html"><i class="fa fa-angle-right"></i> Contact Us</a></li>
					</ul>
				</div>
				<div class="col-md-4 col-sm-6 footer-grid footer-review">
					<h3>Newsletter</h3>
					<p>Maecenas sodales tortor ac ligula ultrices dictum et quis urna neque eget.</p> 
					<form action="#" method="post">
						<input type="email" name="Email" placeholder="Your Email" required="">
						<input type="submit" value="Subscribe"> 
						<div class="clearfix"> </div>
					</form>  
				</div>
				<div class="col-md-2 col-sm-6 footer-grid w3social">
					<h3>Media</h3>
					<ul>
						<li><a href="#"><i class="fa fa-google-plus"></i>Google-plus</a></li>
						<li><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
						<li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
						<li><a href="#"><i class="fa fa-dribbble"></i>Dribbble</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div> 
		</div>
	</div>
	<div class="copy-right wthree"> 
		<div class="container">
			<p>? 2017 Learn Kids. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
		</div>
	</div>  
	<!-- //footer -->
	<!-- modal-about -->
	<div class="modal bnr-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div> 
				<div class="modal-body modal-spa">
					<img src="images/img2.jpg" class="img-responsive" alt=""/>
					<h4>Cras rutrum iaculis enim</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius miet congue consectetur adipiscing. <br>Uisque molestie cursus miet congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam pulvinar metus neque, eget porttitor massa vulputate in. Fusce lacus purus, pulvinar ut lacinia id, sagittis eu mi. Vestibulum eleifend massa sem, eget dapibus turpis efficitur at. </p>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-about -->     
	<!-- start-smooth-scrolling -->
	<script src="js/SmoothScroll.min.js"></script> 
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	
	<!-- smooth-scrolling-of-move-up -->
	<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>
	<!-- //smooth-scrolling-of-move-up -->   
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 教育培訓 教育 培訓 教育培訓行業 教育行業 培訓行業
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子