藍色簡潔風格的專業商務企業整站網站源碼下載



7 27 10



模板描述:藍色簡潔風格 專業商務企業 整站網站,藍色簡潔風格的專業商務企業整站網站源碼下載html模板下載

代碼結構

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/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">

2. 引入JS

<script src="js/jquery.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/wow.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

3. HTML代碼

<!--header start here-->
<div class="header">
	<div class="container head-nav-back">
		<div class="header-main">
			<div class="logo">
				<a href="index.html"> <img src="images/logo.png" alt=""/> </a>
			</div>
			<div class="navg">
				<span class="menu"> <img src="images/icon.png" alt=""/></span>
				<ul class="res">
					<li><a class="active" href="index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="service.html">Services</a></li>
					<li><a href="solution.html">Solutions</a></li>
					<li><a href="Project.html">Projects</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
				 <script>
                              $( "span.menu").click(function() {
                                                                $(  "ul.res" ).slideToggle("slow", function() {
                                                                 // Animation complete.
                                                                 });
                                                                 });
                 </script>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--header end here-->
<!--banner start here-->
<div class="banner">
	<div class="container">
		<div class="banner-main">
			<div class="col-md-6 banner-left">
				<a href="#">Duis eu dolor enim</a>
				<div class="lobo">
					<h3>SED LOBORTIS ERAT!</h3>
					<P>MALESUADA NUNC AVE UNIKE MORI<br>NENATIS EROS QENIMCE ULLA.</P>
				</div>
			</div>
			<div class="col-md-6 banner-right">
				<img src="images/ba-img.png" alt="" />
			</div>
		   <div class="clearefix"> </div>
		</div>
	</div>
</div>
<!--banner end here-->
<!--info-grid start here-->
<div class="info-grid wow bounce" data-wow-delay="0.1s">
	<div class="container">
		<div class="info-grid-main">
			<div class="col-md-4 info-grids-cr wow bounceIn" data-wow-delay="0.4s">
				<div class="info-top">
					<h3>LIPSUM <span class="gd-clr"> MAECAS PORTA</span> </h3>
				</div>
				<div class="info-bott">
					<img src="images/c1.jpg" alt=""/>
					<p>Morbi faucibus diam tortor in rhoncus loremauris quis lectus a odio unikeut sepeenenatis eros qenim ullamcper ut dapialiquet.</p>
				    <h5>Sem commodo erat interdum pharetra aecenas porttitor auctor dapibus.</h5>
				</div>
				<div class="infogrid-bwn">
					<a href="#">READ MORE</a>
				</div>
				<div class="gd-tl-tip"> </div>
			</div>
			<div class="col-md-4 info-grids-cr wow bounceIn" data-wow-delay="0.4s">
				<div class="info-top">
					<h3>FUSCE <span class="gd-clr"> ELIT QUIS LIBERO</h3></span>
				</div>
				<div class="info-bott">
					<img src="images/c2.jpg" alt=""/>
				    <p>Nullam at nisl elit, ut interdum leodui libero, luctus ut dictum quis, elementum id neque. Suspendisse tempus felis cursus lectus. </p>
			        <h5>Curabitur gravida est cursus nunc rhoncus ut interdum augue consequat.s</h5>
				</div>
				<div class="infogrid-bwn">
					<a href="#">READ MORE</a>
				</div>
				<div class="gd-tl-tip"> </div>
			</div>
			<div class="col-md-4 info-grids-cr wow bounceIn" data-wow-delay="0.4s">
				<div class="info-top">
					<h3>ETIAM <span class="gd-clr"> VULPUTATE PLACE</h3></span>
				</div>
				<div class="info-bott">
					<img src="images/c3.jpg" alt=""/>
					<p>Quisque consectetur turpis eget mi cursus pulvinar. Suspendisse potentiorbi in odio dolor  molestie elementum commodo lobortis.</p>
				    <h5>In placerat nisl at magna ultricies eu feugiat ipsum gravida.</h5>
				</div>
				<div class="infogrid-bwn">
					<a href="#">READ MORE</a>
				</div>
				<div class="gd-tl-tip"> </div>
			</div>
		  <div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--info-grid end here-->
