【案例简介】

基于css网站排版demo

【案例截图】

【核心代码】

  <div id="nav">
      <div class="container">
        <button type="button" class="menu-button">
          三
        </button>
        <input type="checkbox" class="menu-button-checkbox">
        <ul class="menu">
          <li><a href="#about">Who am I</a></li>
          <li><a href="#my-work">My Work</a></li>
          <li><a href="#contact-me">Contact me</a></li>
        </ul>
      </div>
    </div>
    <div id="content">
      <div class="container">
        <div id="about">
          <div id="my-avatar">
            <img src="img/my-avatar.png" alt="my avatar">
          </div>
          <div id="my-info">
            <h1>I am Ch.Myra</h1>
            <h3>Developer and startup entrepreneur</h3>
            <hr>
            <table>
              <tr>
                <th>Birth</th>
                <td>1986</th>
              </tr>
              <tr>
                <th>工作經驗</th>
                <td>> 3 年，金融領域、網站開發、創業</td>
              </tr>
              <tr>
                <th>開發技能</th>
                <td>HTML, CSS, JavaScript, Ruby on Rails, MySQL, GCP</td>
              </tr>
              <tr>
                <th>學習經歷</th>
                <td>
                  大航道計劃結業, 2018<br>
                  ALPHA 大學結業, 2017
                </td>
              </tr>
            </table>
          </div>
        </div>