CSS應用
含有「CSS應用」共 15 篇內容
全部內容
發佈日期由新至舊
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
「px」，即像素，是最基本的單位，它常被用於指定字體大小、邊框粗細等。「em」和「rem」通常用於調整相對大小，「em」在子元素中的適用，而「rem」則以根元素為參考。另一方面，「vh」和「vw」分別代表視窗的高度和寬度百分比，特別適合實現響應式設計。「vmin」和「vmax」則根據視窗的最小或最大
01-選擇器寫法
圖片來源：自己擷取電腦螢幕
1.可以下.main .img .hot span
控制到a 下面的兩個span
也可以省略成下 .hot span 只要整個html不容易相撞到相同的class就可以
2.也可以下.hot .title 就單純控制span class=＂t
表格背景圖為由Photoshop設計並切割成上、中、下，在左右切割成左中右共九張圖，中間部位請設計為單色內容，四邊請設計為可重複延伸內容，並注意每個切片圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
四邊與四角共八個背景的設定，需安排三個搭配before、after設定出四邊四角圖框，第四層安排中
表格背景圖為由Photoshop設計並切割成上、中、下三張圖，左邊與右邊框需設計為可直向重複延伸，請注意圖寬與圖高，CSS屬性設定時需準確搭配圖尺寸。
首先設定類別【.fixed-width】，以安排上邊圖，設定設定背景圖為上邊圖、不重複，注意左右padding值(80)+寬值(220)須等於圖寬
當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。
首先新增類別【
首先由標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。
加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。
最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的
首先請加入串聯該CSS檔:
接著套用類別型態的CSS即可:
若需要修改請至該CSS檔修改CSS屬性即可:
【檢視範例】【下載範例】
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做
利用::before以及::after做出重疊多個背景，甚至多個邊框的效果。
由css3 【content】生成內容，content一般和::before,::after一起使用，用來生成內容，content的內容一般可以為以下四種：
none： 不生成任何值；
attr： 插入標籤屬性值；
ur
A.自訂編號清單
STEP1.
首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。
再藉由::before加入content:搭配【list-style-type】的值配合字串設計出中文項目符號。 如// content:"第"c