<!--movergrid start here-->
<div class="flex-slider  wow bounceInLeft" data-wow-delay="0.4s">
	<div class="container">
	<ul id="flexiselDemo4">
				<li>
				    <div class="grid">
						<h3>NULLAM ANISL EGET</h3>
								<div class="mov-bwn">
									<a href="#">07-08-2014</a>
								</div>
								<p>Mauris gravida libero at massa hendrerit eutincidunt massa vestibulum....</p>
						</div>
				</li>
				<li>
				    <div class="grid">
						<h3>NULLAM ANISL EGET</h3>
								<div class="mov-bwn">
									<a href="#">07-08-2014</a>
								</div>
								<p>Mauris gravida libero at massa hendrerit eutincidunt massa vestibulum....</p>
						</div>
				</li>
				<li>
				   <div class="grid">
						<h3>NULLAM ANISL EGET</h3>
								<div class="mov-bwn">
									<a href="#">07-08-2014</a>
								</div>
								<p>Mauris gravida libero at massa hendrerit eutincidunt massa vestibulum....</p>
						</div>
				</li>
	</ul>
	</div>
	<script type="text/javascript">
				 $(window).load(function() {
					$("#flexiselDemo4").flexisel({
						visibleItems: 3,
						animationSpeed: 1000,
						autoPlay: true,
						autoPlaySpeed: 3000,    		
						pauseOnHover: true,
						enableResponsiveBreakpoints: true,
				    	responsiveBreakpoints: { 
				    		portrait: { 
				    			changePoint:480,
				    			visibleItems: 1
				    		}, 
				    		landscape: { 
				    			changePoint:640,
				    			visibleItems: 2
				    		},
				    		tablet: { 
				    			changePoint:768,
				    			visibleItems: 3
				    		}
				    	}
				    });
				});
			   </script>
</div>
<!--movegrid end here-->
<!--footer start here-->
<div class="footer">
	<div class="container">
		<div class="footer-main">
			<div class="col-md-4 footer-grid wow bounceIn" data-wow-delay="0.4s">
			  <h3>TRISTIQUE AT DOLOR</h3>
			  <ul class="ftr-list">
			  	<li><a href="#">Quisque consequat mattis sapien cursus </a></li>
			  	<li><a href="#">Etiam convallis turpis sit amet turpis ho</a></li>
			  	<li><a href="#">Duis sit amet diam eget lorem faucibus</a></li>
			  	<li><a href="#">Maecenas sed ante sit amet leo pharetra</a></li>
			  	<li><a href="#">Aliquam fermentum laoreet velit, eget </a></li>
			  	<li><a href="#">Suspendisse mattis augue at ante com</a></li>
			  	<li><a href="#">Ut porta blandit mauris quis ultrices felis</a></li>
			  </ul>
			</div>
			<div class="col-md-4 footer-grid wow bounceIn" data-wow-delay="0.4s">
			  <h3>QUISQUE SOLLICIDIN ERAT</h3>
			  <img src="images/c4.jpg" alt=""/>
			  <p>Proin id mi et dui aliquam pretium at sit amet lorem. Vivamus odio mauris ultrices orta at congue a, consequat a diam. </p>
			  <div class="ftr-bwn">
			<a href="#" class="hvr-pulse">Read More</a>
			  </div>
			</div>
			<div class="col-md-4 footer-grid wow bounceIn" data-wow-delay="0.4s">
			  <h3>INEN NISLMI EGETCOM</h3>
			  <P>Etiam euismod orci sit amet nunc vestibulum et porttitor magna varius sit amet facilisis eros vestibulum vel.</P>
			  <h5>EMAIL US:<br> <a href="mailto:[email protected]">[email protected]</a></h5>
			  <h6>(000)5555 555555</h6>
			  <h5>FOLLOW US ON:</h5>
			  <ul class="img-sprit">
			  	<li><a class="foot" href="#"> </a></li>
			  	<li><a class="fa" href="#"> </a></li>
			  	<li><a class="tw" href="#"> </a></li>
			  	<li><a class="in" href="#"> </a></li>
			  	<li><a class="t" href="#"> </a></li>
			  </ul>
			</div>
		  <div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--footer end here-->
<!--copyrights start here-->
<div class="copyright">
	<div class="container">
		<div class="copyright-main wow bounceInLeft" data-wow-delay="0.4s">
			<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
		</div>
	</div>
</div>
<!--copyrights end here-->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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