他真正意思應該是用div標簽建立起基本的layout佈局, 這部份當然沒什異議, 但是table是否那麼醜陋, 感覺根本就是垃圾般標簽....丟掉吧 ..
也因此依其意思, 全用了div標簽, 類似以下寫法
＜div class="equal"＞
＜div class="row"＞
＜div class="one"＞＜/div＞
＜div class="two"＞＜/div＞
＜div class="three"＞＜/div＞
＜/div＞
＜/div＞
用到的css屬性如下
display:table; 用在class="equal"
display:table-caption; （表格標題樣式寫法）
display:table-row; 用在class="row"
display:table-cell; 用在class="one"、class="two"、class="three"
參考網址：http://www.cainiao8.com/web/csstech2007/11-divliketable.html
實做完的結果, 老實說我懷念起了<table> 的語法了（ 老朋友阿...）,
因為加了一堆無意義的div標簽 , 也加了一堆class樣式,
符合HTML5標準化的表格寫法
以下標籤需依其順序性書寫
<caption> /* table 詳細描述
<colgroup> <col> /* 欄位群組的樣式設定
<thead> 表格表頭 搭配 <th>/* （<th>為欄位標題的意思）
<tfoot> 表格結尾
<tbody> 表格內容(可重複此表籤)
實際操作的畫面如下
DEMO
語法如下
<table>
<caption>102學年度考試成績
<summary>摘要:此成績將會佔學年成績的百分之30％</summary>
</caption>
<colgroup>
<col span="2" style="background-color:white">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>
<td colspan="3" class="subject">數學</td>
</tr>
<tr>
<th>學號</th>
<th>姓名</th>
<th>分數</th>
</tr>
</thead>
<tbody>
<tr>
<td>st-001</td>
<td>王大明</td>
<td>90</td>
</tr>
<tr>
<td>st-002</td>
<td>林小芬</td>
<td>85</td>
</tr>
</tbody>
</table>
說明
- 為了使資料表格更富有意義 , 結構更清晰 , 劃分了表頭 表尾 表內容 ,
對表格詳加描述 , 則針對群組化欄位的設定 - 第一個
會取 學號、st-001、st-002 , 則會取兩個組欄位 為資料欄位的標題欄 - html5不支援cellpadding、cellspacing、width、align、scope ,請用css作設定
參考網址 http://www.pdprogrammeur.com/tables-and-html5-table/2014年2月21日 星期五
網頁字體大小設定
在<body>設定網頁字體基本樣式
body{
font-size:62.5%; /* 62.5% * 16px(瀏覽器預設) = 10px */
line-height:1.5; /* 本身字級的1.5倍 */font-family:Microsoft JhengHei,Arial, Helvetica, sans-serif;}
縮寫可寫成 font:62.5% / 1.5 Microsoft JhengHei,Arial, Helvetica, sans-serif;
其完整的CSS屬性如下
font: font-style font-variant font-weight font-size / line-height font-family;
h1{
font-size:240%;
}
h2{font-size:1.8em;}
p{
font-size:1.5em;
}
基本單位會以10px作計算, 因此
h1標題字 240% * 10px = 24px
h2標題字 1.8 * 10px = 18px
p 1.5 * 10px = 15px
(1em = 一個基本單位 )
建議用％或em而不用px
因為只要我將基本單位作調整, 例如改為75%, 基本單位重新以12px作計算, 上述的h1、h2、p也會一併相對作調整, 因此用百分比或em來作設定, 是非常彈性的設定方式
另外
line-height:1.5; 為何不用 px 或 em 、%
因為設定了 px 或 em 、%
會以基本單位作為統一基準計算 而造成標題字行距過擠的狀況
無單位的寫法會依各自的字大小作倍率換算
字型部份, 繁體部份多一個微軟正黑體可以使用,
英文 Microsoft JhengHei
----------------------------------------------------------------------------------------------------------------------------------
font-size 字體尺寸設定分為絕對大小、相對大小、高度、百分比
1.絕對大小
一般瀏覽器預設為 medium(12pt=16px) 計算 一級約差1.2倍 為固定值 無繼承
xxlarge | xlarge | large | medium | small | xsmall | xxsmall
2.相對大小
有larger及smaller兩種,假設父元素為medium
larger = 絕對大小的large ,smaller = 絕對大小的small
3.高度
又分em、ex、px ｜ in、cm、mm、pt、pc （後五種為印刷單位）
1em = 1各基本單位
1ex = 1各基本單位（取小寫高度）
4.百分比訂閱： 文章 (Atom) - 第一個
