基于css的个人简历改进

最新推荐文章于 2024-03-12 13:12:59 发布

春风过客

最新推荐文章于 2024-03-12 13:12:59 发布

阅读量278

点赞数

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/weixin_48489657/article/details/109549493

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title> My Resume2</title>
  <style>
    .main{width:700px; height:800px; position:absolute; 
	     top:0;left:0; right:0;bottom:0; margin:auto;
		 border:none;}
	.quarter-div-left{width:40%;height: 100%;float: left; background-color:#20B2AA;}
	.quarter-div-right{width:60%;height: 100%;float: left;background-color:#f0f8ff;}
	table td{align:center; valign:middle; width：100px; height:40px;}
	body{font-family:Monospace;font-size:18px;}
	.picture{text-align:center;}
	.padding{ background-color:#7d9ec0;padding-top:8px;padding-bottom:8px;padding-right:80px;padding-left:20px;}
	.line{line-height:25px;}
	.font-title{font-family:Times New Roman; font-weight:bold; color:#800080;}
	
  </style>
 </head>
  <body>
   <div class="main">
    <div class="quarter-div-left">
    <table>
	  <tr><td class="picture"><img src="re.jpg" alt="简历照片" width="120" height="140"></td></tr>
	  <tr><td style="text-align:center">姓名：***</td></tr>
	 <tr>
	   <td ><img src="info.png" alt="个人信息" width="30" height="30">
	      <span class="padding font-title">个人信息</td>
	   </tr>
	   <tr><td>出生年月：********</td></tr>
	   <tr><td>性别：***</td></tr>
	   <tr><td>政治面貌：*****</td></tr>
	   <tr><td>民族：****</td></tr>
	   <tr><td>籍贯：****</td></tr>
	   <tr><td>邮箱：************</td></tr>
	   <tr><td>联系电话:**********</td></tr>
	 <tr><td class="self-icon"><img src="self.png" alt="自我评价" width="30" height="30">
	    <span class="padding font-title">自我评价</span></td></tr>
		<tr><td class="line">***************</td></tr>
	 </table>
	</div>
	<div class="quarter-div-right">
	  <table>
	  <tr><td ><img src="ed.png" alt="教育背景" width="30" height="30">
	    <span class="padding font-title" >教育背景Educational Background</span></td></tr>
	   <tr><td>2017.09-2021.06          ****大学      ****专业（本科/硕士/博士） </td></tr>
       <tr><td class="line">主修课程：*********</td></tr>
	  <tr><td ><img src="price.png" alt="技能证书" width="30" height="30">
	    <span class="padding font-title">技能证书 Skills certificate</span></td></tr>
		<tr>
		 <td>
		  <ul>
		  <li>*******</li>
		  <li>*******</li>
		  <li>*******</li>
		</ul>
		</td>
		</tr>
	  <tr><td class="th-icon"><img src="thing.png" alt="校园经历" width="30" height="30">
	    <span class="padding font-title">校园经历 Campus</span></td></tr>
		<tr><td>2019.09-2020.09            ******         *****(职务)</td></tr>
		<tr><td>职责描述</tr></td>
		<tr><td>
		 <ul>
		  <li>*********</li>
		  <li>*********</li>
		 </ul>
		 <tr><td>2019.09-2020.09            ********* </tr></td>
		 <tr><td>职责描述</td></tr>
		 <tr><td>
		  <ul>
		   <li>************</li>
		   <li>************</li>
		   <li>************</li>
		  </ul>
		</td>
		</tr>
	  </table>
	 </div>
  </body>
  </html>

效果如下图：
在这里插入图片描述

春风过客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于css的个人简历改进

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"/> <title> My Resume2</title> <style> .main{width:700px; height:800px; position:absolute; top:0;left:0; right:0;bottom:0; margin:auto;
复制链接

扫一扫

专栏目录