8.19前端
阿新 • • 發佈：2018-08-19
遮罩 作業 小米 hid 購物車 ott nav 邊框屬性 子元素
2018-8-19 13:48:43
新城下暴雨 啦啦啦啦
先把代碼弄上來 然後再把筆記弄上來,,然後去寫一個小米商城網站!
我可以用 爬蟲爬 啦啦啦
<!DOCTYPE html> <html> <head> <title>透明度</title> <meta charset="utf-8"> <style type="text/css"> .c1, .c2{ height: 400px; width: 200px; color:red; } .c1{ background-color: black; /*透明度*/ opacity: 0.5 } .c2{ background-color: rgba(0,0,0,5); } </style> </head> <body> <div class="c1">我是c1類的div標簽</div> <div class="c2">我是c2類的div標簽</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>青春版模態框</title> <!-- 就是出來個框然後後面有一片陰影遮罩 --> <meta charset="utf-8"> <style type="text/css"> .cover{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,5); } .modal{ width: 600px; height: 400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left:-300px; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>小米商城導航欄</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } ul { list-style: none; } .nav-left li { float: left; padding-right: 20px; } .nav-right { float: right; } .c1{ clear: left; } /* 增加一個正經的div,清除浮動 左右不能有浮動,被迫擠到下一行,占空然後背景顏色就填充好了*/ .clearfix:after. .clearfix:before { clear: both; content: :""; display: block; } .nav{ margin-left: : 20px; background-color: black; padding: 15px 0px; } </style> </head> <body> <div class="nav clearfix"> <div class="nav-left"> <ul> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> <li><a href="">吾皇萬歲</a></li> </ul> </div> <div class="nav-right"> <a href="">登入</a> <a href="">註冊</a> <a href="">購物車</a> </div> <div class="c1"></div> </div> </body> </html>
day50
1. 內容回顧
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 {
content: "",
display: "block",
clear: both;
}
2. clear取值:
1. left
2. right
3. both
10. overflow
1. 標簽的內容放不下(溢出)
2. 取值:
1. hidden --> 隱藏
2. scroll --> 出現滾動條
3. auto
4. scroll-x
5. scroll-y
例子:
圓形頭像的例子
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. 自定義的模態框示例
2. CSS補充
3. 作業(小米商城)
8.19前端