1. 偽類和偽元素
1. 偽類
1. :link
2. :visited
3. :hover (重要)
4. :active
5. :focus(input標籤獲取游標焦點)
2. 偽元素
1. :first-letter
2. :before(重要 在內部前面新增)
3. :after(重要 在內部後面新增)
2. css屬性
1. 字型
1. font-family
2. font-size
3. font-weight
2. 文字屬性
1. text-align 對齊(重要)
2. text-decoration 裝飾 (去除a標籤的下劃線(text-decoration: none))
3. text-indent 首行縮排
3. 背景屬性
1. background-color 背景顏色
2. background-image 背景(九宮格涮葫蘆娃) url() no-repeat 50% 50%
4. color
1. red (直接寫名字)
2. #ff0000
3. rgb(255, 0, 0) --> rgba(255,0,0,0.5)
5. 邊框屬性 border
1. border-width (邊框寬度)
2. border-style (邊框樣式)
3. border-color (邊框顏色)
簡寫:border: 1px solid red;
6. css盒子模型
1. content (內容)
2. padding (內填充) 調整內容和邊框之間距離時使用這個屬性
3. border (邊框)
4. margin (外邊距) 多用於調整調整標籤之間的距離 (注意兩個挨著的標籤margin取最大值)
注意: 要習慣看瀏覽器console視窗那個盒子模型
7. display (標籤的展現形式)
1. inline
2. block 選單裡面的a標籤可以設定成block
3. inline-block
4. none (不讓標籤顯示,不佔位)
8. float(浮動)
1. 多用於實現布局效果
1. 頂部的導航條
2. 頁面左右分欄 (部落格頁面:左邊20%,右邊80%)
2. float
1. 任何標籤都可以浮動,浮動之後都會變成塊級 a標籤float之後就可以設定高和寬
3. float取值:
1. left
2. right
3. none
9. clear 清除浮動--> 清除浮動的***(內容飛出,父標籤撐不起來)
1. 結合偽元素來實現
.clearfix:after
2. clear取值:
1. left
2. right
3. both
10. overflow
1. 標籤的內容放不下(溢位)
2. 取值:
1. hidden --> 隱藏
2. scroll --> 出現滾動條
3. auto
例子:圓形頭像的例子
1. overflow: hidden
2. border-radius: 50% (圓角)
11. 定位 position
1. static(預設)
2. relative(相對定位 --> 相當於原來的位置)
3. absolute(絕對定位 -->相當對於定位過的前輩標籤)
4. fixed (固定 --> 返回頂部按鈕示例)
補充:脫離文件流的3種方式
float
absolute
fixed
12. opacity (不透明度)
1. 取值0~1
2. 和rgba()的區別:
1. opacity改變元素\子元素的透明度效果
2. rgba()只改變背景顏色的透明度效果
13. z-index
1. 數值越大,越靠近你
2. 只能作用於定位過的元素
3. 自定義的模態框示例
Day50 費解的開關 遞迴，狀態壓縮
費解的開關 今天一天也沒寫出這題。一開始是想著狀態壓縮第一行 然後發現沒那麼簡單。明天一定補題 應該要做乙個timetable 不然感覺學的亂七八糟的 今天發現就是狀態壓縮 只是change的方式要變化下一行 費解的開關 說多了都是淚 還以為輸出方法數 沒想到是輸出最小步數 注意是如果步數大於6的就...
CSS實現輸入框的高亮效果 Day50
又到週末了，這一天天過的真快，明天應該回老家了，不知道會不會有機會進行編寫，盡量爭取吧，實在不想就這樣間斷。如果說從前會一天天無聊到爆，那現在自己應該是一天天忙的要死，欠缺了太多東西，那些浪費的時間可不是懊惱就能解決的，出來混，終歸是要還的啊。先來幅圖畫，顯示下什麼是所謂的高亮效果 在輸入框周圍出現...
CSS實現輸入框的高亮效果 Day50
又到週末了，這一天天過的真快，明天應該回老家了。不知道會不會有機會進行編寫。盡量爭取吧，實在不想就這樣間斷。假設說從前會一天天無聊到爆，那如今自己應該是一天天忙的要死，欠缺了太多東西，那些浪費的時間可不是懊惱就能解決的。出來混。終歸是要還的啊。先來幅圖畫，顯示下什麼是所謂的高亮效果 在輸入框周圍出現...