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

且行且珍惜是什么意思 2019-12-19 1,450 阅读

模板描述:简洁精致小巧 个人介绍网页 模板下载,简洁精致小巧的个人介绍网页模板下载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>

演示地址下载地址

最新游戏