close

我們再來說明如何改變列表的圖案，一樣用上個程式式來說明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<h1>How to use LIST 2 -魚和橙的結合</h1>
<h2>Use (ul)</h2>
<ul>
  <li>Round Round Round</li>
  <li>Square Square Square</li>
  <li>Triangle Triangle Triangle</li>
  <li>Diamond Diamond Diamond</li>
</ul>
<h2>Use (ol)</h2>
<ol>
  <li>one one one</li>
  <li>two two two</li>
  <li>three three three</li>
  <li>four four four</li>
</ol>
</body>
</html>

結果如下：

2012-07-26_154508  

我們再來加入CSS來修改,將UL的部份改成圓空心，OL的部份改成英文字

 

<style type="text/css">
ul {
    list-style-type: circle;
}

ol {
    list-style-type: upper-alpha;
}
</style>

輸出結果：

2012-07-26_154758   

改完執行，就可發現列表頭改變，以後如果想改，僅須改CSS 即可！

如果想把ol的數字，照你想要的數字當起始的數字，要如何用呢？假設我想從10開始，那程式碼要改成如下：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<h1>How to use LIST 3-魚和橙的結合</h1>
<h2>Use (ol)</h2>
<ol start="10">
  <li>one one one</li>
  <li>two two two</li>
  <li>three three three</li>
  <li>four four four</li>
</ol>
</body>
</html>

 照上序程式在<ol>加入 start="10"，就可以改變成10開始的數值了！

輸出結果：

2012-07-26_155419  

那如果想定義個別的號碼，那又可以改值，加入value即可：

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<h1>How to use LIST 4-魚和橙的結合</h1>
<h2>Use (ol)</h2>
<ol start="10">
  <li value="23">one one one</li>
  <li value="14">two two two</li>
  <li value="31">three three three</li>
  <li value="11">four four four</li>
</ol>
</body>
</html>

 輸出結果：

2012-07-26_155718  

照程式改，就可以照你的方式設定數值了！

結論：

列表常用於文章列表，不過橙子卻在常用於選單的方式來用，不過寫的方式，到時還會寫到！




arrow
arrow
    文章標籤
    html 5
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