橙色簡潔風格的科研機構企業網站源碼下載



8 28 10



模板描述:橙色簡潔風格 科研機構 企業網站,橙色簡潔風格的科研機構企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="http://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="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link href="//fonts.googleapis.com/css?family=Oranienbaum" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Aguafina+Script" rel="stylesheet">

2. 引入JS

<script src="js/jquery-2.2.3.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/bootstrap.js"></script>
<script defer src="js/jquery.flexslider.js"></script>

3. HTML代碼

	<!-- header -->
	<div class="header-w3layoutstop">
		<div class="container">  
			<div class="hdr-w3left navbar-left">
				<p><span class="fa fa-mobile"></span> +040 354 658 252 </p> 
			</div>
			<div class="w3ls-bnr-icons social-w3licon 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 behance"><i class="fa fa-behance"></i></a> 
			</div>			
		</div>
	</div>
	<!-- 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">SCIENCE <span>Study<span></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 class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
								<ul class="dropdown-menu agile_short_dropdown">
									<li><a href="icons.html">Icons</a></li>
									<li><a href="typography.html">Typography</a></li>
								</ul>
							</li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div> 
				<div class="clearfix"> </div>  
			</div>
		</div>	
	</div>	
	<!-- //navigation -->
	<!-- //header -->
	<!-- banner -->
	<div class="w3ls-banner">
		<!-- banner-text -->
		<div class="banner-text"> 
			<div class="flexslider">
				<ul class="slides">
					<li>
						<h2>Nam id lorem ut ex venenatis sagittis </h2>
						<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nulla ligula.</h5>
					</li>
					<li>
						<h3>Aenean non dui id libero hendrerit</h3>
						<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nulla ligula.</h5>
					</li>
					<li>
						<h3>Maecenas quis tincidunt mi</h3>
						<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non nulla ligula.</h5>
					</li>
				</ul>
			</div>    
		</div> 
		<!-- //banner-text -->  
	</div>	
	<!-- //banner -->
	<!-- ad -->
<div class="container">
<!-- 自適應廣告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
	<!-- services -->
	<div class="services">
		<div class="container">   
			<h3 class="agileits-title">Services</h3>
			<p class="agile-p">Pellentesque habitant morbi tristique senectus et netus et malesuada fames rutrum fringilla fermentum ac turpis egestas auris rutrum fringilla fermentum. Donec tincidunt, eros quis. </p>
			<div class="w3-services-grids">
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-comment-o" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Vaesent purus</h4>
							<p>Donec non nibh in dui sagittis finibus. Duis suscipit arcu vel rhoncus molestie. </p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-heart-o" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Suscipit duis </h4>
							<p>Nibh in dui sagittis donec non finibus. Duis suscipit arcu vel rhoncus molestie. </p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-clone" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Tempor purus</h4>
							<p>Sagittis donec non nibh in dui finibus. Duis suscipit arcu vel rhoncus molestie. </p>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 w3l-services-grid">
					<div class="w3l-services-text">
						<div class="w3ls-services-img">
							<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Pra tempor</h4>
							<p>Arcu vel dui sagittis donecnon finibus. Duis suscipit rhoncus molestie. </p>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div> 
		</div>
	</div>
	<!-- //services -->
	<!-- about-slid -->
	<div class="about-w3slid jarallax">
		<div class="subscribe-agileinfo"> 
			<div class="container">  
				<h3>Lorem ipsum dolor sit amet</h3>
				<p>Curabitur nec purus eget urna pulvinar placerat. Integer varius est vitae iaculis suscipit. Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus omnis optio </p> 
			</div>
		</div>
	</div>
	<!-- //about-slid --> 
	<!-- welcome -->
	<div class="welcome"> 
		<div class="container">
			<h3 class="agileits-title">Welcome </h3>
