个人联系名片手机网页模板免费下载

代码部署教程

1. 引入CSS

<link href=”css/style.css” rel=’stylesheet’ type=’text/css’ media=”all” />
<link href=’//fonts.googleapis.com/css?family=Ubuntu:300,700italic,300italic,400,400italic,500,500italic,700′ rel=’stylesheet’ type=’text/css’>

2. 引入JS

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

<script src= “js/moment-2.2.1.js”>

</script>

3. HTML代码

<div class=”wrap”>
<header>

<h1>

Stylish Deco Profile</h1>

</header>

<div class=”profile”>

<div class=”user”>

<div class=”star”>

</div>

<div class=”men”>

<img src=”images/user.png” alt=”” />

</div>

<div class=”pencil”>

</div>

<div id=”dd1″ class=”wrapper-dropdown-3″ tabindex=”1″>

<span>

<img src=”images/menu.png” alt=”Navbar”/>

</span>

<ul class=”dropdown”>

<li>

<a href=”#”>

Alarm</a>

</li>

<li>

<a href=”#”>

Dual Clock</a>

</li>

<li>

<a href=”#”>

Notes</a>

</li>

<li>

<a href=”#”>

Reminder</a>

</li>

<li>

<a href=”#”>

To-Do List</a>

</li>

<li>

<a href=”#”>

World Clock</a>

</li>

</ul>

<script type=”text/javascript”>

function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on(‘click’, function(event){
$(this).toggleClass(‘active’);
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $(‘#dd1’) );
$(document).click(function() {
// all dropdowns
$(‘.wrapper-dropdown-3’).removeClass(‘active’);
});
});
</script>

</div>

<div class=”clear”>

</div>

<h2>

Benicio Del Toro</h2>

</div>

</div>

<div class=”sub-profile”>

<div class=”sp1″>

<div class=”phone”>

<img src=”images/ph.png” alt=””/>

</div>

<div class=”ph-text”>

<span>

Mobile</span>

<p>

+33 6 18 58 92 68</p>

</div>

<div class=”msg”>

<img src=”images/msg.png” alt=””/>

</div>

<div class=”clear”>

</div>

</div>

<div class=”sp2″>

<div class=”mail”>

<img src=”images/mail.png” alt=””/>

</div>

<div class=”mail-text”>

<span>

E-mail</span>

<p>

<a href=”mailto:example@mail.com”>

example@mail.com</a>

</p>

</div>

<div class=”clip”>

<img src=”images/clip.png” alt=””/>

</div>

<div class=”clear”>

</div>

</div>

</div>

<div class=”social”>

<ul>

<li>

<a href=”#”>

<span class=”fb”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”twit”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”google”>

</span>

</a>

</li>

<li>

<a href=”#”>

<span class=”link”>

</span>

</a>

</li>

</ul>

<div class=”clear”>

</div>

</div>

<div class=”footer”>

<p>

Copyright © 2015 Stylish Deco Profile. All Rights Reserved | Design by <a href=”https://cxvn.com/” target=”_blank”>乐分享</a>

</p>

</div>

下载地址

立即下载