美丽炫酷的Html5简历网页模板

最新推荐文章于 2024-04-20 02:52:24 发布

初尘屿风

最新推荐文章于 2024-04-20 02:52:24 发布

阅读量1.9k

点赞数 3

分类专栏：前端初尘屿风 JavaScript 文章标签： html5 前端 html 运维 git

本文链接：https://blog.csdn.net/qinluyu111/article/details/121738207

版权

初尘屿风同时被 3 个专栏收录

190 篇文章 10 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

提示：阅读完文章，有对此程序感兴趣的可以在底部获取下载地址！

效果展示（可以自行感受）

视频效果：

美丽炫酷的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 &nbsp;性别：男</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”即可获取。