手机端个人简历介绍网页模板下载

模板描述：简洁精致小巧 个人介绍网页 模板下载，简洁精致小巧的个人介绍网页模板下载html模板下载

代码部署教程

1. 引入CSS

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

2. 引入JS

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

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

3. HTML代码

<div class=”main”>
<h1>

Gracy Profile Widget </h1>

<div class=”container”>

<div class=”profile”>

<div class=”pro-padding”>

<div class=”image”>

<img src=”./images/p6.jpg” alt=”profile img”>

</div>

<!– image Ends here –>

<h2>

Gracy Ipsum </h2>

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

<p>

Loremipsum@mail.com </p>

</a>

</div>

</div>

<!– Profile Ends here –>

<div class=”tab”>

<div class=”sap_tabs”>

<div id=”horizontalTab” style=”display: block; width: 100%; margin: 0px;”>

<ul>

<li class=”resp-tab-item” aria-controls=”tab_item-0″ role=”tab”>

<span>

ABOUT</span>

</li>

<li class=”resp-tab-item” aria-controls=”tab_item-1″ role=”tab”>

<span>

PHOTOS</span>

</li>

<li class=”resp-tab-item” aria-controls=”tab_item-2″ role=”tab”>

<span>

CONTACT</span>

</li>

</ul>

<!—->

<!– Tab – 1 –>

<div class=”tab-1 resp-tab-content” aria-labelledby=”tab_item-0″>

<div class=”facts”>

<!–About–>

<div class=”about”>

<p>

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

<p>

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

</div>

</div>

</div>

<!– Tab – 2 –>

<div class=”tab-2 resp-tab-content” aria-labelledby=”tab_item-1″>

<div class=”facts”>

<div class=”photo”>

<ul>

<li>

<img src=”./images/p1.jpg” alt=”image”>

</li>

<li>

<img src=”./images/p2.jpg” alt=”image”>

</li>

<li>

<img src=”./images/p3.jpg” alt=”image”>

</li>

<li>

<img src=”./images/p4.jpg” alt=”image”>

</li>

<li>

<img src=”./images/p5.jpg” alt=”image”>

</li>

<li>

<img src=”./images/p6.jpg” alt=”image”>

</li>

</ul>

</div>

</div>

</div>

<!– Tab – 3 –>

<div class=”tab-3 resp-tab-content” aria-labelledby=”tab_item-2″>

<div class=”facts”>

<div class=”contact”>

<ul>

<li>

Lorem Ipsum </li>

<li>

1850-Aarhus </li>

<li>

Smith Street </li>

<li>

Denmark. </li>

<li>

+ 140-256395-452 </li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

<!– tab Ends here –>

</div>

<!– Container Ends here –>

<div class=”clear”>

</div>

</div>

<!– main Ends here –>

<div class=”footer”>

<p>

© 2016 Gracy Profile Widget. All Rights Reserved | Template by <a href=”https://cxvn.com/” target=”_blank”>

w3layouts</a>

</p>

</div>

下载地址

立即下载