JSFiddle

  • Meny med padding och margin-2

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class='main'>
        <p>Detta är en p-tagg. 1, 2, 3 och 4 är a-taggar.</p>
        <nav><a>1</a>
         <a>2</a>
         <a>3</a>
         <a>4</a>
    
        </nav>
        <p>Detta är en p-tagg. a ...</p></div>
  • CSS Selektorer

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul>
      <li>Fish</li>
      <li>Apples</li>
      <li>Cheese</li>
    </ul>
    
    <div class="example">
      <p>Example paragraph text.</p>
      <p>Ayyooo</p>
    </div>
    
    <ul>
      <li>Water</li>
      <li>Juice</li>
      <li>Maple Syrup</li>
    </ul>
  • En Tabell som är fin

    No-Library (pure JS), HTML, CSS, JavaScript

    <table>
      <caption>Teckenkoder som får användas enligt standarder.</caption>
          <tbody>
              <thead>
                <tr>
                      <td rowspan='2'>tecken</td>
                      <td colspan='2'>kod</td>
                      <td rowspan='2'>beskrivning</td>
                </tr>
                <tr>
                    <td>tecken</td>
                    <td>decimal</td>
                </tr>
              </thead>
                <tr>
                    <td>&lt;</td>
                    <td>&amp;lt;</td>
                    <td>&amp;#60;</td>
                    <td>används i HTML</td>
                </tr>
                <tr>
                    <td>&gt;</td>
                    <td>&amp;gt;</td>
                    <td>&amp;#62;</td>
                    <td>används i ...</td></tr></tbody></table>
  • Yatzy

    No-Library (pure JS), HTML, CSS, JavaScript

      <table>
          <tr1>
              <td>Yatzy</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Ettor</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>Tvåor</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Treor</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>Fyror</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Femmor</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>Sexor</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Summa</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>Bonus</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>1 par</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>2 par</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>tretal</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>fyrtal</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Liten stege</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
          <tr1>
              <td>Stor stege</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr1>
          <tr>
              <td>Kåk ...</td></tr></table>
  • margin-padding-mm #2 is the latest revision

    Meny med padding och margin!

    <div class='main'>
        <p>1 text text text text text text text</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>                
    </div>