藍色簡潔風格的運動T恤專賣整站網站源碼下載



11 41 14



模板描述:藍色簡潔風格 運動T恤專賣 整站網站,藍色簡潔風格的運動T恤專賣整站網站源碼下載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='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn:400,700' rel='stylesheet' type='text/css'>

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/jquery.wmuSlider.js"></script>

3. HTML代碼

	<!--header-->
	<div class="header">
		<div class="container">
		<!---->
				<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" ></a>
				</div>
				<div class="header-right">
					<ul class="account">
						<li ><a href="account.html">MY ACCOUNT</a> </li> |
						<li><a href="checkout.html" > CHECKOUT </a></li>|
						<li><a href="account.html" >LOGIN </a></li>|
						<li><a href="register.html"> REGISTER </a></li>
					</ul>
			<div class="header-bottom">
				<div class="top-nav">
					<span class="menu"> </span>
					<ul>
						<li class="active"><a href="index.html">HOME</a> </li>
						<li><a href="product.html" > PRODUCTS</a></li>
						<li><a href="404.html" >  BLOGS  </a></li>
						<li><a href="contact.html">CONTACT </a></li>
					</ul>
					<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
			</script>				
		</div>
		<a href="#" class="cart">CART     IDR 0.00 </a>
		<div class="clearfix"> </div>
		</div>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<!---->
	<div class="container">
	<!--banner-->
	<a href="single.html" class="ban"><div class="banner ">	
		  <div class="wmuSlider example1">
			   <div class="wmuSliderWrapper">
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">	
						<div class="short" >
							<img class="img-responsive" src="images/sh.png" alt="" >
						 </div>
						   <div class="month">
							<h4>check out our most favorited & 
bestselling product for this month!!</h4>
							<div class="month-grid">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
								<div class="banner-btns">
									<span class="detail" href="#">Detail</span>
									<span class="buy" href="#">Buy Product</span>
								</div>
							</div>
						   </div>
				   		 <div class="clearfix"> </div>
				   	 </div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">	
						<div class="short" >
							<img class="img-responsive" src="images/sh.png" alt="" >
						 </div>
						   <div class="month">
							<h4>check out our most favorited & 
bestselling product for this month!!</h4>
							<div class="month-grid">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
								<div class="banner-btns">
									<span  >Detail</span>
									<span class="buy">Buy Product</span>
								</div>
							</div>
						   </div>
				   		 <div class="clearfix"> </div>
				   	 </div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;"> 
				   	<div class="banner-wrap">	
						<div class="short" >
							<img class="img-responsive" src="images/sh1.png" alt="" >
						 </div>
						   <div class="month">
							<h4>check out our most favorited & 
bestselling product for this month!!</h4>
							<div class="month-grid">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
								<div class="banner-btns">
									<span href="#">Detail</span>
									<span class="buy" >Buy Product</span>
								</div>
							</div>
						   </div>
				   		 <div class="clearfix"> </div>
				   	 </div>
			</article>
			</div>
		</div>
		<!---->
		  <script src="js/jquery.wmuSlider.js"></script> 
			  <script>
       			$('.example1').wmuSlider({
					 pagination : false,
				});         
   		     </script> 	
		</div>   </a>
	</div>
	</div>
	<!---->
	<div class="content">	
		<div class="container">
			<div class="content-top">
				<h5 class="welcome">WELCOME TO MOOROODOOL</h5>
				<div class="search">
					<form>
						<input type="text" value="type your search here..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
						<input type="submit" value="">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>	
			<!---->
			<div class="content-middle">
				<div class="middle-content">
					<div class="middle">
						<h3>NEW YEAR’S SALE</h3>
						<p>discount up to <b>70%</b> for<span>our old products</span></p>
						<p class="from">from january 1st 2014 to march 30th 2014</p>
					</div>
						<a href="single.html" class="get">GET THEM HERE!!!</a>
				</div>
					<div class="clearfix"> </div>
			</div>
				<!---->
				<div class="content-bottom">
					<div class="col-md-4 bottom-content">
						<a href="single.html"><img class="img-responsive" src="images/pi.jpg" alt="" >
							<p class="tun">TUNDA BESOK</p>
							<p class="best">BEST <span>SELLER</span></p>
							<p class="number">IDR<span>125.000</span></p>
							<div class="pro-grid">
								<p>LOOKS VS PERSONALITY</p>
								<b>T-shirt</b>
									<div class="pro-btns">
										<span class="detail" >Detail</span>
										<span class="buy-in" >ADD TO CART</span>
									</div>
							</div>
						</a>			
					</div>
					<div class="col-md-4 bottom-content act">
						<a href="single.html"><img class="img-responsive" src="images/pi1.jpg" alt="" >
						<p class="tun">LOOKS VS PERSONALITY</p>
						<p class="number">IDR<span>125.000</span></p>
						<div class="pro-grid">
								<p>LOOKS VS <span>PERSONALITY</span></p>
								<b>T-shirt</b>
									<div class="pro-btns">
										<span class="detail" >Detail</span>
										<span class="buy-in" >ADD TO CART</span>
									</div>
							</div>
						</a>			
					</div>
					<div class="col-md-4 bottom-content ten">
						<a href="single.html"><img class="img-responsive" src="images/pi2.jpg" alt="" >
						<p class="tun">WHERE AM I?</p>
						<p class="number">IDR<span>125.000</span></p>
						<div class="pro-grid">
								<p>LOOKS VS PERSONALITY</p>
								<b>T-shirt</b>
									<div class="pro-btns">
										<span class="detail" >Detail</span>
										<span class="buy-in" >ADD TO CART</span>
									</div>
							</div>
						</a>			
					</div>
					<div class="clearfix"> </div>
				</div>
				<!---->
				<div class="grid-top-in">
				<div class="grid-top">
					<div class="col-md-4 top-grid ">
						<h5>ABOUT MOOROODOOL INC.</h5>
						<p class="sed">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
					</div>
					<div class="col-md-4 top-grid">
						<h5>RETAIL AND WORKSHOP</h5>
							<div class="house">
								<i class="in-house"> </i>
								<div class="add">
								<p>Somewherearoundhere Street no 69</p>
									<p>Town, City</p>
									<p>Country</p>
									<p>12345</p>
								</div>
							<div class="clearfix"> </div>
							</div>
							<div class="house">
								<i class="in-house in-on"> </i>
								<div class="add">
									<p>+6281312015169</p>
								</div>
							<div class="clearfix"> </div>
							</div>
					</div>
					<div class="col-md-4 top-grid">
						<h5>GET SOCIAL WITH US!</h5>
							<ul class="social-in">
								<li><a href="#"><i> </i></a></li>						
								<li><a href="#"><i class="thumblr"> </i></a></li>
								<li><a href="#"><i class="pin"> </i></a></li>
							</ul>
							<ul class="social-in">
								<li><a href="#"><i class="twitter"> </i></a></li>
								<li><a href="#"><i class="dot"> </i></a></li>
							</ul>
							<div class="clearfix"> </div>
				</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!---->
			<div class="footer">
				<div class="container">
					 <p class="footer-grid">Copyright &copy; 2015 Mooroodool Template by  <a href="http://w3layouts.com/" 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 href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
			</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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