计算机小白一个 2024-04-18 17:44 采纳率: 75%
浏览 5
已结题

用HTML和css怎么做出如图所示的简历

用HTML和css怎么做出如图所示的简历，希望有代码，非常感谢

img

  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺@新空间代码工作室 2024-04-18 17:44
    关注

    下午好🌅🌅🌅
    本答案参考ChatGPT-3.5

    要制作如图所示的简历，你可以使用HTML和CSS来实现。以下是一种可能的实现方式：

    1. 首先，创建一个HTML文件，并引入CSS样式表。
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简历</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="resume">
    <h1>个人基本资料</h1>
    <table>
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>出生年月</td>
        <td>民族</td>
        <td>籍贯</td>
        <td>政治面貌</td>
        <td>照片</td>
      </tr>
      <tr>
        <td>John Doe</td>
        <td>男</td>
        <td>1990年1月1日</td>
        <td>汉族</td>
        <td>北京</td>
        <td>党员</td>
        <td><img src="photo.jpg" alt="照片" width="100" height="100"></td>
      </tr>
    </table>
    <h1>求职意向</h1>
    <table>
      <tr>
        <td>行业</td>
        <td>目标岗位</td>
        <td>工作性质</td>
        <td>任职时间</td>
        <td>月薪期望</td>
        <td>工作地点</td>
        <td>相关说明</td>
      </tr>
      <tr>
        <td>互联网</td>
        <td>前端开发</td>
        <td>全职</td>
        <td>2022年1月起</td>
        <td>10,000元</td>
        <td>北京</td>
        <td>无</td>
      </tr>
    </table>
    <h1>教育背景</h1>
    <table>
      <tr>
        <td>时间</td>
        <td>学校</td>
        <td>相关说明</td>
      </tr>
      <tr>
        <td>2010年-2014年</td>
        <td>北京大学</td>
        <td>本科</td>
      </tr>
    </table>
    <h1>个人技能</h1>
    <ul>
      <li>前端开发</li>
      <li>HTML/CSS</li>
      <li>JavaScript</li>
      <li>React</li>
    </ul>
    <h1>奖项证书</h1>
    <ul>
      <li>优秀员工奖</li>
      <li>前端技术证书</li>
    </ul>
    <h1>语言能力</h1>
    <table>
      <tr>
        <td>国语水平</td>
        <td>其他语言</td>
      </tr>
      <tr>
        <td>流利</td>
        <td>英语（中级）</td>
      </tr>
    </table>
    <h1>自我评价</h1>
    <p>我是一名热爱前端开发的工程师，有多年的工作经验，熟悉各种前端技术和工具，具备良好的团队合作和解决问题的能力。</p>
    <h1>兴趣和特长</h1>
    <ul>
      <li>阅读</li>
      <li>篮球</li>
      <li>音乐</li>
    </ul>
    <h1>获奖情况</h1>
    <ul>
      <li>优秀员工奖</li>
      <li>参与优秀项目</li>
    </ul>
    <h1>个人评价</h1>
    <p>我在工作中一直积极主动，责任心强，有良好的沟通能力和团队合作精神，能够承受一定的工作压力。</p>
  </div>
</body>
</html>
    1. 创建一个CSS样式表（例如style.css），用于设置简历的样式。
    /* 根据实际需求设置样式，这里只是示例 */

.resume {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
}

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

table td {
  padding: 10px;
  border: 1px solid #ccc;
}

ul {
  margin-top: 20px;
  padding-left: 20px;
}

p {
  margin-top: 20px;
  line-height: 1.5;
}

    这样，你就可以使用HTML和CSS制作出如图所示的简历。你可以根据自己的需求和实际情况进行进一步的样式调整和内容填充。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 4月26日
  • 已采纳回答 4月18日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 数据量少可以用MK趋势分析吗
  • ¥15 使用VH6501干扰RTR位，CANoe上显示的错误帧不足32个就进入bus off快慢恢复，为什么？
  • ¥15 大智慧怎么编写一个选股程序
  • ¥100 python 调用 cgps 命令获取 实时位置信息
  • ¥15 两台交换机分别是trunk接口和access接口为何无法通信，通信过程是如何？
  • ¥15 C语言使用vscode编码错误
  • ¥15 用KSV5转成本时，如何不生成那笔中间凭证
  • ¥20 ensp怎么配置让PC1和PC2通讯上
  • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
  • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中