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

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

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

img

  • 写回答

3条回答 默认 最新

  • 檀越@新空间 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日