<p class="agile-p">Pellentesque habitant morbi tristique senectus et netus et malesuada fames rutrum fringilla fermentum ac turpis egestas auris rutrum fringilla fermentum. Donec tincidunt, eros quis. </p>			
			<div class="welcome-agileinfo">
				<div class="col-md-7 agile-welcome-left"> 
					<div class="col-sm-6 col-xs-6 welcome-w3imgs">
						<figure class="effect-chico">
							<img src="images/g3.jpg" alt=" " />
							<figcaption>
								<h4>Nam ornare</h4>
								<p>Chico's main fear was missing the morning bus.</p>
							</figcaption>			
						</figure>
						<figure class="effect-chico welcome-img2">
							<img src="images/g4.jpg" alt=" " />
							<figcaption>
								<h4>Nam ornare</h4>
								<p>Chico's main fear was missing the morning bus.</p>
							</figcaption>			
						</figure>
					</div>
					<div class="col-sm-6 col-xs-6 welcome-w3imgs">
						<figure class="effect-chico">
							<img src="images/g2.jpg" alt=" " />
							<figcaption>
								<h4>Nam ornare</h4>
								<p>Chico's main fear was missing the morning bus.</p>
							</figcaption>			
						</figure>
						<figure class="effect-chico welcome-img2">
							<img src="images/g1.jpg" alt=" " />
							<figcaption>
								<h4>Nam ornare</h4>
								<p>Chico's main fear was missing the morning bus.</p>
							</figcaption>			
						</figure>
					</div>
				<div class="clearfix"> </div> 
			</div>
			<div class="col-md-5 agile-welcome-right">
				<h4>Donec posuere cursus nibh. Mauris a sollicitudin metus. Mauris porttitor, dui maximus viverra bibendum</h4>
				<p>Nulla massa magna, luctus at justo et, euismod convallis mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames rutrum fringilla fermentum ac turpis egestas auris rutrum fringilla fermentum. Donec tincidunt, eros quis consectetur maximus, nibh justo pretium diam, id vehicula lacus nunc eu orci. Aliquam molestie, nibh vitae pharetra semper, nunc nisi laoreet diam, et placerat nulla quam non. </p>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames rutrum fringilla fermentum ac turpis egestas auris rutrum fringilla fermentum. Donec tincidunt, eros quis consectetur maximus, nibh justo pretium diam, id vehicula lacus nunc eu orci. Aliquam molestie, nibh vitae . </p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div> 		
	</div>
	<!-- //welcome -->
	<!-- about-slid -->
	<div class="about-w3slid jarallax">
		<div class="sub-agileinfo">
			<div class="container">
				<h3 class="agileits-title w3title1">Get our free newsletter</h3>
				<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est consectetur adipisci velit sed quia non numquam eius.</p>
				<form>
					<input type="email" name="email" placeholder="Email Address" class="user" required="">
					<input type="submit" value="Subscribe">
				</form>
			</div> 
		</div>
	</div>
	<!-- //about-slid --> 
	<!-- services-bottom -->
	<div class="services-bottom">
		<div class="container">
			<div class="agileits-heading">
				<h3 class="agileits-title">Featured Services</h3>
			</div>
			<div class="wthree-services-bottom-grids">
				<div class="col-md-6 wthree-services-left">
					<img src="images/g8.jpg" alt="" />
				</div>
				<div class="col-md-6 wthree-services-right">
					<div class="wthree-services-right-top">
						<h4>Pellentesque ut turpis et eros elementum</h4>
						<p>Nam tempor pharetra egestas. Nam varius condimentum faucibus. Duis eget lobortis felis, id laoreet massa. Donec tempor ex ultrices nisi commodo consectetur. Maecenas a diam cursus, vehicula ligula vel, fringilla libero. Mauris eu nulla mi.</p>
					</div>
					<div class="wthree-services-right-bottom">
						<div class="services-right-bottom-bottom">
							<div class="services-bottom-icon">
								<i class="fa fa-bell" aria-hidden="true"></i>
							</div>
							<div class="services-bottom-info">
								<h5>Nam congue</h5>
								<p>In hac habitasse platea dictumst. Proin et ipsum non augue porttitor mollis eget semper nisl.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="services-right-bottom-bottom">
							<div class="services-bottom-icon">
								<i class="fa fa-asterisk" aria-hidden="true"></i>
							</div>
							<div class="services-bottom-info">
								<h5>Nam congue</h5>
								<p>In hac habitasse platea dictumst. Proin et ipsum non augue porttitor mollis eget semper nisl.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="wthree-services-bottom-grids w3-services-bottom">
				<div class="col-md-6 wthree-services-right">
					<div class="wthree-services-right-top">
						<h4>Pellentesque ut turpis et eros elementum</h4>
						<p>Nam tempor pharetra egestas. Nam varius condimentum faucibus. Duis eget lobortis felis, id laoreet massa. Donec tempor ex ultrices nisi commodo consectetur. Maecenas a diam cursus, vehicula ligula vel, fringilla libero. Mauris eu nulla mi.</p>
					</div>
					<div class="wthree-services-right-bottom">
						<div class="services-right-bottom-bottom">
							<div class="services-bottom-icon">
								<i class="fa fa-bell" aria-hidden="true"></i>
							</div>
							<div class="services-bottom-info">
								<h5>Nam congue</h5>
								<p>In hac habitasse platea dictumst. Proin et ipsum non augue porttitor mollis eget semper nisl.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="services-right-bottom-bottom">
							<div class="services-bottom-icon">
								<i class="fa fa-asterisk" aria-hidden="true"></i>
							</div>
							<div class="services-bottom-info">
								<h5>Nam congue</h5>
								<p>In hac habitasse platea dictumst. Proin et ipsum non augue porttitor mollis eget semper nisl.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 wthree-services-left">
					<img src="images/g6.jpg" alt="" />
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //services-bottom -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-5 col-sm-5 agileinfo_footer_grid">
				<h3 class="agileits-title">About Us</h3>
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
					fugiat nulla pariatur. <span>Excepteur sint occaecat cupidatat non proident 
					sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
			</div>
			<div class="col-md-3 col-sm-3 agileinfo_footer_grid mid-w3l nav2">
				<h3 class="agileits-title">Popular</h3>
				<ul>
					<li><a href="#"><i class="fa fa-arrow-right"></i> Proin placerat</a></li>
					<li><a href="#"><i class="fa fa-arrow-right"></i> Ipsum et rutrum</a></li>
					<li><a href="#"><i class="fa fa-arrow-right"></i> Proin semper utr</a></li>
					<li><a href="#"><i class="fa fa-arrow-right"></i> Ligula sit amet</a></li>
				</ul>
			</div>
			<div class="col-md-4 col-sm-4 agileinfo_footer_grid">
				<h3 class="agileits-title">Address</h3>
				<ul>
					<li><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 738 Diamond Road, New York City</li>
					<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:[email protected]">[email protected]</a></li>
					<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> (0123) 0111 111 222</li>
				</ul>
			</div> 
			<div class="clearfix"> </div>
			<div class="w3agile_footer_copy">
				<p>? 2017 Science Study. All rights reserved | Design by <a href="http://www.cqetom.live//" target="_blank">xmoban.cn</a></p>
			</div>
		</div>
	</div>
	<!-- //footer -->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<!-- FlexSlider --> 
	<script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	</script>
	<!-- End-slider-script -->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 網絡科技 科技公司 網絡科技公司 IT公司 網絡公司 軟件公司 IT軟件公司 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 橙色
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子