提示:阅读完文章,有对此程序感兴趣的可以在底部获取下载地址!
效果展示(可以自行感受)
视频效果:
美丽炫酷的Html5简历网页模板_哔哩哔哩_bilibili
主页(1)
主页(2)
主页(3)
主页(4)
主页(5)
主页(6)
代码展示(部分)
<div class="copyrights">Baron简历 <a href="http://blog.youzewang.com/jianli" >前端工程师</a></div>
<!-- Services Section -->
<div id="services" class="text-center">
<div class="container">
<div class="section-title center">
<h2>基本 <strong>资料</strong></h2>
<hr>
</div>
<div class="space"></div>
<div class="row">
<div class="col-md-3 col-sm-6 service"> <i class="fa fa-laptop"></i>
<h4><strong>个人信息</strong></h4>
<p>
英文名: Baron 性别:男</br>
年龄: 25岁 籍贯:湖南
</p>
</div>
<div class="col-md-3 col-sm-6 service"> <i class="fa fa-code"></i>
<h4><strong>专业学历</strong></h4>
<p>
专业:电子信息工程</br>
学历:大学本科</br>
</p>
</div>
<div class="col-md-3 col-sm-6 service"> <i class="fa fa-rocket"></i>
<h4><strong>毕业学校</strong></h4>
<p>
毕业学校:浙江理工大学</br>
学习技能:编程
</p>
</div>
<div class="col-md-3 col-sm-6 service"> <i class="fa fa-bullseye"></i>
<h4><strong>联系方式</strong></h4>
<p>QQ:406641830</br>
邮箱:admin@ymjihe.com</p>
</div>
</div>
</div>
</div>
<!-- Portfolio Section -->
<div id="works">
<div class="container"> <!-- Container -->
<div class="section-title text-center center">
<h2>项目 <strong>经验</strong></h2>
<hr>
<div class="clearfix"></div>
<p>主要涉及电商,金融,家装领域,包括PC端,手机端,微信端,移动APP端等等,主要技术是HTML+CSS+JS</p>
</div>
<div class="categories">
<ul class="cat">
<li>
<ol class="type">
<li><a href="#" data-filter="*" class="active">所有</a></li>
<li><a href="#" data-filter=".web">PC端</a></li>
<li><a href="#" data-filter=".app">移动端</a></li>
<li><a href="#" data-filter=".branding">响应式</a></li>
</ol>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="portfolio-items">
<div class="col-sm-6 col-md-3 col-lg-3 web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href='http://ly522.cn/jsg' target='_blank' title="欧工商城">欧工商城</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/01.jpg" class="img-responsive" alt="欧工商城"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href="http://ly522.cn/jsg" target='_blank' title="财树理财">财树理财</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/02.jpg" class="img-responsive" alt="财树理财"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href="http://ly522.cn/jsg" target='_blank' title="IT技术之家">IT技术之家</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/03.jpg" class="img-responsive" alt="IT技术之家"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href='http://ly522.cn/jsg' target='_blank' title="久久基因">久久基因</h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/04.jpg" class="img-responsive" alt="久久基因"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href='http://ly522.cn/jsg' target='_blank' title="纵横基因">纵横基因</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/05.jpg" class="img-responsive" alt="纵横基因">
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 branding">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href="http://ly522.cn/jsg" target='_blank' title="浙江网新恒天UED">浙江网新恒天UED</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/06.jpg" class="img-responsive" alt="浙江网新恒天UED"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 branding app web">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href="http://ly522.cn/jsg" target='_blank' title="个人博客">个人博客</a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i> </div>
<img src="img/portfolio/07.jpg" class="img-responsive" alt="个人博客"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 web app">
<div class="portfolio-item">
<div class="hover-bg">
<div class="hover-text">
<h4><a href='http://ly522.cn/jsg' target='_blank' title="软装大师">软装大师 </a></h4>
<small>手机(福利)微信:stsj522</small>
<div class="clearfix"></div>
<i class="fa fa-search"></i>
</div>
<img src="img/portfolio/08.jpg" class="img-responsive" alt="软装大师">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Section -->
<div id="about">
<div class="container">
<div class="section-title text-center center">
<h2><strong>专业</strong> 技能</h2>
<hr>
</div>
<div class="row">
<div class="col-md-6"> <img src="img/about.png" class="img-responsive"> </div>
<div class="col-md-6">
<div class="about-text"> <i class="fa fa-users"></i>
<div class="padding-left"><h4>PC端</h4>
<p>熟练使用HTML/CSS技术,精通Javascript/jquery编程,能够熟练使用angularjs,reactjs等前端MVC框架进行模块开发,熟练的使用grunt,gulp等前端工具,了解less,sass,stylus,coffeescript等前端新技术</p></div>
<i class="fa fa-magic"></i>
<div class="padding-left"><h4>移动端</h4>
<p>熟练使用zepto.js,Frozen ui,Amaze ui等移动框架进行移动页面的开发,熟练使用threejs等js引擎进行3d效果和H5游戏的开发.</p></div>
<i class="fa fa-check-square-o"></i>
<div class="padding-left"><h4>其它</h4>
<p>懂网站性能优化,网站百度排名和SEO优化,熟练使用photoshop等切图工具,会常见的UI技巧,懂Java,php等后台语言开发.</p></div>
</div>
</div>
</div>
</div>
</div>
获取源码请关注公众号:计算机基础与编程;输入关键字“098”即可获取。