Web网页开发之一页纸简历制作

1.先看效果图：
在这里插入图片描述
2.页面构成：
页面由五部分组成：
a)header
包括一个图片和三个图标以及三个图片对应的文字信息
代码如下：

<header>
   <div class="container">
   <div class="row"> 
   <div class="col-xs-4 col-md-4">

     </div>
   <div class="col-xs-8 col-md-8">
    <div class="col-xs-1 col-md-1">
    <div class="col">
     <img src="img/2.png" style="border: none;"/>
     <img src="./img/1.png" />
    </div>
    </div>
    <div class="col-xs-6 col-md-6" style="margin:10px;">
    <h4 class="font">12345678</h4>
    <h4 class="font">成都</h4>
   <!--img src="./img/1.png" /-->
    <h4 class="font">[email protected]</h4>
   </div>
   </div>
   </div>

b)section1
介绍基本信息，使用表格实现：

<section>
   <table class="table" style="border: o; width: 100%;">
    <tr>
     <td>&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：陈XX</td>
     <td>出生年月：1999-12-08</td>
     <td>性别：男</td>
    </tr>
    <tr>
     <td>求职意向：软件开发工程师</td>
     <td>毕业学校：重庆理工大学</td>
     <td>专业：软件工程</td>
    </tr>
    <tr>
     <td>政治面貌：团员</td>
     <td>籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：四川成都</td>
     <td>学历：本科</td>
    </tr>
   </table>
  </section>

c)section2
描述自我评价，代码如下：

<section style="margin: 0 0 20px;">
   <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人软件工程专业毕业，有三年校外工作经验，对C语言、C++、PHP、Python开发语言都有一定程度的熟悉。有责任心，在任职岗位期间认真负责，执行能力强，只要有任务都会在第一时间内完成。热爱本职工作，热衷于代码开发，有着良好的沟通能力及协调能力，肯吃苦耐劳，勇于进取。如能加入贵公司，我必定全力以赴。  
   </p>
  </section>

d)section3
介绍工作经历

  <p class="p">成都市东庭家政责任有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家政清洁工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2017/12-2018/02</p>
   <ul>
    <li>负责到客户家里打扫清洁，在锻炼耐力的同时提高自己的沟通能力</li>
    <li>根据公司发布的任务在规定时间到达地点，及时做好家政服务</li>
    <li>在工作期间，不仅提高了沟通能力，还了解了家政行业的知识</li>
   </ul>
   <p class="p">成都市璧山区壹方教育有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数学辅助教师&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2018/09-2019/01</p>
   <ul>
    <li>负责数学辅助教学，提高学生对基础知识的掌握</li>
    <li>自己设计教学模式和准备教学题材</li>
    <li>对学生采取不同的管理模式，大大提高了学生学习效率</li>
   </ul>
  </section>

e)footer
介绍教育背景

<footer class="foot">
  <button style="border: none; color: black; background: indianred;">教育背景</button>
  <hr style="margin: 0 0 0 0; height: 1px; width: auto;background: indianred;"/>
  <p>个人爱好：&nbsp;喜欢编程、数学、运动、<button id"a" class="music" οnclick="a()">音乐</button>、画画</p>
  <p>学习背景：&nbsp;成都师范的大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;软件工程（本科）</p>
  <p>主修课程：&nbsp;C语言程序设计、C++面向对象开发与设计、Python程序设计、PHP程序开发、Web开发、HTML5开发、软件工程、UML面向对象分析与设计
  </p>
  <p>获得荣誉：&nbsp;</p>
  <ul>
   <li>CET4</li>
   <li>普通话</li>
  </ul> 
 </footer>

3.主要技术讲解
a)音乐播放
使用audio实现，controls设置可控性，preload id声明通过id来实现访问

<audio src="./other/1.mp3" controls="controls" preload id="music" hidden="hidden"></audio>

js代码如下：

 function a(){
   var audio=document.getElementById('music');
   if (audio.paused){
    audio.play()
   }
   else{
    audio.pause();
   }
  }

b)图片切换
图片切换使用id来访问实现，代码如下

<img src="img/3.png" class="img1" width="100px" height="100px" id="image" οnmοusedοwn="second(this)" οnmοuseup="first(this) οnclick="change()"/>

js代码如下

 function change(){
   var x=document.getElementById("image");
   if(x=="./img/1.jpg"){
   document.getElementById("image").src="./img/3.png"; 
   }
   else{
   document.getElementById("image").src="./img/1.jpg"; 
   }
  }
  function first(obj){
   obj.src="./img/3.png";
   console.log(obj.getAttribute("src"));
  }
  function second(obj){
   obj.src="./img/1.jpg";
   console.log(obj.getAttribute("src"));
  }

c)栅格系统
调用外部链接和内部链接：

  <div class="container">
   <div class="row"> 
   <div class="col-xs-4 col-md-4">
    <img src="img/3.png" class="img1" width="100px" height="100px" id="image" οnmοusedοwn="second(this)" οnmοuseup="first(this) οnclick="change()"/>
     </div>
   <div class="col-xs-8 col-md-8">
    <div class="col-xs-1 col-md-1">
    <div class="col">
     <img src="img/2.png" style="border: none;"/>
     <img src="./img/1.png" />
    </div>
    </div>
    <div class="col-xs-6 col-md-6" style="margin:10px;">
    <h4 class="font">12345678</h4>
    <h4 class="font">成都</h4>
   <!--img src="./img/1.png" /-->
    <h4 class="font">[email protected]</h4>
   </div>
   </div>
   </div>

<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

js链接：

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

d)CSS样式
样式代码如下：

   header{
    width: auto;
    background-color: white;
   }
   section{
    width: auto;
    background-color:white;
   }
   footer{
    width: auto;
    background-color: white;
   }

ul标签

 <ul>
    <li>负责到客户家里打扫清洁，在锻炼耐力的同时提高自己的沟通能力</li>
    <li>根据公司发布的任务在规定时间到达地点，及时做好家政服务</li>
    <li>在工作期间，不仅提高了沟通能力，还了解了家政行业的知识</li>
   </ul>

 <ul>
    <li>负责数学辅助教学，提高学生对基础知识的掌握</li>
    <li>自己设计教学模式和准备教学题材</li>
    <li>对学生采取不同的管理模式，大大提高了学生学习效率</li>
   </ul>

 <ul>
   <li>CET4</li>
   <li>普通话</li>
  </ul>

Web其他文章链接：
https://blog.csdn.net/qxyloveyy/article/details/104276453

QinHsiu

发布了78 篇原创文章 · 获赞 83 · 访问量 5417

私信关注

Web网页开发之一页纸简历制作

猜你喜欢