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

1.先看效果图：

2.页面构成：
页面由五部分组成：
a)header
包括一个图片和三个图标以及三个图片对应的文字信息
代码如下：

   
"container">
   
"row"> 
   
"col-xs-4 col-md-4">

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

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

   "table" style="border: o; width: 100%;">
    

     
 ;姓 ; ; ; ; ; ;名：陈XX
     
出生年月：1999-12-08
     
性别：男
    
    

     
求职意向：软件开发工程师
     
毕业学校：重庆理工大学
     
专业：软件工程
    
    

     
政治面貌：团员
     
籍 ; ; ; ; ; ; ;贯：四川成都
     
学历：本科
    
   
  

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

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

d)section3
介绍工作经历

  
"p">成都市东庭家政责任有限公司 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;家政清洁工 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;2017/12-2018/02
   

    
负责到客户家里打扫清洁，在锻炼耐力的同时提高自己的沟通能力
    
根据公司发布的任务在规定时间到达地点，及时做好家政服务
    
在工作期间，不仅提高了沟通能力，还了解了家政行业的知识
   
   
"p">成都市璧山区壹方教育有限公司 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;数学辅助教师 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;2018/09-2019/01
   

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

e)footer
介绍教育背景

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

   
CET4
   
普通话
  
 
 

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

js代码如下：

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

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

"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)栅格系统
调用外部链接和内部链接：

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

<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标签

 

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

 

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

 

   
CET4
   
普通话
  
 

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