黑色簡潔風格的財務金融企業網站模板下載



9 33 12



模板描述:黑色簡潔風格 財務金融 企業網站,黑色簡潔風格的財務金融企業網站模板下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script defer src="js/jquery.flexslider.js"></script>

3. HTML代碼

				<div class="header" id="home">
				 <div class="container">	
				   <div class="logo">
					<a href="index.html"><img src="images/logo.png" alt=""/></a>
				</div>
					<div class="top-menu">
						<span class="menu"> </span>
						<ul>
							<li><a class="active" href="index.html">home<lable><img src="images/line.png"></lable>
								</a></li>
							<li><a href="portfolio.html">portfolio</a></li>
							<li><a href="about.html">about</a></li>
							<li><a href="contact.html">contact</a></li>
							<li><a class="last" href="blog.html">blog</a></li>
							</ul>
							</div>
							<!-- script-for-menu -->
		<script>
			$("span.menu").click(function(){
				$(".top-menu ul").slideToggle("slow" , function(){
				});
			});
		</script>
		<!-- script-for-menu -->
							<!-- start search-->
				    <div class="search-box">
					    <div id="sb-search" class="sb-search">
							<form>
								<input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
								<input class="sb-search-submit" type="submit" value="">
								<span class="sb-icon-search"> </span>
							</form>
						</div>
				    </div>
					<!-- search-scripts -->
						<script>
							new UISearch( document.getElementById( 'sb-search' ) );
						</script>
					<!-- //search-scripts -->
				<div class="clearfix"></div>
			</div>
		<!-- script-for-nav -->
				<script>
					$(document).ready(function(){
						$("span.menu").click(function(){
							$(".top-nav ul").slideToggle(1000);
						});
					});
				</script>
		<!-- script-for-nav -->
		<!-- /top-nav -->
                   <div class="clearfix"></div>
				</div>
		 </div>
		  <!-- header-section-ends --> 
	<div class="header-slider" id="home">
		<div class="slider">
			<div class="callbacks_container">
			  <ul class="rslides" id="slider">
				<li>
				  <img src="images/image1.jpg" alt="">
				  <div class="caption">
					<h3>good design is good business</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrice.</p>
					<a class="morebtn" href="#">learn more</a>
				  </div>
				</li>
				<li>
				  <img src="images/image1.jpg" alt="">
					<div class="caption">
					<h3>good business is good design</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrice.</p>
					<a class="morebtn" href="#">learn more</a>
				  </p>
				</li>
				<li>
				  <img src="images/image1.jpg" alt="">
				  <div class="caption">
				    <h3>web design is good design</h3>
				    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrice.</p>
					<a class="morebtn" href="#">learn more</a>
				  </div>
				</li>
				<li>
				  <img src="images/image1.jpg" alt="">
				  <div class="caption">
					<h3>good design is good business</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrice.</p>
					<a class="morebtn" href="#">learn more</a>
				  </div>
				</li>
				<li>
				  <img src="images/image1.jpg" alt="">
				  <div class="caption">
                     <h3>good business is good design</h3>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrice.</p>
					<a class="morebtn" href="#">learn more</a>
				  </div>
				</li>
			  </ul>
		  </div>
	  </div>
	 </div>
	 </div>
	 <!-- content-section-starts -->
	 <div class="content">
	              <div class="ourservice">
						<div class="container">
							<div class="ourservice-header">
							<div class="ourservice-head">
								<h3>our services</h3>
								</div>
								</div>
								<div class="ourservice-grids">
								    <div class="col-md-3 ourservice-grid text-center"> 
								        <img src="images/img1.png" class="img-responsive" alt=""/>
										<h3>web design</h3>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris nec ipsum at lacus commado suscipit.<a href="#">details...</a></p>
										</div>
								    <div class="col-md-3 ourservice-grid text-center"> 
	                                      <img src="images/img2.png" class="img-responsive" alt=""/>
										 <h3>search optimization</h3>
										 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris nec ipsum at lacus commado suscipit.<a href="#">details...</a></p>
										</div>
										<div class="col-md-3 ourservice-grid text-center">
										<img src="images/img3.png" class="img-responsive" alt=""/>
										<h3>online shop</h3>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris nec ipsum at lacus commado suscipit.<a href="#">details...</a></p>
										</div>
										 <div class="col-md-3 ourservice-grid text-center">
										<img src="images/img4.png" class="img-responsive" alt=""/>
										<h3>social media</h3>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris nec ipsum at lacus commado suscipit.<a href="#">details...</a></p>
										</div>
										<div class="clearfix"></div>
									</div>
							</div>
						</div>
						<div class="ourportfoilo">
							<div class="container">	
							<div class="ourportfoilo-head">
								<h3>our portfolio awesome</h3>
								<a href="#">more works</a>
								<div class="clearfix"></div> 
								</div>
								<div class="our-work-section" id="portfolio">
									<div id="portfoliolist">
					<div class="portfolio card mix_all  wow bounceIn"  class="cbp-vm-image" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="#small-dialog" class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim">
						     <img src="images/b1.jpg" alt="" />
						     <div class="b-wrapper"><div class="b-animate b-from-left    b-delay03 ">
						  	<div class="animate-head">
						     	<div class="animate-head-left">
						     		<h4>Ipsum Amet Dolar Sit </h4>
						     		<p>Lorem ipsum dolor sit amet, consectetur adip iscingelitmauris nec ipsum at lacus commodo. </p>
						     	<img src="images/icon-eye.png" alt=""/>
						     	</div>
						        </div>
						  	</div></a>
		                </div>
		                </div>
		                <h4>Ipsum Amet Dolar Sit </h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Mauris nec ipsum at lacus commodo suscipit. </p>
					</div>	
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="#small-dialog1" class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim">
						     <img src="images/b2.jpg" alt="" /><div class="b-wrapper"><div class="b-animate b-from-left    b-delay03 ">
                              <div class="animate-head">
						     	<div class="animate-head-left">
						     		<h4>Ipsum Amet Dolar Sit </h4>
						     		<p>Lorem ipsum dolor sit amet, consectetur adip iscingelitmauris nec ipsum at lacus commodo. </p>
						     	<img src="images/icon-eye.png" alt=""/>
						     	</div>
						     	 </div>
						  	</div></a>
		                </div>
		                </div>
		                <h4>Lorem Ipsum</h4>
		                <p>Lorem ipsum dolor sit amet, consectetur adipiscinglit.</p>
					</div>					
					<div class="portfolio icon mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="#small-dialog3" class="b-link-stripe b-animate-go  thickbox play-icon popup-with-zoom-anim">
						     <img src="images/b3.jpg" alt="" /><div class="b-wrapper"><div class="b-animate b-from-left    b-delay03 ">
						     	<div class="animate-head">
						     	<div class="animate-head-left">
						     		<h4>Ipsum Amet Dolar Sit </h4>
						     		<p>Lorem ipsum dolor sit amet, consectetur adip iscingelitmauris nec ipsum at lacus commodo. </p>
						     	<img src="images/icon-eye.png" alt=""/>
						     	</div>
						     	</div>		  
						  	</div></a>
		                </div>
                  </div>
                  <h4>Ipsum Amet Dolar Sit </h4>
                  	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitmauris nec ipsum at lacus commodo suscipit.</p>
					</div>
					<div class="clearfix"></div>	
					</div>
						  	</div>
					 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
		  <!-- Script for gallery Here -->
					<script type="text/javascript">
					$(function () {
						var filterList = {
							init: function () {
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							},
							hoverEffect: function () {
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							}
						};
						// Run the show!
						filterList.init();
					});	
					</script>
			<!-- Gallery Script Ends -->
			<!-- pop-up-box -->
					  <script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
			<!-- //pop-up-box -->
			<div id="small-dialog" class="mfp-hide">
						<div class="image-top">
							<img src="images/b1.jpg" alt="" />
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour. </p>
						</div>
					</div>
					<div id="small-dialog1" class="mfp-hide">
						<div class="image-top">
							<img src="images/b2.jpg" alt="" />
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
						</div>
					</div>
					<div id="small-dialog3" class="mfp-hide">
						<div class="image-top">
							<img src="images/b3.jpg" alt="" />
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to book.There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</p>
						</div>
					</div>
					<script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
						});
				</script>		
		<div class="clearfix"></div>
	<!-- Work Ends Here -->
								<div class="clearfix"></div>
							</div>
						</div>
						<div class="about">
							<div class="container">
								<div class="about-header">
									<h3>what we offer</h3>
									  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</p>
									  </div>
									  <div class="about-grids">
									  	<div class="col-md-3 about-grid">
									  		  <h3>web design</h3>
								                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida mattis mi vitae tristique. Quisque vel purus tempor, tincidunt tellus ut .</p>
                                                 <a href="#">details</a>
                                                 </div>
                                                 <div class="col-md-3 about-grid1">
									  		  <h3>search optimization</h3>
								                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida mattis mi vitae tristique. Quisque vel purus ittem portellus ut.<a href="#">details...</a></p>
                                                 </div>
                                                 <div class="col-md-3 about-grid">
									  		  <h3>online shop</h3>
								                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida mattis mi vitae tristique. Quisque vel purus tempor, tincidunt tellus ut.</p>
                                                 <a href="#">details</a>
                                                 </div>
                                                 <div class="col-md-3 about-grid1">
									  		  <h3>social media</h3>
								                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida mattis mi vitae tristique. Quisque vel purus tempor, tincidu tellus ut.<a href="#">>>></a></p>
                                                 </div>
									  		<div class="clearfix"></div>
									  	</div>
								</div>
							</div>
							<div class="testimonials">
								<div class="container">
								  <div class="test-header">
                                 	<h3>testimonials</h3>
                                 	<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip at lacus commodo suscipit praesent sollicitudin enim vel mirhon"</p>
											</div>
								<div class="test-grids">
									<h4>Jon Doe / CEO of LoremIpsum</h4>
                              <script type="text/javascript">
								$(function(){
								  SyntaxHighlighter.all();
								});
								$(window).load(function(){
								  $('.flexslider1').flexslider({
									animation: "slide",
									start: function(slider){
									  $('body').removeClass('loading');
									}
								  });
								});
							  </script>
			<section class="slider">
				<div class="flexslider1">
					<ul class="slides">
						<li>
							<ul>
								<li><a href="#"><img src="images/i1.png"></a></li>
								<li><a href="#"><img src="images/i2.png"></a></li>
								<li><a href="#"><img src="images/i3.png"></a></li>
									</ul>
						</li>
						<li>
								<ul>
									<li><a href="#"><img src="images/i2.png"></a></li>
									<li><a href="#"><img src="images/i3.png"></a></li>
									<li><a href="#"><img src="images/i1.png"></a></li>
								</ul>
						</li>
						<li>	
								<ul>
									<li><a href="#"><img src="images/i3.png"></a></li>
									<li><a href="#"><img src="images/i1.png"></a></li>
									<li><a href="#"><img src="images/i2.png"></a></li>
								</ul>
						</li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</section>
			</div>
		</div>
	</div>
	</div>
				            <div class="footer">
								<div class="container">
									<div class="col-md-3 twitter-feeds">
										<h3>twitter feeds</h3>
										<div class="twitter-feed">
										<p>Check out this great theme item</p>
                                         <a href="#">http://tadjalskfj.com</a>
                                          <p>2 weeks ago</p>
                                          </div>
                                          <div class="twitter-feed">
                                          <p>Check out this great theme item</p>
                                         <a href="#">http://tadjalskfj.com</a>
                                          <p>2 weeks ago</p>
                                          </div>
                                          <div class="twitter-feed">
                                          <p>Check out this great theme item</p>
                                         <a href="#">http://tadjalskfj.com</a>
                                          <p>2 weeks ago</p>
									</div>
									</div>
									<div class="col-md-3 new-letter">
										<h3>newsletter</h3>
										<div class="new-letters">
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magna a comm. Ut eget eros mauris, urna.</p>
										</div>
										<h4>Your Email Address</h4>
										<form>
										<input type="text">
										<input type="button" value="sign up">
										</form>
										</div>
										<div class="col-md-3 recent-projects">
											<h3>recent projects</h3>
												<div class="recent-project">
											<div class="recent-img">
												<img src="images/im1.jpg">
												</div>
												<div class="recent-text">
													<p>Sketchy Business Card</p>
                                                       <a href="#">http://tadjalskfj.com</a>
                                                        <p>2 weeks ago</p>
													</div>
													<div class="clearfix"></div>
													</div>
													<div class="recent-project">
													<div class="recent-img">
												<img src="images/im2.jpg">
												</div>
												<div class="recent-text">
													<p>Message Boards in Nature</p>
                                                     <a href="#">http://tadjalskfj.com</a>
                                                      <p>2 weeks ago</p>
													</div>
													<div class="clearfix"></div>
													</div>
													<div class="recent-project">
													<div class="recent-img">
												<img src="images/im3.jpg">
												</div>
												<div class="recent-text">
													<p>Website Design Kit</p>
													<a href="#">http://tadjalskfj.com</a>
													<p>2 weeks ago</p>
													</div>
													<div class="clearfix"></div>
													</div>
											</div>
											<div class="col-md-3 contact">
												<h3>contact</h3>
												<ul>
													<li><i class="phone"></i></li>
														<li><p>1-000-000-0000</p>
															<p>1-000-000-0000</p></li>
												</ul>
												<ul>
													<li><i class="smartphone"></i></li>
														<li><p>1-000-000-0000</p>
															<p>1-000-000-0000</p></li>
												</ul>
												<ul>
													<li><i class="message"></i></li>
														<li><a href="mail-to:[email protected]">[email protected]</a>
                                                            <a href="mail-to:[email protected]">[email protected]</a></li>
												</ul>
												</div>
									<div class="clearfix"></div>
									<div class="footer-bottom">
				 		<p> Copyright &copy;2015  All rights  Reserved | Template by<a href="http://w3layouts.com" target="target_blank">W3Layouts</a></p>
					</div>
                 <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>
				<a class="scroll" href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
                 </div>
			</div>



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 黑色 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 金融 理財 保險 金融公司 理財公司 保險公司 簡潔 簡約 簡單
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表