吉他摇滚音乐静态网页模板免费下载

模板描述：粉色大气风格 吉他摇滚音乐 模板下载，粉色大气风格的吉他摇滚音乐网站模板下载html模板下载

代码部署教程

1. 引入CSS

<link href=’//fonts.useso.com/css?family=Bangers’ rel=’stylesheet’ type=’text/css’>
<link href=’//fonts.useso.com/css?family=BenchNine:400,300,700′ rel=’stylesheet’ type=’text/css’>

<link href=’//fonts.useso.com/css?family=Cagliostro’ rel=’stylesheet’ type=’text/css’>

<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />

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

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

<link href=”css/owl.carousel.css” rel=”stylesheet”>

2. 引入JS

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

<script src=”js/bootstrap.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/owl.carousel.js”>

</script>

3. HTML代码

<div class=”header-top” id=”home”>
<div class=”navbar-wrapper”>

<nav class=”navbar navbar-default”>

<div class=”container”>

<!– Brand and toggle get grouped for better mobile display –>

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>

<span class=”sr-only”>

Toggle navigation</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

<span class=”icon-bar”>

</span>

</button>

<div class=”logo”>

<a class=”navbar-brand” href=”index.html”>

Elvis</a>

</div>

</div>

<!– Collect the nav links, forms, and other content for toggling –>

<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>

<ul class=”nav navbar-nav nav-floats1″>

<li>

<a href=”#music” class=”scroll”>

Music</a>

</li>

<li>

<a href=”#videos” class=”scroll”>

Videos</a>

</li>

<li>

<a href=”#events” class=”scroll”>

Events</a>

</li>

<li>

<a href=”#contact” class=”scroll”>

Contact</a>

</li>

</ul>

<ul class=”social nav-floats2″>

<li>

<a href=”#” class=”face”>

</a>

</li>

<li>

<a href=”#” class=”twit”>

</a>

</li>

<li>

<a href=”#” class=”gpls”>

</a>

</li>

<li>

<a href=”#” class=”inst”>

</a>

</li>

</ul>

<ul class=”form_acess nav-floats2″>

<form class=”re-disgn1″>

<input type=”text” name=”s” class=”textbox” value=”Search..” onfocus=”this.value = ”;” onblur=”if (this.value == ”) {this.value = ‘Search…’;}”>

<input type=”submit” value=”” class=”sub”>

</form>

</ul>

<div class=”clearfix”>

</div>

</div>

<!– /.navbar-collapse –>

<div class=”clearfix”>

</div>

</div>

<!– /.container-fluid –>

</nav>

</div>

</div>

<div class=”header-bottom”>

<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>

<!– Indicators –>

<ol class=”carousel-indicators”>

<li data-target=”#myCarousel” data-slide-to=”0″ class=”active”>

</li>

<li data-target=”#myCarousel” data-slide-to=”1″>

</li>

<li data-target=”#myCarousel” data-slide-to=”2″>

</li>

<li data-target=”#myCarousel” data-slide-to=”3″>

</li>

</ol>

<!– Wrapper for slides –>

<div class=”carousel-inner” role=”listbox”>

<div class=”item active”>

<img src=”./images/bn1.jpg” alt=”First slide” class=”img-wid”/>

</div>

<div class=”item”>

<img src=”./images/bn2.jpg” alt=”Second slide” class=”img-wid”/>

</div>

<div class=”item”>

<img src=”./images/bn3.jpg” alt=”Third slide” class=”img-wid”/>

</div>

<div class=”item”>

<img src=”./images/bn4.jpg” alt=”Third slide” class=”img-wid”/>

</div>

</div>

<!– Controls –>

<a class=”left carousel-control” href=”#myCarousel” role=”button” data-slide=”pv”>

<span class=”glyphicon glyphicon-chevron-left” aria-hidden=”true”>

</span>

<span class=”sr-only”>

Previous</span>

</a>

