用html+css写一下个人简历

今天练习一下页面布局，就用自己的个人简历来练手。下面是html部分：

 1 
 2     
    
 3         

 4             
web前端业务个人简历
    
 5         
 6         
 7         

 8             

 9                 
基本信息
10             
11             

12                 姓名：爱学习的wei丶      
13                 性别：男      
14                 电话：00000000000

15                 邮箱：[email protected]      
16                 个人博客：wei's blogs

17                 应聘职位：web前端工程师
18             
19                 
20         
21         
22         

23             

24                 
专业技能
25             
26             

27                 
熟练掌握html+css的页面布局和JavaScript
28 
29             
30             
31         
32         

33             

34                 
教育背景
35                 
36             
37             

38                 
学历：大学本科；
39                 
毕业院校：安徽财经大学；
40                 
专业：统计学；
41                 
毕业年份：2017年。
42             
43             
44         
45         

46             

47                 
项目经验
48             
49             

50                 
轮播图
51                 
在项目中负责使用JavaScript编码实现轮播效果以及各个按钮的功能
52                 
淘宝星级评价
53                 
在项目中负责实现五颗五角星的打分功能
54             
55             
56 
57         
58         

59             

60                 
自我评价
61             
62             

63                 
热爱前端的工作，对于自身实现的每一个交互式效果或者完美的页面布局会有极大的成就感，这促使着我不断的而又饥渴的汲取着前端的知识，希望自己能够做的更好，这也使我对前端工作有极大的激情。
64             
65             
66         
67     
68     
69 
70 

下面是css样式部分：

 1 *{margin:0px;padding: 0;list-style: none;}
 2         .content{
 3             width: 800px;margin: 20px auto; overflow: hidden;
 4         }
 5         .essentialInformation .skill .educationalBackground .projectExperience .zwpj {overflow: hidden;}
 6         .head {text-align: center;width: 100%;height: 80px;background: #778899;float: left;line-height:80px;}
 7         
 8         
 9            .biaoti {width: 160px;font-size: 20px;font-weight: 500;color: #000;background: #C0C0C0;float: left;height: 100px;line-height:100px;margin-top: 4px;text-align: center;}
10         .neirong { width: 639px;background:white;height: 98px;float: right;margin-top: 4px;border-top: 1px solid #C0C0C0;border-bottom: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;}
11         .neirong p {vertical-align: middle;}

比较简单，主要练习一下公共样式的设置，和复习一下各种css样式。

下面是做出来的效果图：

 

转载于:https://www.cnblogs.com/weiweiwei233/p/9826443.html