www___yyy 2023-11-28 09:31 采纳率: 0%
浏览 27

关于#html5#的问题：怎么弄成这个样子

img


怎么弄成这个样子，用html标签，设计一个个人简历网站或者网页，要求设计3-8个页面，不少于3000字数（包括代码）

  • 写回答

1条回答 默认 最新

  • winx96 2025-04-17 17:00
    关注
    
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>简历 - OfficePLUS</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      margin: 0;
      padding: 0;
      background: #f2f2f2;
    }
    .container {
      display: flex;
      max-width: 900px;
      margin: 20px auto;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .sidebar {
      width: 30%;
      background: #e9f3f4;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
    }
    .main {
      width: 70%;
      padding: 30px 40px;
      box-sizing: border-box;
    }
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: #ccc;
      margin: 0 auto 10px;
    }
    h2 {
      font-size: 22px;
      color: #333;
      margin: 10px 0 5px;
    }
    h3 {
      font-size: 18px;
      color: #339933;
      margin-top: 30px;
      border-bottom: 2px solid #e2e2e2;
      padding-bottom: 5px;
    }
    .info-section {
      text-align: left;
      margin-top: 30px;
    }
    .info-section p {
      margin: 6px 0;
    }
    .info-label {
      font-weight: bold;
    }
    .blue-title {
      background: #2da6dc;
      color: white;
      font-size: 16px;
      padding: 8px;
      margin-top: 30px;
      border-radius: 4px;
    }
    .orange-title {
      background: #f58220;
      color: white;
      font-size: 16px;
      padding: 8px;
      margin-top: 30px;
      border-radius: 4px;
    }
    .skills {
      margin-top: 20px;
      text-align: left;
    }
    .skill-bar {
      margin: 10px 0;
    }
    .skill-bar span {
      display: inline-block;
      width: 80px;
    }
    .bar {
      display: inline-block;
      height: 8px;
      background: #f58220;
      vertical-align: middle;
    }
    .bar.word { width: 90px; }
    .bar.excel { width: 85px; }
    .bar.ppt { width: 70px; }
    .bar.ps { width: 50px; }
    .bar.spss { width: 60px; }
    .section {
      margin-bottom: 20px;
    }
    .section-title {
      font-weight: bold;
      color: #666;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">
      <div class="avatar"></div>
      <h2>OfficePLUS</h2>
      <p>产品运营 / 应届</p>

      <div class="blue-title">个人信息 Info</div>
      <div class="info-section">
        <p><span class="info-label">电话：</span>18010001000</p>
        <p><span class="info-label">邮箱：</span>officeplus@microsoft.com</p>
        <p><span class="info-label">籍贯：</span>北京</p>
        <p><span class="info-label">微信：</span>@微软 OfficePLUS</p>
        <p><span class="info-label">QQ：</span>3093242906</p>
        <p><span class="info-label">地址：</span>北京市海淀区中关村东路1号<br>清华科技园D座15层</p>
        <p><span class="info-label">英语：</span>CET6 540</p>
      </div>

      <div class="orange-title">个人技能 Skills</div>
      <div class="skills">
        <div class="skill-bar"><span>WORD</span><div class="bar word"></div></div>
        <div class="skill-bar"><span>EXCEL</span><div class="bar excel"></div></div>
        <div class="skill-bar"><span>POWERPOINT</span><div class="bar ppt"></div></div>
        <div class="skill-bar"><span>PHOTOSHOP</span><div class="bar ps"></div></div>
        <div class="skill-bar"><span>SPSS</span><div class="bar spss"></div></div>
      </div>
    </div>

    <div class="main">
      <h3>教育背景 Education Background</h3>
      <div class="section">
        <p><strong>北京 OfficePLUS 大学 商学院 市场营销专业</strong> 2012.09–2016.07</p>
        <p>本科 GPA 3.6 / 4.0 班级排名 3 / 32</p>
        <p class="section-title">所获荣誉</p>
        <p>北京市优秀毕业生、北京市三好学生、校一等奖奖学金、“优秀团员”、“先进个人”</p>
      </div>

      <h3>实践经验 Work Experience</h3>
      <div class="section">
        <p><strong>北京微软在线 OfficePLUS 项目组</strong> 2015.10–2016.04</p>
        <p>运营实习生</p>
        <ul>
          <li>负责网站占位管理、产品更新维护、数据追踪分析，根据分析结果和市场反馈优化内容结构。</li>
          <li>负责渠道运营，结合时事热点推送优质模板，保持活跃度和粘性，运营期间每周平均投稿量超 150。</li>
          <li>负责设计讲师、合作单位资源对接，撰写项目总结、用户访谈稿。</li>
        </ul>
      </div>

      <div class="section">
        <p><strong>北京 Office 贸易有限公司</strong> 2013.05–2013.09</p>
        <p>运营实习生</p>
        <ul>
          <li>协助运营管理【家家猫】、【仓鼠窝】等店铺运营工作。</li>
          <li>每日跟踪商品信息、整理上架商品数据，制作商品描述页面，与客服和美工协调。</li>
          <li>整理商品用户反馈并制定调整优化方案，保障后续用户体验。</li>
          <li>协助开展促销活动，从任职至今协助策划及组织运营的节日促销活动多场。</li>
        </ul>
      </div>

      <div class="section">
        <p><strong>北京 Office 大学 BBS</strong> 2013.10–2015.04</p>
        <p>版主</p>
        <ul>
          <li>论坛版主，坚持定期发布基于网络的文档、视频。</li>
          <li>将 4 版版人日均流量提升至 1000+，成为最有影响力的版面。</li>
          <li>网站内容方面与 sohu 合作，并定期与国内内容网站进行交流、资源共享、提升人气。</li>
        </ul>
      </div>

      <div class="section">
        <p><strong>北京 Office 大学学生会</strong> 2011.10–2014.04</p>
        <p>副主席</p>
        <ul>
          <li>负责办公室和宣传部两个部门，先后策划元旦晚会、运动会等大型活动。</li>
          <li>连续两年获得学生会先进个人称号。</li>
          <li>所负责的暑期支教项目获得“优秀暑期实践奖”。</li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 11月28日