CSS 例項
CSS背景
設定頁面的背景顏色
設定不同元素的背景顏色
設定一個影象作為頁面的背景
錯誤的背景圖片
如何在水平方向重複背景影象
如何定位背景影象
一個固定的背景圖片(這個圖片不會隨頁面的其餘部分滾動)
宣告背景屬性
高階的背景例子
背景屬性的解釋
CSS文字
設定不同元素的文字顏色
文字對齊
移除連結下劃線
裝飾文字
控制文字中的字母
縮排文字
指定了字元之間的空間
指定了行與行之間的空間
設定元素的文字方向
增加單詞之間的空格
在一個元素內禁用文字換行
內部文字影象的垂直對齊
Text屬性的解釋
CSS的字型
設定文字的字型
設定字型大小
用px設定的字型的大小
用em設定的字型的大小
用百分比和em設定字型的大小
設定字型樣式
設定字型的異體
設定字型的粗細
在一個宣告的所有字型屬性
Font屬性的解釋
CSS連結
為訪問/未訪問連結新增不同的顏色
在連結上使用文字裝飾
指定連結的背景顏色
超連結新增其他樣式
高階 - 建立連結框
連結屬性的解釋
CSS列表
列表中所有不同的列表項標記
設定作為列表項標記的影象
使用跨瀏覽器解決方案設定一個列表項標記的影象
在一個宣告中的所有列表屬性
css 移除列表項 li 預設樣式
列表屬性的解釋
CSS表格
指定一個表的Th,TD元素和黑色邊框
使用border-collapse
指定表格的寬度和高度
設定內容的水平對齊方式(文字對齊)
設定內容的垂直對齊(垂直對齊)
指定TH和TD元素的填充
指定表格邊框的顏色
設定表格標題的位置
建立一個奇特的表
表格屬性的解釋
CSS盒模型
指定元素的總寬度為250畫素
使用跨瀏覽器的解決方案指定元素的總寬度為250畫素的
盒模型的解釋
CSS邊框
設定四個邊框的寬度
設定上邊框的寬度
設定底部邊框的寬度
設定左邊框的寬度
設定右邊框的寬度
設定四個邊框的樣式
設定上邊框的樣式
設定下邊框的樣式
設定左邊框的樣式
設定右邊框的樣式
設定四個邊框的顏色
設定上邊框的顏色
設定下邊框的顏色
設定左邊框的顏色
設定右邊框的顏色
在一個宣告中的所有邊框屬性
每邊設定不同的邊框
在一個宣告中的所有頂部邊框屬性
在一個宣告中的所有下邊框屬性
在一個宣告中的所有左邊框屬性
在一個宣告中的所有右邊框屬性
邊框屬性的解釋
CSS輪廓
圍繞一個元素(outline),繪製一條線
設定輪廓的樣式
設定輪廓顏色
設定輪廓的寬度
輪廓屬性的解釋
CSS邊距
指定一個元素的邊距
邊距縮寫屬性
文字頂部邊距設定的值使用釐米
使用百分比值設定文字的底部邊緣
使用釐米值設定文字的左邊距
Margin屬性的解釋
CSS填充
設定元素的左部填充
設定元素的右部填充
設定元素的頂部填充
設定元素的底部填充
在一個宣告中的所有填充屬性
padding屬性的解釋
CSS分組和巢狀
組選擇器
巢狀選擇器
分組和巢狀解釋
CSS尺寸
使用畫素值設定影象的高度
使用百分比設定影象的高度
使用畫素值來設定元素的寬度
使用百分比來設定元素的寬度
設定元素的最大高度
使用畫素值設定元素的最大寬度
使用百分比來設定元素的最大寬度
設定元素的最低高度
使用畫素值來設定元素的最小寬度
使用百分比來設定元素的最小寬度
尺寸屬性的解釋
CSS顯示
如何隱藏一個元素(visibility:hidden)
如何不顯示元素(display:none)
如何顯示一個元素的內聯元素
如何顯示一個元素的塊元素
如何使用表格的collapse屬性
Display屬性的解釋
CSS定位
元素相對瀏覽器視窗的位置
元素的相對定位
元素的絕對定位
重疊的元素
設定元素的形狀
如何使用滾動條來顯示元素內溢位的內容
如何設定瀏覽器自動溢位處理
使用畫素值設定影象的頂部
使用畫素值設定影象的底部
使用畫素值設定影象的左邊
使用畫素值設定影象的右邊
更改游標
定位屬性的解釋
CSS浮動
簡單的使用float屬性
為影象新增邊框和邊距並浮動到段落的左側
標題和圖片向右側浮動
讓段落的第一個字母浮動到左側
使用float屬性建立一個圖片廊
開啟float - clear屬性
建立一個水平選單
建立一個沒有表格的網頁
Float屬性的解釋
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屬性的元素
選擇標題=一個特定值的元素
選擇標題=一個特定值的元素(使用(~)分隔屬性和值)
選擇標題=一個特定值的元素(使用(|)分隔屬性和值)
屬性選擇器解釋
CSS 應用例項
- CSS 載入進度條
- CSS 分頁樣式
- CSS 進度條
- CSS 提示資訊例項
- CSS 文字覆蓋影象懸停效果
- CSS 文字覆蓋影象懸停效果 - 從上至下
- CSS 文字覆蓋影象懸停效果 – 從下至上
- CSS 文字覆蓋影象懸停效果 – 從右至左
- CSS 文字覆蓋影象懸停效果 – 從左至右
- CSS 文字覆蓋影象懸停效果 – 淡入透明
- CSS 垂直按鈕組
- CSS 按鈕組
- CSS Loading(載入) 動畫效果
- CSS Loading(載入) 動畫效果2
- CSS Loading(載入) 動畫效果3
- CSS Loading(載入) 動畫效果4
- CSS 動態搜尋框
- CSS 使用者資訊卡片
- CSS 卡片樣式
- CSS 上一頁、下一頁樣式
- CSS 各種提示資訊框
- CSS 三種價格表樣式
- CSS 開關樣式
- CSS 讓 DIV 水平居中顯示
- CSS 上下左右四個方向箭頭
- CSS 反饋資訊表單
- CSS font-awesome 圖示選單欄
- CSS 頂部導航樣式例項
- CSS 便籤樣式效果
- CSS 水平滾動選單
- CSS 垂直選單
- CSS 垂直滾動選單
- CSS 固定選單欄
- CSS 響應式登陸表單
- CSS 固定底部選單欄
- CSS 下拉選單
- CSS 下拉內容的對齊方式
- CSS 導航條下拉選單
- CSS 帶搜尋框的導航欄
- CSS 帶搜尋導航欄 - 帶提交按鈕
- CSS 帶搜尋導航欄 - 帶提搜尋圖示
- CSS 固定左側導航欄
- CSS 固定左側導航欄 – 高度自適應
- HTML/CSS/JS 聯絡我們表單模板(帶百度地圖)
- CSS 設計一個網頁