藍色簡潔風格的網絡視覺作品整站網站源碼下載



8 30 11



模板描述:藍色簡潔風格 網絡視覺作品 整站網站,藍色簡潔風格的網絡視覺作品整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<link href="css/owl.carousel.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.easydropdown.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/hover_pack.js"></script>
<script type="text/javascript" src="js/responsive-nav.js"></script>
<script src="js/jquery.wmuSlider.js"></script>

3. HTML代碼

 <!----start-header---->
		<div class="header">
			<div class="container">
			  <div class="dropdown_box">
				   <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
            			<option value="0">English</option>	
						<option value="1">French</option>
						<option value="2">German</option>
				   </select>
		       </div>
		       <div class="clearfix"></div>
		      <div class="header_top">
				<div class="logo">
				  <a href="index.html"><img src="images/logo.png" alt=""></a>
				</div>
		  		<div class="menu">
					<a class="toggleMenu" href="#"><img src="images/nav_icon.png" alt="" /> </a>
					<ul class="nav" id="nav">
					  <li class="current"><a href="index.html">Home</a></li>
					  <li><a href="about.html">About</a></li>
					  <li><a href="services.html">Services</a></li>
					  <li><a href="blog.html">Blog</a></li>
					  <li><a href="portfolio.html">Portfolio</a></li>
					  <li><a href="404.html">Shortcodes</a></li>
					  <li><a href="contact.html">Contacts</a></li>								
					</ul>
				</div>							
	  			<div class="clearfix"> </div>
			    <!----//End-top-nav---->
			 </div>
			</div>
		</div>
		<!----//End-header---->
		<div class="banner">
		  <div class="banner_container">
       	      <div class="wmuSlider example1">
			     <div class="wmuSliderWrapper">
				  <article style="position: absolute; width: 100%; opacity: 0;"> 
				        <div class="banner_right">
				   	    	<h1>Welcome to <span class="color1">G</span>elios<span class="color1">.</span></h1>
				   	    	<h2>Awesome , Clean & Unique Template</h2>
				   	    	<a href="#" title="Online Reservation" class="btn btn-primary btn-normal btn-inline " target="_self">Read More about gelios</a>
				   	    </div>
					    <div class="clearfix"></div>
					</article>
				    <article style="position: relative; width: 100%; opacity: 1;"> 
				   	  <div class="banner_right">
				   	    	<h1>Welcome to <span class="color1">G</span>elios<span class="color1">.</span></h1>
				   	    	<h2>There are many variations</h2>
				   	    	<a href="#" title="Online Reservation" class="btn btn-primary btn-normal btn-inline " target="_self">Read More about gelios</a>
				   	    </div>
					    <div class="clearfix"></div>
				   </article>
				 </div>
				 <a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
	             <script src="js/jquery.wmuSlider.js"></script> 
				  <script>
	       			$('.example1').wmuSlider();         
	   		     </script> 	           	      
      </div>
     </div>
    </div>
    <div class="banner_text">
    	<div class="container">
    		<ul class="banner_box">
    		   <li class="box_desc">There are many variations of passages of Lorem ipsum available but the majority.</li>
    		   <li class="box_but"><a href="#" title="Download" class="btn1 btn1-primary1" target="_self">Download Now theme</a></li>
    		   <div class="clearfix"> </div>
    		</ul>
    	</div>
    </div>
    <div class="grid_1 text-center">
    	<div class="container">
    	  <div class="col-md-4 box_1">
    	  	<i class="icon1"> </i>
    	  	<h3>Web Design</h3>
    	  	<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
    	  </div>
    	  <div class="col-md-4 box_1">
    	  	<i class="icon2"> </i>
    	  	<h3>Web Development</h3>
    	  	<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
    	  </div>
    	  <div class="col-md-4 box_1">
    	  	<i class="icon3"> </i>
    	  	<h3>Simple and Clean</h3>
    	  	<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
    	  </div>
    	</div>
    </div>
    <div class="grid_2">
    	<h3>Recent Projects</h3>
    	         <div id="owl-demo3" class="owl-carousel owl-carousel2">
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p1.jpg" alt="Lazy Owl Image"><div class="b-wrapper">
</div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p2.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p3.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p4.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p1.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p2.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p3.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="item">
				                	<a href="#" class="b-link-stroke b-animate-go  thickbox">
		                            <img class="lazyOwl" data-src="images/p4.jpg" alt="Lazy Owl Image"><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">Photo 1</h2><p class="b-animate b-from-right    b-delay03 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></a>
   	 							 </div>
				                 <div class="clearfix"> </div>
				 </div>
     </div>
     <div class="grid_1">
     	<h2>From the Blog</h2>
     	<div class="container">
     	  <div class='col-md-4'>
     	    <div class="box_3">
     		  <img src="images/b1.jpg" class="img-responsive" alt=""/>
     		  <div class="box_4">
     		    <a href="#"><h3>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus</a></h3>
     		    <p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
     		    <a href="#"><span class="more">More Reading  &nbsp;<img src="images/arrow.png" alt=""/></span></a>
     		  </div>
     		  <div class="links">
		  		    <ul>
		  				<li><i class="user"> </i><span><a href="#">admin</a></span><div class="clearfix"> </div></li>
		  				<li><i class="calender"> </i><span>Feb 28, 2015</span><div class="clearfix"> </div></li>
		  				<li><i class="comment"> </i><span>20 comments</span><div class="clearfix"> </div></li>
		  		    </ul>
		  	  </div>
     	    </div>
        </div>
         <div class='col-md-4'>
     	    <div class="box_3">
     		  <img src="images/b2.jpg" class="img-responsive" alt=""/>
     		  <div class="box_4">
     		    <a href="#"><h3>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus</a></h3>
     		    <p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
     		    <a href="#"><span class="more">More Reading  &nbsp;<img src="images/arrow.png" alt=""/></span></a>
     		  </div>
     		  <div class="links">
		  		    <ul>
		  				<li><i class="user"> </i><span><a href="#">admin</a></span><div class="clearfix"> </div></li>
		  				<li><i class="calender"> </i><span>Feb 28, 2015</span><div class="clearfix"> </div></li>
		  				<li><i class="comment"> </i><span>20 comments</span><div class="clearfix"> </div></li>
		  		    </ul>
		  	  </div>
     	    </div>
        </div>
        <div class='col-md-4'>
     	    <div class="box_3">
     		  <img src="images/b3.jpg" class="img-responsive" alt=""/>
     		  <div class="box_4">
     		    <a href="#"><h3>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus</a></h3>
     		    <p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
     		    <a href="#"><span class="more">More Reading  &nbsp;<img src="images/arrow.png" alt=""/></span></a>
     		  </div>
     		  <div class="links">
		  		    <ul>
		  				<li><i class="user"> </i><span><a href="#">admin</a></span><div class="clearfix"> </div></li>
		  				<li><i class="calender"> </i><span>Feb 28, 2015</span><div class="clearfix"> </div></li>
		  				<li><i class="comment"> </i><span>20 comments</span><div class="clearfix"> </div></li>
		  		    </ul>
		  	  </div>
     	    </div>
          </div>
        <div class="clearfix"> </div>
      </div>
    </div> 
    <div class="twitter">
   	 <div class="container">
   	 	<h3>Latest Tweets</h3>
   	 	<h4>Check out our Twitter</h4>
   	 	<i class="twt"> </i>
   	 	<p>Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert lollipop marzipan donut apple pie. Cookie cotton candy oat cake sweet roll topping apple pie marzipan.Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert</p>
   	    <span> </span>
   	    <a href="#">Cream Cheesecake </a>
   	 </div>
    </div>
    <div class="new">
      <div class="container">
   		<h3>What New</h3>
   	   <div class="col-md-4 col_3">
   		<ul class="date_grid">
   		  <li class="date_left">
   		  	<div class="date">
				<span>
				 15
				</span>
				 06
			</div>
		  </li>
		  <li class="date_right">
   		  	<p>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
		  </li>
   		  <div class="clearfix"> </div>
	   </ul>
	   <p class="m_1">Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert lollipop marzipan donut apple pie.</p>
	   <a href="#"><span class="more">More Information</span></a>
	  </div>
	  <div class="col-md-4 col_3">
   		<ul class="date_grid">
   		  <li class="date_left">
   		  	<div class="date">
				<span>
				 15
				</span>
				 06
			</div>
		  </li>
		  <li class="date_right">
   		  	<p>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
		  </li>
   		  <div class="clearfix"> </div>
	   </ul>
	   <p class="m_1">Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert lollipop marzipan donut apple pie.</p>
	   <a href="#"><span class="more">More Information</span></a>
	  </div>
	  <div class="col-md-4 col_3">
   		<ul class="date_grid">
   		  <li class="date_left">
   		  	<div class="date">
				<span>
				 15
				</span>
				 06
			</div>
		  </li>
		  <li class="date_right">
   		  	<p>Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus Morbi in dui quis est pulvinar</p>
		  </li>
   		  <div class="clearfix"> </div>
	   </ul>
	   <p class="m_1">Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing. Cookie chupa chups cake dessert lollipop marzipan donut apple pie.</p>
	   <a href="#"><span class="more">More Information</span></a>
	  </div>
	 </div>
   </div>
   <div class="footer">
   	<div class="container">
   		<div class="col-md-3 footer_grid">
   			<img src="images/f_logo.png" alt=""/>
   			<p>Lollipop liquorice lollipop ice cream cheesecake halvah jelly-o. Gummies lollipop macaroon marshmallow icing..</p>
   	        <ul class="footer_links">
   	        	<li><a href="#">Read More</a></li>
   	        	<li><a href="#">About Us</a></li>
   	        </ul>
   	        <ul class="footer_social">
				<li><a href=""> <i class="fb"> </i> </a></li>
				<li><a href=""><i class="tw"> </i> </a></li>
				<li><a href=""><i class="db"> </i> </a></li>
				<li><a href=""><i class="google"> </i> </a></li>
	    	</ul>
	    	<div class="copy">
				<p>&copy; 2015 Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
			</div>
   	    </div>
   	    <div class="col-md-3 footer_grid1">
   		  <h3>From the Blog</h3>
   		  <ul class="list1 list2">
   		  	<li class="list1_img"><img src="images/f1.jpg" class="img-responsive" alt=""/></li>
   		  	<li class="list1_desc">
   		  		<p class="m_3">Morbi in dui quis est.</p>
   		  		<p class="m_2">December 25, 2014</p>
   		  	</li>
   		  	<div class="clearfix"> </div>
   		  </ul>
   		  <ul class="list1 list2">
   		  	<li class="list1_img"><img src="images/f2.jpg" class="img-responsive" alt=""/></li>
   		  	<li class="list1_desc">
   		  		<p class="m_3">Curabitur sit amet mauris.</p>
   		  		<p class="m_2">December 25, 2014</p>
   		  	</li>
   		  	<div class="clearfix"> </div>
   		  </ul>
   		  <ul class="list1">
   		  	<li class="list1_img"><img src="images/f3.jpg" class="img-responsive" alt=""/></li>
   		  	<li class="list1_desc">
   		  		<p class="m_3">Curabitur sit amet mauris.</p>
   		  		<p class="m_2">December 25, 2014</p>
   		  	</li>
   		  	<div class="clearfix"> </div>
   		  </ul>
   	    </div>
   	    <div class="col-md-3 footer_grid1">
   		  <h3>Tags</h3>
   		  <ul class="tags_links">
			<li><a href="#">Web Design</a></li>
			<li><a href="#">Artist Design</a></li>
			<li><a href="#">Modern</a></li>
			<li><a href="#">Responsive</a></li>
			<li><a href="#">Awesome</a></li>
			<li><a href="#">Business</a></li>
			<li><a href="#">Photography</a></li>
			<li><a href="#">Artist Design</a></li>
			<li><a href="#">Modern</a></li>
			<li><a href="#">Responsive</a></li>
		  </ul>
   		</div>
   	    <div class="col-md-3 footer_grid1">
   		  <h3>Flicker Widget</h3>
   		  <ul class="widget_links">
			<li><img src="images/f4.jpg" class="img-responsive" alt=""/></li>
			<li><img src="images/f5.jpg" class="img-responsive" alt=""/></li>
			<li><img src="images/f6.jpg" class="img-responsive" alt=""/></li>
		  </ul>
		  <ul class="widget_links">
			<li><img src="images/f7.jpg" class="img-responsive" alt=""/></li>
			<li><img src="images/f8.jpg" class="img-responsive" alt=""/></li>
			<li><img src="images/f9.jpg" class="img-responsive" alt=""/></li>
		  </ul>
   		</div>
   	</div>
   </div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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