Skip to content

Latest commit

 

History

History
147 lines (131 loc) · 5.65 KB

HTML_STRUCTURE.mkdn

File metadata and controls

147 lines (131 loc) · 5.65 KB

HTML 文件結構

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
    <link href="#" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <%= yield %>
    <script src="#" type="text/javascript"></script>
  </body>
</html>

雙欄版面

<div id="container">
  <div id="header">
    <h1><a>LOGO</a></h1>
    <div id="main-navigation" class="nav clearfix"> </div>
    <div id="user-navigation" class="nav clearfix"> </div>
  </div>
  <div id="main"></div>
  <div id="sidebar"></div>
</div>
<div id="footer"></div>

文本元件

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p>
<hr/>

表格元件

<table>
  <caption>表格標題</caption>
  <thead>
    <tr><th>標題 A</th><th>標題 B</th></tr>
  </thead>
  <tbody>
    <tr><th>標題 X</th><td>值一</td></tr>
    <tr><th>標題 Y</th><td>值二</td></tr>
  </tbody>
  <tfoot>
    <tr><th>標尾</th><td>總值</td></tr>
  </tfoot>
</table>

一般表單元件

<form action="#" method="post" id="new_user" class="form user">
  <fieldset>
    <legend>使用者資料</legend>
    <div class="inputs">
      <label for="user_name">姓名</label>
      <input type="text" name="user[name]" value="" id="user_name" class="name">
    </div>
    <div class="inputs">
      <label for="user_marriage">已婚</label>
      <input type="checkbox" name="user[marriage]" value="1" id="user_marriage" class="marriage">
    </div>
    <div class="buttons">
      <input type="submit" value="送出" id="" class="">
    </div>
  </fieldset>
</form>

表單元件 (Handicraft)

<form action="/posts/2959/comments" class="form right-label" id="new_comment" method="post">
  <ul class="form-fields">
    <li>
      <label class="desc" for="comment_guest_name">名稱</label>
      <div class="col">
        <input class="field text" id="comment_guest_name" name="comment[guest_name]" size="30" type="text" />
      </div>
    </li>
    <li>
      <label class="desc" for="comment_guest_website">網址</label>
      <div class="col">
        <input class="field text" id="comment_guest_website" name="comment[guest_website]" size="30" type="text" />
      </div>
    </li>
    <li>
      <label class="desc" for="comment_content">留言內文</label>
      <div class="col">
        <textarea class="field textarea" cols="40" id="comment_content" name="comment[content]" rows="20"></textarea>
      </div>
    </li>
    <li class="buttons">
      <input class="submit" id="comment_submit" name="commit" type="submit" value="送出" />
    </li>
  </ul>
</form>

分頁元件 (WillPaginate)

<div class="pagination">
  <span class="disabled prev_page">上一頁</span>
  <span class="current">1</span>
  <a href="/posts?page=2" rel="next">2</a>
  <a href="/posts?page=3">3</a>
  <a href="/posts?page=4">4</a>
  <a href="/posts?page=5">5</a>
  <a href="/posts?page=6">6</a>
  <a href="/posts?page=7">7</a>
  <a href="/posts?page=8">8</a>
  <a href="/posts?page=9">9</a>
  <span class="gap">&hellip;</span>
  <a href="/posts?page=76">76</a>
  <a href="/posts?page=77">77</a>
  <a href="/posts?page=2" class="next_page" rel="next">下一頁</a>
</div>

列表使用 (li)

<ul>
  <li class="first"> AAA</li>
  <li class="active"> BBB </li>
  <li>CCC</li>
  <li>YYY</li>
  <li class="last">ZZZ</li>
</ul>
  • 如需針對第一個及最後一個 li 做特別處理，class 需命名為first、last。被選取的選項 class請命名為 active