<a class=”right carousel-control” href=”#myCarousel” role=”button” data-slide=”next”>

<span class=”glyphicon glyphicon-chevron-right” aria-hidden=”true”>

</span>

<span class=”sr-only”>

Next</span>

</a>

</div>

<!–our-partners–>

<div class=”our-partners”>

<div class=”container”>

<h2>

our partners</h2>

<div class=”col-md-3 flot-stn2″>

<a href=”#”>

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

</a>

</div>

<div class=”col-md-3 flot-stn2″>

<a href=”#”>

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

</a>

</div>

<div class=”col-md-3 flot-stn2″>

<a href=”#”>

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

</a>

</div>

<div class=”col-md-3 flot-stn2″>

<a href=”#”>

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

</a>

</div>

<div class=”clearfix”>

</div>

</div>

</div>

<!–our-partners–>

<div class=”top-music”>

<div class=”container”>

<div class=”row musi-top”>

<h2>

Top albums</h2>

<div class=”col-md-3 musi-top-grid”>

<img class=”img-circle” src=”images/ms5.jpg” alt=”Generic placeholder image” width=”140″ height=”140″>

<h2>

Austin Mahone</h2>

<p>

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod.</p>

</div>

<!– /.col-lg-4 –>

<div class=”col-md-3 musi-top-grid”>

<img class=”img-circle” src=”images/ms1.jpg” alt=”Generic placeholder image” width=”140″ height=”140″>

<h2>

Patrick Sheehy </h2>

<p>

Duis mollis Lorem Ipsum mentum nibh, ut fermentum massa justo sit.</p>

</div>

<!– /.col-lg-4 –>

<div class=”col-md-3 musi-top-grid”>

<img class=”img-circle” src=”images/ms2.jpg” alt=”Generic placeholder image” width=”140″ height=”140″>

<h2>

Travis Millis</h2>

<p>

Lorem Ipsum mentum nibh, ut fermentum massa justo sit amet risus.</p>

</div>

<!– /.col-lg-4 –>

<div class=”col-md-3 musi-top-grid”>

<img class=”img-circle” src=”images/ms3.jpg” alt=”Generic placeholder image” width=”140″ height=”140″>

<h2>

omen f.t </h2>

<p>

Lorem Ipsum mentum nibh, ut fermentum massa justo sit amet risus.</p>

</div>

<!– /.col-lg-4 –>

</div>

<!– /.row –>

</div>

</div>

<!– START THE FEATURETTES –>

<div class=”features-block” id=”events”>

<div class=”container”>

<h2>

Events</h2>

<div class=”row featurette”>

<div class=”col-md-7 txt-sty1 flot-stn3″>

<h2 class=”featurette-heading”>

First featurette heading. <span class=”text-muted”>

It’ll blow your mind.</span>

</h2>

<p class=”lead”>

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

</div>

<div class=”col-md-5 flot-stn3″>

<img class=”featurette-image img-responsive center-block” src=”images/ev2.jpg” alt=”Generic placeholder image”>

</div>

<div class=”clearfix”>

</div>

</div>

<hr class=”featurette-divider”>

<div class=”row featurette”>

<div class=”col-md-7 col-md-push-5 txt-sty2 flot-stn4″>

<h2 class=”featurette-heading”>

Oh yeah, it’s that good. <span class=”text-muted”>

See for yourself.</span>

</h2>

<p class=”lead”>

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

</div>

<div class=”col-md-5 col-md-pull-7 flot-stn4″>

<img class=”featurette-image img-responsive center-block” src=”images/ev1.jpg” alt=”Generic placeholder image”>

</div>

<div class=”clearfix”>

</div>

</div>

<hr class=”featurette-divider”>

<div class=”row featurette”>

<div class=”col-md-7 txt-sty3 flot-stn5″>

<h2 class=”featurette-heading”>

And lastly, this one. <span class=”text-muted”>

Checkmate.</span>

</h2>

