码云链接：https://gitee.com/gangancuicuia/codes/dux39krnpmqh0v42jselz26

　　　　源文件：

　　　　

　　　   截图：

　　　　

　　　　

　　　　代码：

  1 <!DOCTYPE html>
  2 
  3 <html>
  4 
  5   <head>
  6 
  7      <title>个人简历</title>
  8 
  9      <meta charset="utf-8">
 10 
 11      <style type=text/css>   /*声明其内容为标准的css*/
 12 
 13        *{
 14           margin: 0;
 15           padding: 0;
 16           border: none;
 17           font-size: 12px;
 18         }  
 19        #resume{
 20           width: 800px;
 21           margin: 0 auto;   /*外边距上下为0，左右自适应，为了使DIV在浏览器中水平居中*/
 22           border: solid 1px #DCDDDF;
 23         }
 24        #resume .one{
 25           background: url(img/b2.jpg);
 26           width: 800px;
 27           height: 100px;            
 28                     font-size: 45px;                
 29                     color: white;                        
 30           font-weight: bold; /*定义粗体字符*/                
 31                     font-family: "微软雅黑";                
 32           text-align: center;
 33           margin-bottom: 0; /*下外边框设置为0*/
 34           line-height: 90px;
 35         }
 36        #resume ul{
 37           width: 800px;
 38           margin-left: 0px;
 39           margin-top: 25px;
 40         }
 41 
 42        #resume ul li{
 43           font-size: 25px;
 44           background: url(img/b2.jpg) no-repeat;/*设置图片不重复*/
 45           list-style: none;
 46           text-indent: 2em; /*规定文本块中首行文字的缩进，em为相对单位*/
 47           line-height: 30px;   /*行间距离为30像素*/            
 48                     color: white;                    
 49                     font-family: "Tahoma";                    
 50                     font-weight: bold;                
 51           margin-bottom: 15px;
 52           border-bottom: 1px solid #DCDDDF;                            
 53         }
 54 
 55        #resume ul li.none1{
 56           border-bottom: none;  /*将id为resume中的ul 且class为none1的li去掉下边框*/
 57         }
 58 
 59        #resume ul li p{
 60           font-size: 15px;
 61                     color: white;
 62         }  /*将id为resume中的ul li 下的p标签的字体设置为15像素*/
 63                 .main_left{
 64                     width:250px;        
 65                     float: left;            
 66                     position:relative;
 67                 }
 68                 .main_left_pic{
 69                     width: 240px;                    
 70                     height: 660px;                
 71                     background: url(img/b3.jpg);                
 72                     margin-left: 0px;                
 73                 }
 74                  h1{
 75                        font-family: "楷体";
 76                       font-size: 23px;
 77                       color: black;
 78                       padding-top: 10px;
 79                     }
 80      </style>
 81 p
 82 </head>
 83 
 84 <body background="img/bg1.jpg">
 85     <embed src="music/单身狗之歌.mp3" autostart="true" loop="true" hidden="true"></embed>
 86     <div id="resume">
 87         
 88      <div class="one">个人简历</div>
 89         <div class="main_left">
 90             <br></br>
 91             <div class="main_left_pic">
 92             <a href="https://baike.baidu.com/item/%E5%8D%95%E8%BA%AB%E7%8B%97/16528775?fr=aladdin"><img src="img/p1.jpg" width="220" height="240" alt="图片"align="middle"></a>
 93             <h2><font color="red">点击头像有惊喜呦~</font></h2>
 94             <h1>求职意向：高级搬砖工</h1>
 95             <h1>期望薪资：XXXX</h1>
 96             <h1>联系电话：185XXXXXX</h1>
 97             <h1>联系邮箱：119XXXXXXX</h1>
 98             <h1>联系地址：青海大学</h1>
 99             </div>
100             
101         </div>
102      <ul>
103 
104        <li>个人信息
105                 <p>姓名：朱苏洵;</p>
106                         <p>昵称：干干脆脆啊;</p>
107                         <p>性别：女;</p>
108                         <p>籍贯：山东;</p>
109                         <p>年龄: 20;</p>
110               </li>
111               <li>教育背景
112                 <p>学校：青海大学;</p>
113                 <p>专业：计算机科学与技术;</p>
114                         <p>学历：本科;</p>
115               </li>
116               <li>社会经历
117                 <p>xx年xx-xx年xx: xxx公司岗位实习</p>
118                 <p>工作内容：扫地，挖坑，搬砖</p>
119               </li>
120               <li>专业技能
121                 <p>考取了专业搬砖证书，获奖情况一等奖。</p>
122               </li>
123               <li>相关资格证书
124                 <p>计算机证书</p>
125                 <p>扫地证书</p>
126                 <p>挖坑证书</p>
127                 <p>搬砖证书</p>
128               </li>
129               <li class="none1">自我评价
130                 <p> 一个勤勤恳恳，默默无闻，专攻于计算机的人。</p>
131               </li>
132             </ul>
133            </div>
134        </body>
135        </html>