黑色大风自行车商城自适应网页设计模板下载

代码部署教程

1. 引入CSS

<link href=”css/bootstrap.css” rel=’stylesheet’ type=’text/css’ />
<link href=”css/style.css” rel=’stylesheet’ type=’text/css’ />

2. 引入JS

<script src=”js/jquery-1.11.0.min.js”>
</script>

<script src=”js/responsiveslides.min.js”>

</script>

<script type=”text/javascript” src=”js/jquery.flexisel.js”>

</script>

<script src=’http://v7.cnzz.com/stat.php?id=155540&web_id=155540′ language=’JavaScript’ charset=’gb2312′>

</script>

3. HTML代码

<!– Header Starts Here –>
<div class=”header”>

<div class=”container”>

<div class=”header-top”>

<div class=”logo”>

<a href=”index.html”>

<img src=”images/logo.png”>

</a>

</div>

<span class=”menu”>

</span>

<div class=”clear”>

</div>

<div class=”navigation”>

<ul class=”navig”>

<li>

<a href=”bikes.html”>

Bikes</a>

</li>

<li>

<a href=”best.html”>

Best Buy</a>

</li>

<li>

<a href=”bikes.html”>

Offers</a>

</li>

<li>

<a href=”best.html”>

Accessories</a>

</li>

<li>

<a href=”contact.html”>

Contact</a>

</li>

<li>

<a href=”about.html”>

About Us</a>

</li>

</ul>

<script>

$( “span.menu” ).click(function() {
$( “.navigation ul.navig” ).slideToggle( “slow”, function() {
// Animation complete.
});
});
</script>

</div>

<div class=”clearfix”>

</div>

</div>

<!– Banner Slide Starts Here –>

<div class=”slider”>

<!– Slideshow 3 –>

<script>

// You can also use “$(window).load(function() {”
$(function () {
// Slideshow 3
$(“#slider3″).responsiveSlides({
manualControls: ‘#slider3-pager’,
});
});
</script>

<ul class=”rslides” id=”slider3″>

<li>

<div class=”banner”>

<h1>

What a beautiful bike</h1>

<h2>

timeless, atmospheric<br>

& uncredible bikes!</h2>

</div>

</li>

<li>

<div class=”banner banner2″>

<h1>

What a beautiful bike</h1>

<h2>

timeless, atmospheric<br>

& uncredible bikes!</h2>

</div>

</li>

<li>

<div class=”banner banner1″>

<h1>

What a beautiful bike</h1>

<h2>

timeless, atmospheric<br>

& uncredible bikes!</h2>

</div>

</li>

</ul>

<ul id=”slider3-pager”>

<li>

<a href=”#”>

<img src=”images/device3.jpg” alt=””>

</a>

</li>

<li>

<a href=”#”>

<img src=”images/device2.jpg” alt=””>

</a>

</li>

<li>

<a href=”#”>

<img src=”images/device1.jpg” alt=””>

</a>

</li>

</ul>

<div class=”clearfix”>

</div>

</div>

<!– Banner Slide Ends Here –>

<!– Best Seller Starts Here –>

<div class=”best-seller”>

<div class=”best-seller-row”>

<div class=”seller-column”>

<div class=”sale-box”>

<span class=”on_sale title_shop”>

bestseller</span>

</div>

<img src=”images/biscyle1.jpg” alt=”” class=”seller-img”>

</div>

<div class=”seller-column1″>

<h2>

Sale</h2>

<span class=”sale-nip”>

</span>

<h4>

Bicycle RetroSyperb Vii #1</h4>

<small>

by Rodriguez Else</small>

<p>

299.99$</p>

<div class=”price”>

<a href=”single.html”>

Add to Shopping bag</a>

<span class=”rating”>

Rating: 5.0 <i class=”ratings”>

</i>

</span>

</div>

<p class=”customer”>

Ask the Customer a Question</p>

</div>

<div class=”clearfix”>

</div>