<p class=”lead”>

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

</div>

<div class=”col-md-5 flot-stn5″>

<img class=”featurette-image img-responsive center-block” src=”images/ev3.jpg” alt=”Generic placeholder image”>

</div>

<div class=”clearfix”>

</div>

</div>

</div>

</div>

<div class=”music” id=”music”>

<!–light-box-files –>

<!– requried-jsfiles-for owl –>

<script>

$(document).ready(function() {
$(“#owl-demo”).owlCarousel({
items : 5,
lazyLoad : true,
autoPlay : true,
pagination : false,
});
});
</script>

<!–requried-jsfiles-for owl –>

<!– start content_slider –>

<div class=”container”>

<h2>

Music</h2>

<div id=”example1″>

<div id=”owl-demo” class=”owl-carousel text-center”>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg1.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg2.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg3.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg4.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<!–four–>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg5.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg6.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle ” data-src=”images/msg7.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg8.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg9.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg10.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

</div>

<!–Ten-first-row–>

<script>

$(document).ready(function() {
$(“#owl-demo1″).owlCarousel({
items : 5,
lazyLoad : true,
autoPlay : 900,
pagination : false,
});
});
</script>

<div id=”owl-demo1″ class=”owl-carousel text-center”>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg11.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg12.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg13.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg14.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<!–four–>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg15.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg16.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle ” data-src=”images/msg17.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg18.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg19.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg20.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<!–Ten-second-row–>

</div>

<script>

$(document).ready(function() {
$(“#owl-demo2″).owlCarousel({
items : 5,
lazyLoad : true,
autoPlay : true,
pagination : false,
});
});
</script>

<div id=”owl-demo2″ class=”owl-carousel text-center”>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg21.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg22.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg23.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg24.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<!–four–>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg25.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”./images/msg26.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle ” data-src=”images/msg27.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg28.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg29.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Ipsum</p>

</div>

<div class=”item mar”>

<a href=”single.html”>

<img class=”lazyOwl img-responsive img-circle” data-src=”images/msg30.jpg” alt=”name” />

</a>

<p Class=”track-title”>

Lorem</p>

</div>

<!–Ten-third-row–>

</div>

</div>

</div>

</div>

<div class=”testimonial”>

<div class=”container”>

<h2>

Testimonials</h2>

<div class=”col-md-6 pd-stn1″>

<div class=”test-grid bot”>

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

<div class=”hover-box”>

<p class=”hide-text”>

Enter your text.</p>

<q>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text.</q>

<i class=”bottom”>

</i>

</div>

</div>

</div>

<div class=”col-md-6 pd-stn1″>

<div class=”test-grid top”>

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

<div class=”hover-box”>

<p class=”hide-text”>

Enter your text.</p>

<q>

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text.</q>

<i class=”top”>

</i>

</div>

</div>

</div>

<div class=”clearfix”>

</div>

</div>

</div>

<div class=”footer” id=”contact”>

<div class=”contact-footer”>

<div class=”container”>

<div class=”contact-form”>

<form>

<input type=”text” class=”name” value=”Name” onfocus=”this.value = ”;” onblur=”if (this.value == ”) {this.value = ‘Name’;}”/>

<input type=”text” class=”email” value=”Email” onfocus=”this.value = ”;” onblur=”if (this.value == ”) {this.value = ‘Email’;}”/>

<br>

<br>

<textarea onfocus=”this.value = ”;” onblur=”if (this.value == ”) {this.value = ‘Message’;}”/>

Message</textarea>

<br>

<br>

<input type=”submit” class=”sub2″ value=”Send” />

</form>

</div>

<div class=”fot-bottom”>

<p>

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

www.freemoban.com</a>

</p>

</div>

</div>

</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=”#home” id=”toTop” class=”scroll” style=”display: block;”>

<span id=”toTopHover” style=”opacity: 1;”>

</span>

</a>

</div>

下载地址

立即下载