CSS例項演示

2021-10-12 05:09:10 字數 3821 閱讀 8109

css背景

設定頁面的背景顏色

設定不同元素的背景顏色

設定乙個影象作為頁面的背景

錯誤的背景

如何在水平方向重複背景影象

如何定位背景影象

乙個固定的背景(這個不會隨頁面的其餘部分滾動)

宣告背景屬性

高階的背景例子

css文字

設定不同元素的文字顏色

文字對齊

移除鏈結下劃線

裝飾文字

控制文字中的字母

縮排文字

指定了字元之間的空間

指定了行與行之間的空間

設定元素的文字方向

增加單詞之間的空格

在乙個元素內禁用文字換行

內部文字影象的垂直對齊

css的字型

設定文字的字型

設定字型大小

用px設定的字型的大小

用em設定的字型的大小

用百分比和em設定字型的大小

設定字型樣式

設定字型的異體

設定字型的粗細

在乙個宣告的所有字型屬性

css鏈結

為訪問/未訪問鏈結新增不同的顏色

在鏈結上使用文字裝飾

指定鏈結的背景顏色

超連結新增其他樣式

高階 - 建立鏈結框

css列表

列表中所有不同的列表項標記

設定作為列表項標記的影象

使用跨瀏覽器解決方案設定乙個列表項標記的影象

在乙個宣告中的所有列表屬性

css**

指定乙個表的th,td元素和黑色邊框

使用border-collapse

指定**的寬度和高度

設定內容的水平對齊方式(文字對齊)

設定內容的垂直對齊(垂直對齊)

指定th和td元素的填充

指定**邊框的顏色

設定**標題的位置

建立乙個奇特的表

css盒模型

指定元素的總寬度為250畫素

使用跨瀏覽器的解決方案指定元素的總寬度為250畫素的

css邊框

設定四個邊框的寬度

設定上邊框的寬度

設定底部邊框的寬度

設定左邊框的寬度

設定右邊框的寬度

設定四個邊框的樣式

設定上邊框的樣式

設定下邊框的樣式

設定左邊框的樣式

設定右邊框的樣式

設定四個邊框的顏色

設定上邊框的顏色

設定下邊框的顏色

設定左邊框的顏色

設定右邊框的顏色

在乙個宣告中的所有邊框屬性

每邊設定不同的邊框

在乙個宣告中的所有頂部邊框屬性

在乙個宣告中的所有下邊框屬性

在乙個宣告中的所有左邊框屬性

在乙個宣告中的所有右邊框屬性

css輪廓

圍繞乙個元素(outline),繪製一條線

設定輪廓的樣式

設定輪廓顏色

設定輪廓的寬度

css邊距

指定乙個元素的邊距

邊距縮寫屬性

文字頂部邊距設定的值使用厘公尺

使用百分比值設定文字的底部邊緣

使用厘公尺值設定文字的左邊距

css填充

設定元素的左部填充

設定元素的右部填充

設定元素的頂部填充

設定元素的底部填充

在乙個宣告中的所有填充屬性

css分組和巢狀

組選擇器

巢狀選擇器

css尺寸

使用畫素值設定影象的高度

使用百分比設定影象的高度

使用畫素值來設定元素的寬度

使用百分比來設定元素的寬度

設定元素的最大高度

使用畫素值設定元素的最大寬度

使用百分比來設定元素的最大寬度

設定元素的最低高度

使用畫素值來設定元素的最小寬度

使用百分比來設定元素的最小寬度

css顯示

如何隱藏乙個元素(visibility:hidden)

如何不顯示元素(display:none)

如何顯示乙個元素的內聯元素

如何顯示乙個元素的塊元素

如何使用**的collapse屬性

css定位

元素相對瀏覽器視窗的位置

元素的相對定位

元素的絕對定位

重疊的元素

設定元素的形狀

如何使用滾動條來顯示元素內溢位的內容

如何設定瀏覽器自動溢位處理

使用畫素值設定影象的頂部

使用畫素值設定影象的底部

使用畫素值設定影象的左邊

使用畫素值設定影象的右邊

更改游標

css浮動

簡單的使用float屬性

為影象新增邊框和邊距並浮動到段落的左側

標題和向右側浮動

讓段落的第乙個字母浮動到左側

使用float屬性建立乙個廊

開啟float - clear屬性

建立乙個水平選單

建立乙個沒有**的網頁

css對齊元素

使用margin的中間調整

左/右位置對齊

使用跨瀏覽器解決方案,設定左/右位置對齊

左/右對齊,浮動

使用跨瀏覽器解決方案,設定左/右位置對齊,浮動

css生成的內容

把括號內的url用content屬性插入到每個鏈結後面

章節和分節的編號是"第1節","1.1","1.2"等

quotes 屬性指定了引號

css偽類

新增不同顏色的超連結

給超連結新增其他樣式

使用:焦點

:first-child - 匹配了第乙個p元素

:first-child - 匹配了第乙個p元素中的i元素

:first-child - 匹配了第乙個p元素中的所有i元素

使用:lang

css偽元素

把文字的第乙個字母設為特殊的字母

把第一行文字設定為特殊

把第一行文字的第乙個字母設定為特殊

使用:在乙個元素之前插入一些內容

使用:在乙個元素之後插入一些內容

css導航欄

垂直導航欄的全樣式

水平導航欄的全樣式

css廊

css影象的不透明度

建立透明影象 - 滑鼠懸停效果

建立乙個背景影象與文字的透明框

css影象拼合

影象拼合

影象拼合-導航列表

懸停效果與影象拼合

css屬性選擇器

選擇具有title屬性的元素

選擇標題=乙個特定值的元素

選擇標題=乙個特定值的元素(使用(~)分隔屬性和值)

選擇標題=乙個特定值的元素(使用(|)分隔屬性和值)

opencv 例項演示

1.腐蝕膨脹 main.cpp include opencv2 imgproc imgproc.hpp include opencv2 highgui highgui.hpp include highgui.h include include erosion腐蝕 dilation膨脹 滑動條用來控制...

mysql游標例項演示

剛接觸mysql游標的朋友們可能一時半會兒無法理解mysql游標是什麼,游標怎麼用,這邊拿了乙個簡單的mysql游標例項來演示給大家,或許大家看了就能馬上理解什麼是游標,一般什麼情況下使用游標.整體感覺游標用得相對來說比較少,平時也感覺不出它有什麼作用,現在也是朦朦朧的概念吧。談談我對他的理解吧。游...

mysql游標例項演示

剛接觸mysql游標的朋友們可能一時半會兒無法理解mysql游標是什麼,游標怎麼用,這邊拿了乙個簡單的mysql游標例項來演示給大家,或許大家看了就能馬上理解什麼是游標,一般什麼情況下使用游標.整體感覺游標用得相對來說比較少,平時也感覺不出它有什麼作用,現在也是朦朦朧的概念吧。談談我對他的理解吧。游...