表格高級和濾鏡

一，表單高級

表單的做用：用來收集用戶的信息的;

表單的組成：

表單域<form name="" method="" action=""></form>

表單控件<input type="text" value=""/>

提示信息

 

 

 

1)表單字段集

<fieldset></fieldset>

功能：至關於一個方框，在字段集中能夠包含文本和其餘元素。該元素用於對錶單中的元素進行分組並在文檔中區別標出文本。fieldset元素能夠嵌套，在其內部能夠在設置多個fieldset對象。

 

2)字段級標題

<legend></legend>

功能：legend元素能夠在fieldset對象繪製的方框內插入一個標題。legend元素必須是fieldset內的第一個元素。

 

 

3)表單元素

1）上傳文件框

文件域：<input type="file" />

2）圖像域

<input type="image" width="100" height="100" border="2" alt="上傳圖片" />

說明：火狐不支持此表單元素;

image 定義圖像形式的提交按鈕。

 

 

3)提示信息標籤

<label for="綁定控件id名"></label>

功能：label元素用來定義標籤，爲頁面上的其餘元素指定提示信息。要將label元素綁定到其餘的控件上，能夠將label元素的for屬性設置爲與該控件的id屬性值相同。

 

 

 

 

 

 

2、表格高級

一、表格的做用：顯示數據;

 

（一）關於表格的CSS屬性

一、單元格間距(該屬性必須給table添加)

border-spacing:value;

border-spacing 屬性設置相鄰單元格的邊框間的距離（僅用於「邊框分離」模式）。

 

註釋：若是已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 border-spacing 屬性。

二、合併相鄰單元格邊框

border-collapse:separate(邊框分開)/collapse(邊框合併)；

三、無內容單元格顯示、隱藏

empty-cells:show/hide;

 

該屬性必須給table添加

 

 

 

 

 

 

四、表格佈局算法