</div>

<div class=”biseller-info”>

<ul id=”flexiselDemo3″>

<li>

<div class=”biseller-column”>

<img src=”images/sm1.jpg” alt=”” class=”veiw-img”>

<div class=”veiw-img-mark”>

<a href=”single.html”>

Add to Cart</a>

</div>

<div class=”biseller-name”>

<h4>

Sport Bicycle 988</h4>

<small>

by Enrique Salmo</small>

</div>

<div class=”biseller-name1″>

<p>

139.99$</p>

</div>

<div class=”clearfix”>

</div>

<div class=”price-s”>

<a href=”single.html”>

Add to Shopping bag</a>

</div>

</div>

</li>

<li>

<div class=”biseller-column”>

<img src=”images/sm3.jpg” alt=”” class=”veiw-img”>

<div class=”veiw-img-mark”>

<a href=”single.html”>

Add to Cart</a>

</div>

<div class=”biseller-name”>

<h4>

Classic Bicycle </h4>

<small>

by Ankino Frique</small>

</div>

<div class=”biseller-name1″>

<p>

1 219.99$</p>

</div>

<div class=”clearfix”>

</div>

<div class=”price-s”>

<a href=”single.html”>

Add to Shopping bag</a>

</div>

</div>

</li>

<li>

<div class=”biseller-column”>

<img src=”images/sm4.jpg” alt=”” class=”veiw-img”>

<div class=”veiw-img-mark”>

<a href=”single.html”>

Add to Cart</a>

</div>

<div class=”biseller-name”>

<h4>

Retro Bicycle #2</h4>

<small>

by Enrique Salmo</small>

</div>

<div class=”biseller-name1″>

<p>

899.99$</p>

</div>

<div class=”clearfix”>

</div>

<div class=”price-s”>

<a href=”single.html”>

Add to Shopping bag</a>

</div>

</div>

</li>

<li>

<div class=”biseller-column”>

<img src=”images/biscyle1.jpg” alt=”” class=”veiw-img”>

<div class=”veiw-img-mark”>

<a href=”single.html”>

Add to Cart</a>

</div>

<div class=”biseller-name”>

<h4>

Classic Bicycle </h4>

<small>

by Marco Spielmann</small>

</div>

<div class=”biseller-name1″>

<p>

1 219.99$</p>

</div>

<div class=”clearfix”>

</div>

<div class=”price-s”>

<a href=”single.html”>

Add to Shopping bag</a>

</div>

</div>

</li>

</ul>

</div>

</div>

<script type=”text/javascript”>

$(window).load(function() {
$(“#flexiselDemo3″).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>

</div>

<!— fOOTER Starts Here —>

<div class=”container”>

<div class=”footer”>

<a href=””>

Browse shop</a>

</div>

<div class=”footer-top”>

<ul class=”bottom-list”>

<li>

<a href=”#”>

terms & conditions</a>

</li>

<li>

<a href=”#”>

return policy</a>

</li>

<li>

<a href=”#”>

reviews</a>

</li>

<li>

<a href=”#”>

about shop</a>

</li>

<li>

<a href=”#”>

secure payment</a>

</li>

</ul>

</div>

<ul class=”payment-list”>

<li>

<i class=”paypal”>

</i>

</li>

<li>

<i class=”wi”>

</i>

</li>

<li>

<i class=”visa”>

</i>

</li>

<li>

<i class=”amazon”>

</i>

</li>

<li>

<i class=”sm”>

</i>

</li>

</ul>

<p class=”copyright”>

Copyright &copy; 2014.Company name All rights reserved.<a target=”_blank” href=”http://www.cxvn.com//moban/”>

网页模板</a>

</p>

</div>

<!— fOOTER Starts Here —>

<div style=”display:none”>

<script src=’http://v7.cnzz.com/stat.php?id=155540&web_id=155540′ language=’JavaScript’ charset=’gb2312′>

</script>

</div>

下载地址

立即下载