CSS 實例
CSS 實例
CSS背景
CSS文本
CSS的字體
CSS鏈接
CSS列表
CSS表格
設置內(nèi)容的水平對齊方式(文本對齊)
設置內(nèi)容的垂直對齊(垂直對齊)
指定TH和TD元素的填充
指定表格邊框的顏色
設置表格標題的位置
創(chuàng)建一個奇特的表
CSS盒模型
指定元素的總寬度為250像素
使用Crossbrowser解決方案指定元素的總寬度為250像素的
CSS邊框
設置四個邊框的寬度
設置上邊框的寬度
設置底部邊框的寬度
設置左邊框的寬度
設置右邊框的寬度
設置四個邊框的樣式
設置上邊框的樣式
設置下邊框的樣式
設置左邊框的樣式
設置右邊框的樣式
設置四個邊框的顏色
設置上邊框的顏色
設置下邊框的顏色
設置左邊框的顏色
設置右邊框的顏色
在一個聲明中的所有邊框屬性
每邊設置不同的邊框
在一個聲明中的所有頂部邊框屬性
在一個聲明中的所有下邊框屬性
在一個聲明中的所有左邊框屬性
在一個聲明中的所有右邊框屬性
CSS輪廓
圍繞一個元素(outline),繪制一條線
設置輪廓的樣式
設置輪廓顏色
設置輪廓的寬度
CSS邊距
指定一個元素的邊距
邊距縮寫屬性
文本頂部邊距設置的值使用厘米
使用百分比值設置文本的底部邊緣
使用厘米值設置文本的左邊距
CSS填充
設置元素的左部填充
設置元素的右部填充
設置元素的頂部填充
設置元素的底部填充
在一個聲明中的所有填充屬性
CSS分組和嵌套
組選擇器
嵌套選擇器
CSS尺寸
使用像素值設置圖像的高度
使用百分比設置圖像的高度
使用像素值來設置元素的寬度
使用百分比來設置元素的寬度
設置元素的最大高度
使用像素值設置元素的最大寬度
使用百分比來設置元素的最大寬度
設置元素的最低高度
使用像素值來設置元素的最小寬度
使用百分比來設置元素的最小寬度
CSS顯示
如何隱藏一個元素(visibility:hidden)
如何不顯示元素(display:none)
如何顯示一個元素的內(nèi)聯(lián)元素
如何顯示一個元素的塊元素
H如何使用表格的collapse屬性
CSS定位
元素相對瀏覽器窗口的位置
元素的相對定位
元素的絕對定位
重疊的元素
設置元素的形狀
如何使用滾動條來顯示元素內(nèi)溢出的內(nèi)容
如何設置瀏覽器自動溢出處理
使用像素值設置圖像的頂部
使用像素值設置圖像的底部
使用像素值設置圖像的左邊
使用像素值設置圖像的右邊
更改光標
CSS浮動
簡單的使用float屬性
為圖像添加邊框和邊距并浮動到段落的左側
標題和圖片向右側浮動
讓段落的第一個字母浮動到左側
使用float屬性創(chuàng)建一個圖片廊
開啟float - clear屬性
創(chuàng)建一個水平菜單
創(chuàng)建一個沒有表格的網(wǎng)頁
CSS對齊元素
使用margin的中間調整
左/右位置對齊
使用Crossbrowser解決方案,設置左/右位置對齊
左/右對齊,浮動
使用Crossbrowser解決方案,設置左/右位置對齊,浮動
CSS生成的內(nèi)容
把括號內(nèi)的URL用content屬性插入到每個鏈接后面
章節(jié)和分節(jié)的編號是"第1節(jié)","1.1","1.2"等
quotes 屬性指定了引號
CSS偽類
添加不同顏色的超鏈接
給超鏈接添加其他樣式
使用:焦點
:first-child - 匹配了第一個p元素
:first-child - 匹配了第一個p元素中的I元素
:first-child - 匹配了第一個p元素中的所有I元素
使用:lang
CSS偽元素
把文本的第一個字母設為特殊的字母
把第一行文字設置為特殊
把第一行文字的第一個字母設置為特殊
使用:在一個元素之前插入一些內(nèi)容
使用:在一個元素之后插入一些內(nèi)容
CSS導航欄
垂直導航欄的全樣式
水平導航欄的全樣式
CSS圖片廊
圖片廊
CSS圖像的不透明度
創(chuàng)建透明圖像 - 鼠標懸停效果
創(chuàng)建一個背景圖像與文本的透明框
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 動態(tài)搜索框
CSS 用戶信息卡片
CSS 卡片樣式
CSS 上一頁、下一頁樣式
CSS 各種提示信息框
CSS 三種價格表樣式
CSS 開關樣式
CSS 讓 DIV 水平居中顯示
CSS 上下左右四個方向箭頭
CSS 反饋信息表單
CSS font-awesome 圖標菜單欄
CSS 頂部導航樣式實例
CSS 便簽樣式效果
CSS 水平滾動菜單
CSS 垂直菜單
CSS 垂直滾動菜單
CSS 固定菜單欄
CSS 響應式登陸表單
CSS 固定底部菜單欄
CSS 下拉菜單
CSS 下拉內(nèi)容的對齊方式
CSS 導航條下拉菜單
CSS 帶搜索框的導航欄
CSS 帶搜索導航欄 - 帶提交按鈕
CSS 帶搜索導航欄 - 帶提搜索圖標
CSS 固定左側導航欄
CSS 固定左側導航欄 – 高度自適應
HTML/CSS/JS 聯(lián)系我們表單模板(帶百度地圖)
CSS 設計一個網(wǎng)頁