table-layout:auto/fixed(固定寬度，不會隨內容多少改變單元格寬度）

 

自動錶格佈局：列的寬度是由列單元格中沒有折行的最寬的內容設定的。

缺點：較慢（由於它須要在肯定最終的佈局前訪問表格中的全部內容）。

優勢：靈活

固定表格佈局

優勢：加快運行的速度,容許瀏覽器更快的對錶格進行佈局。

缺點:不太靈活

 

 

五、表格標題

<caption>標題內容</caption>

caption:表格標題

表格標題位置：caption-side:top/right/bottom/left

說明：left,right位置只有火狐識別，top,bottom IE7上版本支持，ie7如下版本不支持其它屬性值，只識別top

 

 

六、表格佈局元素

一、表格基本組成

table（表格） tr（行） td（列）

th:表格列標題（放在tr裏）

th 元素內部的文本一般會呈現爲居中的粗體文本，而 td 元素內的文本一般是左對齊的普通文本。

 

 

 

 

 

重要屬性：

1）、colspan="value" 合併列

2）、rowspan="value" 合併行

水平對齊：align:left/center/right

3）、valign="top/bottom/middle/baseline" 垂直對齊方式

 

４）rules="groups/rows/cols/all/none" 添加組分隔線

說明：

rows:位於行之間的線條

cols:位於列之間的線條

all：位於行和列之間的線條

none:沒有線條

groups:位於行組和列組之間的線條

 

 

 

二、數據行分組

<thead></thead> 表頭

<tbody></tbody> 表體

<tfoot></tfoot> 表尾

說明：一個Table中，只能包含一個thead,一個tfoot,但可包含多個tbody。

 

定義和用法 <thead> 標籤訂義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。 thead 元素應該與 tbody 和 tfoot 元素結合起來使用。 tbody 元素用於對 HTML 表格中的主體內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁腳）內容進行分組。 註釋：若是您使用 thead、tfoot 以及 tbody 元素，您就必須使用所有的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。 提示：在默認狀況下這些元素不會影響到表格的佈局。不過，您可使用 CSS 使這些元素改變表格的外觀。 詳細描述 thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時，您也許但願擁有一個標題行，一些帶有數據的行，以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

 

 

三、數據列分組

<colgroup span="value"></colgroup>

<col span="value" />

說明：

1）col和colgroup元素會根據從左到右的順序依次對數據表格進行分組。

2）span屬性顯示指定相鄰幾列組成一組，span屬性值默認爲1，默認時僅定義一列爲一組。

3）能夠經過給table添加rules="groups"屬性來給分組列添加組分割線。

注意：雖然col和colgroup具備相同的功能，可是，咱們只能使用colgroup元素來決定表格內容部分分割線（rules）應該處於的位置，而col沒有這個功能。

span number 規定列組應該橫跨的列數。

<colgroup> 標籤用於對錶格中的列進行組合，以便對其進行格式化。 如需對所有列應用樣式，<colgroup> 標籤頗有用，這樣就不須要對各個單元和各行重複應用樣式了。 <colgroup> 標籤只能在 table 元素中使用。

 

 

3、CSS 濾鏡

CSS樣式表是一種爲超文本標籤語言提供加強補充服務的技術，可對每個html的標籤作精雕細刻的修飾。只用html製做的網頁，對頁面內各部分的修飾能力有限且語句煩鎖，樣式表正是彌補這一缺陷的有力技術，它語句文法簡單，只要在源碼中插入style語句就可輕易實現頁面內任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網頁更加生動活潑，從而得到滿意的效果。固然，樣式表的強大還依靠的就是它的濾鏡功能。由於有了濾鏡，你們就能夠輕易地創造出「專業」的藝術效果。

1、什麼是樣式表濾鏡

說到濾鏡，其實它並非對圖像進行了什麼處理，而是在瀏覽器中對使用了該屬性的對象進行必定的修飾。樣式表濾鏡其實是樣式表一個新的擴展部分，使用這種技術簡單的語法就能夠把可視化的濾鏡和轉換效果添加到一個標準的html元素上，例如圖片、文本、以及其餘一些對象，爲頁面添加一些豐富的變化。若是你們有一些腳本語言的基礎，可以把濾鏡效果與相似javascript的腳本代碼作一些結合，就能夠擁有一個在樣式表濾鏡與腳本共同做用下創建的強大的動態交互文檔工具。如今能使用的濾鏡有13個之多，不過要欣賞到這些濾鏡的特效，必需要求用戶的瀏覽器必須在IE4.0/NC6.0之上，由於只有這些版本的瀏覽器才能支持樣式表濾鏡效果。

 

2、經常使用的樣式表濾鏡

隨着樣式表技術的不斷成熟，其濾鏡功能和種類也在不斷增多。若是用戶可以熟練地混合使用它們，將能夠產生意想不到的效果。在操做上，用戶只須要了解具體濾鏡的實際效果後，就能根據實際進行微調了。爲了使你們能有針對性地使用濾鏡，下面就把一些經常使用濾鏡的功能和參數詳細介紹以下：

一、濾鏡
做用：該濾鏡能夠實現各類溶入效果，若是你們將該濾鏡與網頁腳本語言結合起來，對濾鏡的參數進行處理的話，就能很輕易地作出淡入淡出的效果來。
語法：{filter：alpha(opacity=opacity，finishopacity=finishopacity，
style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)}
參數：Opacity參數表明圖象的起始透明度，其默認的數值是從0到100，0表明徹底透明，100表明徹底不透明；FinishOpacity是一個可選參數，若是想要設置漸變的透明效果，就可使用他們來指定結束時的透明度，做用範圍也是0到100；Style表示透明區域的形狀特徵，其中「0」表明統一形狀，「1」表明線形。「2」表明放射狀，「3」表明矩形；startx表示漸變透明效果開始處的X座標，starty表明漸變透明效果開始處的Y座標，finishx表明漸變透明效果結束處的X座標，finishy表明漸變透明效果結束處的Y座標。

二、模糊濾鏡
做用：該濾鏡主要是讓圖象產生一種模糊效果。
語法：{filter:blur(add=add，direction=direction，strength=strength)}
參數：該濾鏡主要包括三個參數，其中add是用來指定圖象是否被改變成印象派的模糊效果，模糊效果是按順時針的方向進行的，它的數值應該是ture或false；direction參數是用來設置模糊的方向的，其中0度表明垂直向上，每45度爲一個單位，默認值是向左的270度；strength 參數表明有多少像素的寬度將受到模糊影響，缺省的參數值是5個像素，並且該參數值只能使用整數來指定。

三、斜影濾鏡
做用：該濾鏡主要是爲對象創建輪廓的影子效果的，它能夠在指定的方向創建物體的投影；
語法：{filter:shadow(color=color,direction=direction)}
參數：斜影濾鏡只有兩個參數，其中color表明投影的底色，該數值是用英文字母來代替的，例如投影底色是紅色的話，就應該設置color=red;direction參數是用來設置投影方向的，若是該數值是0的話，就表明垂直投影，此外該數值每45度爲一個單位，它的默認值是向左的270度。

四、發光濾鏡
做用：該濾鏡能夠給圖象或者文字產生一種發光效果；
語法：{filter:glow(color=color,strength=strength)}
參數：該濾鏡的color參數與陰影濾鏡的color參數功能幾乎是同樣的，不過這裏的color參數是用來設置發光顏色的;strength參數是用來指定發光強度的，其值爲1到255之間的任何整數。

五、燈光濾鏡
做用：燈光濾鏡是模擬光源來投射文字或者圖象，使圖象和文字能產生必定的投射效果；
語法：{filter:light}
參數：一旦爲對象定義了「light"濾鏡屬性後，你們就能夠調用它的「方法(Method)"來設置或者改變屬性，該濾鏡可用的方法有：AddAmbient方法是用來加入包圍光源的，AddCone方法是用來加入錐形光源的，MoveLight方法是用來移動光源的，Changstrength方法是用來改變光源強度的，Changcolor方法是用來改變光的顏色的，Clear方法是用來清除全部光源的。

六、遮罩濾鏡
做用：該濾鏡能夠爲對象創建一個覆蓋於表面的膜，其效果就象戴着有色眼鏡看物體同樣。
語法： {filter:mask(color=color)}
參數：該濾鏡的color參數表示覆蓋對象表面的顏色，例如若是遮罩顏色爲綠色，那麼就應該設置color=blue。

七、陰影濾鏡
做用：陰影濾鏡就是給對象添加陰影效果，其工做原理是創建一個偏移量，加上色彩。
語法：{filter:dropshadow(color=color,offx=offx,offy=offy,positive=positive)}
參數：該濾鏡中的Color參數表示投射陰影的顏色，offx 表示水平方向陰影的偏移量，offy 表示豎直方向陰影的偏移量，Positive參數是一個布爾值，其數值若是爲TRUE，就爲任何的非透明像素創建可見的投影，若是爲FASLE，就爲透明的像素部分創建透明效果。

八、灰度濾鏡
做用：該濾鏡主要是將圖象對象轉換成灰度形式顯示。
語法：{filter:gray}
參數：該濾鏡沒有參數。

九、翻轉濾鏡
做用：翻轉濾鏡主要是實現圖象對象的水平或者豎直翻轉效果。
語法：{filter:filph} {filter:filpv}
參數：這種濾鏡也不帶參數，其中{filter:filph}是實現水平翻轉的，{filter:filpv} 是實現豎直翻轉的。

十、X光濾鏡
做用：X光濾鏡可讓對象反映出它的輪廓並把這些輪廓加亮。
語法： {filter:xray}
參數：該濾鏡自己不含有參數。

十一、倒置濾鏡invert(反相)
做用：使用該濾鏡能夠把包括色彩、飽和度、和亮度值等對象的可視化屬性所有翻轉。
語法： {filter:invert}
參數：該濾鏡沒有參數。

十二、波紋濾鏡
做用：波紋濾鏡能夠在水平和豎直方向利用正弦波打亂圖象，使圖象產生水波效果。
語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
參數：該濾鏡的add參數是一個布爾數值，它是用來表示是否要把對象按照波形樣式打亂；freq參數是用來設置波紋頻率的，也就是指定在對象上一共須要產生多少個完整的波紋；lightstrength參數能夠設置波紋光影的加強效果的，其數值範圍在0到100之間；phase參數是用來設置正弦波的偏移量的，strength是設置正弦波的振幅大小的。

 

 

在IE下使用的濾鏡，能夠實現不少不錯的特效，可是在chrome和火狐opera等瀏覽器裏這些就全都失效了，由於 濾鏡只是屬於IE瀏覽器開發下的功能，不支持IE內核的瀏覽器也就都不支持這些濾鏡。 不過通常都支持透明濾鏡，只是寫法不同，以下：

 

因此要都支持這個濾鏡，就得兩個都寫上

.myElement { filter: blur(2px) grayscale (.5) opacity(0.8); }

2、圖片高級-透明圖片

（一）網頁上經常使用的圖片格式（jpg,png,gif）

支持透明：gif，png(png8,png24,png32)

（二）網頁上的圖片形式（插入圖片和背景圖）

（三）插入圖片透明

 

 

3、網頁上經常使用的圖片格式

1)jpg:有損壓縮格式，靠損失圖片自己的質量來減少圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )

2）gif：有損壓縮格式，靠損失圖片的色彩數量來減少圖片的體積，支持透明，支持動畫，適用於顏色數量較少的圖像;

3)png:有損壓縮格式，損失圖片的色彩數量來減少圖片的體積，支持透明，不支持動畫，是fireworks的 源文件格式，適用於顏色數量較少的圖像;

 

 

A.圖片背景透明：

.gif：支持

.png8：支持(建議使用)

.png24:IE6不支持，其它內核瀏覽器支持（PS製做)

.png32：IE6不支持，其它內核瀏覽器支持

 

 

B.圖片自己透明

.png24:IE6不支持（ps製做)，可用filter兼容。

.png32：IE6不支持，可用filter兼容。

半透明插入圖片兼容IE6作法:（使用png32或PS製做的png24半透明圖片）：

樣式：

<style type="text/css">

.alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

(src="圖片路徑",sizingMethod="scale");width:value;height:value;}

.ie6hidden{_display:none;}

</style>

 

結構：

<span class="alpha"></span>

<img class="ie6hidden" src="" />