女生个人网页设计模板下载

模板描述：女生花语精美 个人介绍网页 模板下载，女生花语精美的个人介绍网页模板下载html模板下载

代码部署教程

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

<link href=’http://fonts.googleapis.com/css?family=Lato:100,300italic,400,700,900,300italic,700italic,900italic’ rel=’stylesheet’ type=’text/css’>

<link href=’http://fonts.googleapis.com/css?family=Raleway:400,200,900,800,700,600,500,300,100′ rel=’stylesheet’ type=’text/css’>

2. 引入JS

<script src="js/jquery.min.js">

</script>

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

</script>

<script type="text/javascript" src="./js/move-top.js">

</script>

<script type="text/javascript" src="./js/easing.js">

</script>

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

</script>

3. HTML代码

<!—->
<div class="header" id="home">
<div class="logo">
<a href="#"><img src="./images/logo.png" alt=""/></a>
</div>
</div>
<div class="top-menu">
<a href="#home"><h4>MRBELLE</h4></a>
<span class="menu"> </span>
<ul>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li><a class="scroll" href="#blog">BLOG</a></li>
<li><a class="scroll" href="#clients">CLIENTS</a></li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
<div class="clearfix"></div>
</ul>
<div class="clearfix"></div>
</div>
<!—->
<div class="about" id="about">
<h2>WELCOME TO MY WORLD</h2>
<b></b>
<div class="container">
<div class="about-grids">
<div class="about-info">
<h4>Short Story</h4>
<label></label>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="about-skill">
<h4>Skills</h4>
<label></label>
<p><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</i></p>
<div class="skill-grid1">
<div class="skill-bar">
<div class="info"><p>WRITING</p><i>70%</i></div>
</div>
<div class="icon"><img src="./images/skil.png"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="skill-grid2">
<div class="skill-bar2">
<div class="info2"><p>SMILING</p><i>90%</i></div>
<div class="clearfix"></div>
</div>
<div class="icon"><img src="./images/skil.png"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="skill-grid3">
<div class="skill-bar3">
<div class="info3"><p>COOKING</p><i>40%</i></div>
<div class="clearfix"></div>
</div>
<div class="icon"><img src="./images/skil.png"></div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<a></a>
</div>
<!—->
<div class="blog" id="blog">
<h2>BLOG</h2>
<small></small>
<p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.varius sit amet lorem</i></p>
<div class="container">
<div class="blog-top" id="top-sec">
<div class="blog-img">
<img src="./images/img1.jpg" alt="" class="img-responsive" />
</div>
<div class="img-desc">
<h4>MY PUPPY MUSTACHE</h4>
<span></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.varius sit amet lorem</p>
<a class="date" href="#">Mar 20</a>
<div class="caption">
<a href="#"><img src="./images/link.png" alt=""/></a>
</div>
<div class="dmnd"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="blog-top" id="top-sec">
<div class="blog-img">
<img src="./images/img2.jpg" alt="" class="img-responsive" />
</div>
<div class="img-desc" >
<h4>MUSIC LIVE CONCERT</h4>
<span></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.varius sit amet lorem</p>
<a class="date" href="#">Apr 05</a>
<div class="caption">
<a href="#"><img src="./images/link.png" alt=""/></a>
</div>
<div class="dmnd"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="blog-top" id="top-sec">
<div class="blog-img img-sec">
<img src="./images/img3.jpg" alt="" class="img-responsive" />
</div>
<div class="img-desc blog-sec" >
<h4>ROAD TO DREAMS</h4>
<span></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.varius sit amet lorem</p>
<a class="date" href="#">Mar 24</a>
<div class="caption">
<a href=""><img src="./images/link.png" alt=""/></a>
</div>
<div class="dmnd"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="load"><a href="#">Load More</a></div>
</div>
</div>
<!—->
<div class="client" id="clients">
<h2>WHAT THEY SAY</h2>
<small></small>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
});
});
</script>
<div class="container2">
<div class="slider">
<ul class="rslides" id="slider1">
<li>
<div class="person1"></div>
<div class="about-add-grid">
<p>" Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#"><b>Victoiria Davydova</b>,Vogue Russia</a>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="person2"></div>
<div class="about-add-grid">
<p>" Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#"><b>Victoiria Davydova</b>,Vogue Russia</a>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
</div>
<!—->
<div class="container">
<ul id="flexiselDemo1">
<li>
<div class="biseller-column">
<img src="./images/s1.png" alt="">
</div>
</li>
<li>
<div class="biseller-column">
<img src="./images/s2.png" alt="">
</div>
</li>
<li>
<div class="biseller-column">
<img src="./images/s3.png" alt="">
</div>
</li>
<li>
<div class="biseller-column">
<img src="./images/s2.png" alt="">
</div>
</li>
<li>
<div class="biseller-column">
<img src="./images/s1.png" alt="">
</div>
</li>
<li>
<div class="biseller-column">
<img src="./images/s3.png" alt="">
</div>
</li>
</ul>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").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>
<script type="text/javascript" src="./js/jquery.flexisel.js"></script>
</div>
<!—->
<div class="contact" id="contact">
<h2>CONTACT ME</h2>
<i class="line"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<form>
<input type="text" placeholder="Name" required/>
<input type="text" placeholder="E-mail" required/>
<textarea placeholder="Message"></textarea>
<input type="submit" value="SEND"/>
</form>
</div>
<!—->
<div class="fotter">
<div class="scale"></div>
<a href=""><img src="./images/ftr.logo.png" alt="" /></a>
<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
</div>
<!—->
</section>
<!—->

下载地址

立即下载