黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
生活随笔
收集整理的這篇文章主要介紹了
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、基礎(chǔ)班學(xué)習(xí)路線
三、CSS3基礎(chǔ)
1.Emmet語法
emmet語法生成html標簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><!-- .nav --><div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.one --><p class="one"></p><!-- span.gray --><span class="gray"> </span><!-- ul>li#two --><ul><li id="two"></li></ul><!-- .demo$*5 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div><!-- .demo*5 --><div class="demo"></div><div class="demo"></div><div class="demo"></div><div class="demo"></div><div class="demo"></div><!-- div{nihao} --><div>nihao</div><!-- div{nihao}*5 --><div>nihao</div><div>nihao</div><div>nihao</div><div>nihao</div><div>nihao</div></body> </html>emmet語法快速生成css樣式
快速格式化代碼
- 格式化文檔 Format Document
2.CSS的復(fù)合選擇器
什么是復(fù)合選擇器
后代選擇器（重要）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 只要讓ol中的li變粉色，ul中的li不用 */ol li {color: pink}ol li a {color: red;}.nav li a {color: yellow;}</style> </head><body><ol>變態(tài)寫法<li>我是ol 的孩子</li><li>我是ol 的孩子</li><li>我是ol 的孩子</li><li><a href="#">我是孫子</a></li></ol><ul><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">不會變化的</a></li></ul><ul class="nav"><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li>我是ul 的孩子</li><li><a href="#">會變化的</a></li></ul> </body></html>子元素選擇器（重要）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav>a {color: red;}</style> </head><body><div class="nav"><a href="#">我是兒子</a><p><a href="#">我是孫子</a></p></div> </body></html>并集選擇器（重要）
鏈接偽類選擇器
-
偽類選擇器的概念 ：
-
鏈接偽類選擇器 ：
-
鏈接偽類選擇器實際工作開發(fā)中的寫法 ：
：focus偽類選擇器
復(fù)合選擇器總結(jié)
3.CSS的元素顯示模式
什么是元素顯示模式
塊元素
行內(nèi)元素
行內(nèi)塊元素
元素顯示模式總結(jié)
元素顯示模式轉(zhuǎn)換
snipaste
- f1截圖并留在屏幕上
- option在圖片上取色
簡介版小米側(cè)邊欄案例
- 鏈接a元素明明是行內(nèi)元素卻要豎著顯示，且這個鏈接點擊的寬度很廣，也就是說這個a有個寬度高度；所以就是把鏈接轉(zhuǎn)換成塊級元素
單行文字垂直居中的原理
- 就是行高的上空隙和下空隙把文字擠到中間了。行高大于盒子高度，則文字偏下；小于，則文字偏上。
4.CSS的背景
背景顏色
背景圖片
背景平鋪
背景位置-方位名詞
背景位置案例一 小圖標+文字
- 效果 ：如圖的小圖標和文字基本上是居中對齊的在一條線上
- 如果這個小圖標采用在h3標簽里插入圖片img的話，它的中間線就不能和后面的文字在同一條線上了，所以要用bgi
背景位置案例二 超大背景圖片 王者榮耀
背景位置-精確單位
背景位置-混合單位
背景固定
背景復(fù)合寫法
背景顏色半透明
背景總結(jié)
綜合案例-五彩導(dǎo)航
- hover版本就不需要加no-repeat了因為上面有
總結(jié)
以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU-6290 奢侈的旅行 2018女
- 下一篇： 黑马程序员pink老师前端入门教程，零基