Div表格原理與實作
Div表格原理與實作 |
首先的認知:
無屬性:<標籤名稱>內容</標籤名稱> *重要的是:內容要被標籤名稱所包夾 例如: <IMG SRC="sample.gif"></IMG> -------->顯示圖片</IMG>一般可省略
Style Sheet 是一種屬性名稱,中文稱呼「樣式表」。HTML是用來記述文件的邏輯結構的,不過在以前Netscape和Microsoft這2家公司的市場爭奪戰之中(現在多了Mozilla Firefox),HTML也逐漸地被使用來記述外觀。後來為了讓HTML還原他最初的作用,有人便提出了「讓邏輯結構與外觀(修飾)分開來使用」。為此,『Style Sheet 』因而誕生。
Cascading Style Sheets(串接樣式表),簡稱CSS。定義為:它是由許多樣式名稱和樣式指定值所組成的字串,我們可以利用設定好的樣式表,指定給某一種HTML標籤,或某一群組HTML標籤來使用。而被套用的HTML標籤,將會依據所套用的CSS來顯式它的外觀。所以特性類似的標籤就會給予相同的樣式名稱,讓Style Sheet能讓設計著有快速且簡單的方法。
Style Sheet(樣式表)的使用方式按照用途,狀況的不同,可分成幾種方式。
區塊屬性的Style Sheets:(僅列出DIV可用) 紅色的樣式是本篇的重點 樣式 樣式名稱 值 寬度 width 點pt、英寸in、公分cm、像素px、百分比% 高度 height 點pt、英寸in、公分cm、像素px、百分比% 左邊位置 LEFT 點pt、英寸in、公分cm、像素px、百分比% 顯示方式 display block (換行)、inline (不換行)、 浮動元件位置 float left、right
這個性質是設定當區塊內包含的元件大於區塊之寬或高時,顯示的方法。可用值有auto(自動設定,當需要時出現捲軸)、scroll(強迫顯示捲軸,即使內部元件並無超過區塊邊界)、hidden(超出區塊的部份不顯示)、visible(全部顯示,無視區塊大小)。最常用的overflow:auto讓瀏覽器自動判斷 。 同上(只有水平) overflow-x 同上 同上(只有垂直) overflow-y 同上 元件上方位置 top 點pt、英寸in、公分cm、像素px、百分比% 清除浮動位置 clear left、right、both
AUTO(自動)、CROSSHAIR(十字)、DEFAULT(箭頭)、HAND(手形)、MOVE(移動)、E-RESIZE、NE-RESIZE、NW-RESIZE、N-RESIZE、SE-RESIZE、SW-RESIZE、S-RESIZE、W-RESIZE、TEXT(文字)、WAIT(等待)、HELP(求助) ← 滑鼠移到這會變指標喔 元件垂直調整 Vertical-align BASELINE、MIDDLE、SUB、SUPER、TEXT-TOP、TEXT-BOTTOM、TOP、BOTTOM 放大或縮小 Zoom 百分比 段落屬性的Style Sheets: 樣式 樣式名稱 值 文字間隔 letter-spacing 一般使用pt(點)或px(像素)或% : 例 9pt、10px 列高 line-height 點pt、英寸in、公分cm、像素px、百分比%
none(無)、underline(加上底線)、 自動轉換大小寫 text-transform none、capitalize(首字變大)、uppercase、lowercase 文字對齊方式 text-align left、right、center(置中)、justify(分散對齊) 文字縮排 text-indent 一般使用pt(點)或px(像素)或% : 例 15pt、12px 單字間隔 word-spacing 一般使用pt(點)或px(像素)或% : 例 2pt、3px 文字方向 writing-mode tb-rl (上至下、右至左)、lr-tb(上至下、 左至右、標準) 文字方向 unicode-bidi: bidi-override; DIRECTION: 方向 rtl(右至左)、ltr(左至右) text-autospace、 text-justify、word-break(換行方式) 可用... 文字屬性的Style Sheets: 樣式 樣式名稱 值 文字顏色 color 一般方式設定 文字大小 font-size 一般使用pt(點)或px(像素)或% : 例 9pt 、10px 字型 font-family Arial、Georgia、新細明體...等各種字型名稱 文字粗細 font-weight lighter、normal、bold、bolder (由細到粗排列) 斜體 font-style normal、italic、oblique (一般使用italic) 英文樣式 font-variant normal、small-caps 不可用 背景屬性的Style Sheets: 樣式 樣式名稱 值 背景顏色 BACKGROUND-COLOR 可為顏色名稱 ( 16種 ) 或16進制表示法 - #RRGGBB ( 00暗~FF亮 ) 、#RGB ( 0暗~F亮 ) 表紅綠藍強度、 不可用 邊框屬性的Style Sheets: 捲軸屬性的Style Sheets: 樣式 樣式名稱 值
參考[here]教學 第12步驟 濾鏡屬性的Style Sheets:
先考慮橫向部份: 關鍵解說: 表格最先要表現出來橫向的方塊排列.... 第一種方式(使用Display:inline;) :(向左下對齊) HTML:
A
B
第二種方式(使用float:left;):(向左上對齊) HTML: <DIV style="float:left;border:1px solid #000000; WIDTH: 99px; HEIGHT: 60px; background-color:#99FF33"> 顯示結果:
A
B
以3乘3表格為例子..(為了簡化語法,因此把上面三張圖合併成一張圖) 看完橫向部份,再考慮縱向部份,縱向很簡單,因為<div>本來就是縱向無空白縫隙接密的,但是在MSN Spaces上因為本身附的Rich-Text Editor會重新編排部分語法,在<img>後面直接加上<div>時會產生多出的空白行的問題,這時就要使用<br>來產生無空白行斷行,或是把圖放進<div>標籤裡解決。 當你有了周圍8張圖片,上面的部份就如上一段所說,中間然後把圖一張一張放進<div>裡,下面的部份跟上面一樣。 *所以製作一個DIV表格僅剩的技巧就是把寬高長度都要算的好好....(不會有空隙的關鍵) 對照圖:(常用3x3) HTML語法: <img src=頂圖 height="第一行高" width="A+B+C"><br><DIV style="OVERFLOW: hidden; WIDTH: A+B+C px; HEIGHT: 第二行高"> PS.可以下載 方塊說明式Word檔[按我] <img src=頂圖 height="第一行高" width="A+B+C">和<IMG height=第三行高 src="底圖" width="A+B+C">是上下圖(在此是把上圖(下圖)合併來看) 背景顏色為暗粉色:包住第2行所有東西 <br>必加..: 其他部分請參考最前面的Style Sheet..
<TABLE> <DIV> 圖示
<table>
<tr><td>A</td></tr> </table>
<div>A</div>
A
<table>
<tr><td>A</td><td>B</td></tr> <tr><td>C</td><td>D</td></tr> </table>
<div>
<div style="FLOAT: left;">A</div> <div style="FLOAT: left;">B</div> </div> <div> <div style="FLOAT: left;">C</div> <div style="FLOAT: left;">D</div> </div>
A
B
C
D
<table> <div>
A
B
C
D
E
附:MSN Spaces 網誌模組大小對照表(繁體中文): 附:好玩吧...還可以把MSN Spaces的框框拿來用XD |