Quick Guide

Quick Guide
原由 pagebook2 上載

產品的Quick Guide第一次做這種包裝類的東西

關於CSS的觀念

經過W3C的推廣現在網頁切版的方式已經從傳統的table1佈局,演變成現在所謂的"DIV"+CSS

但是若是以這樣的說法其實不是很正確,原因在於HTML的標籤這麼多我們也不是只有使用DIV而已,只是DIV是最常用的一種標籤,所以DIV+CSS正確的說法應該是XHTML+DIV簡單來說就是更標準化HTML語法+CSS那麼更標準化的涵義為何?

我個人覺得是將現有的HTML標籤作最適合的運用而不要去排斥任何HTML的標籤,下面舉一個簡單的例子來說明:
我們設定一個標題,可以有下面2種做法

第1種直接使用h1 h2 h3...等html的標題標籤 如下:
<h1> title01 </h1>

第2種是設定一個class 讓div使用 如下:
<div class=' title' > title01 </div>

這2種都可以達到我們要的結果,但是就HTML的語意來說第一種就是比較標準化的做法,因為只要看到標籤就知道是標題了,而第2種則須看class的命名為何,或是要去看他css裡面是寫些什麼才有辦法判定他到底是什麼東西,而且語法也比第1種要複雜,還得想他的命名實在不是很人性化,所以說html有些標籤還是無可取代的尤其是table以下列出一些常用的html語法給大家參考

標題標籤:
<h1>、<h2>、<h3>、<h4>...

列表標籤:
<ul>、<li>、<ol>、<dl>、<dt>、<dd>

容器標籤:
<div>、<span>

段落標籤:
<p>

表格標籤:
<table>、<caption>、<tr>、<th>、<td>

圖片標籤:
<img>

粗體文字標籤:
<b>、<strong>

設定最小或最大寬或高

於原始CSS寬或高前面多加上min-或是max-
可以一起使用也可以只設其中一種視個人需求去調整
以下以最大寬度不大於1000px, 最小寬度不小於700px設定一個class為例

css的寫法:

.min_max {
min-width: 700px; /* min-weight */
max-width: 1000px; /* max-weight */
width:expression(document.body.clientWidth < 700? "1000px" : document.body.clientWidth > 700? "1000px" : "auto"); /* for IE6 */
}

width:expression(document.body.clientWidth < 700? "1000px" : document.body.clientWidth > 700? "1000px" : "auto");
這行則是給IE6或更舊的瀏覽器觀看的, IE7,8和Firefox等較新的瀏覽器已經支援 min-width 和 max-width 的 CSS 語法.