網(wǎng)站圖標(biāo)
- 網(wǎng)站的icon一情況下是放在網(wǎng)站跟目錄中的，命名一般是命名為
favicon.ico
清除默認(rèn)樣式
- 網(wǎng)頁(yè)中清除基本樣式的方法有很多種，做常見(jiàn)的有兩種
- 下載
reset.css清空瀏覽器的樣式- 優(yōu)點(diǎn):很暴力的清除了所有的瀏覽器樣式，我們寫(xiě)什么樣式就是什么樣式
- 缺店:導(dǎo)致網(wǎng)頁(yè)性能變差一點(diǎn)
- 下載
normalize.css清空瀏覽器樣式- 優(yōu)點(diǎn):會(huì)保留有價(jià)值的瀏覽器樣式，重要的是還修復(fù)了大量的瀏覽器bug
- 缺店:代碼數(shù)量較多，而且樣式清除不齊全
工具類(lèi)
- 一般開(kāi)發(fā)中 如果是自已開(kāi)發(fā)的話，那么在網(wǎng)頁(yè)中還會(huì)引入一個(gè)
back.css作為自已的工具類(lèi)來(lái)使用
視頻
如果是使用視頻來(lái)作為背景使用，那么注意點(diǎn)有如下:
-
視頻文件一般來(lái)說(shuō)會(huì)比較大，所以用戶沒(méi)有下載好這個(gè)視頻之前，看到的網(wǎng)站感覺(jué)會(huì)不好，所以得給網(wǎng)站的視頻加一個(gè)封面圖片 ，也就是給video加上
poster屬性<vidoe poster = "封面圖片"> </video> -
一般如果使用視頻來(lái)做背景的話，我們會(huì)希望它是自動(dòng)播放的，循環(huán)播放的，靜音的、而且兼容性要比較完美的，所以就要用到下面的方法
<video autoplay loop muted poster = "images/圖片路徑.jpg"> <source src = "images/視頻路徑.mp4" type = "video/mp4"> <source src = "images/視頻路徑.webm" type = "video/webm"> </video>
關(guān)于object-fit
- 如果想要背景在保持等比寬高的情況下，縮放不變形，那么就在背景所在的元素中加入
object-fit:cover屬性，這樣子就可以保持等比拉伸
關(guān)于定位和hover
- 如果給一個(gè)元素添加了
position來(lái)進(jìn)行定位，那么很有可能他的定位會(huì)影響到hover事件的響應(yīng)，這個(gè)時(shí)候我們只需要給整體的元素的級(jí)別使用z-index提升一下就可以，
關(guān)于絕對(duì)定位來(lái)居中定位的兩個(gè)技巧
- 使用
position:absulote進(jìn)行定位，如果想要居中，那么有兩種方法。
- 第一種定位的方式
position:absolute;
top:50%
left:50%
margin-top:-自身高度的一半；
margin-left:-自身寬度的一半
- 第二種定位的方式
position:absolute;
top:50%
left:50%
transform:translateX(-50%) translateY(-50%);;
兩種定位的對(duì)比
- 第一種的話 ，兼容性會(huì)比較好一些，因?yàn)椴皇怯玫絚ss3的屬性，兼容老的瀏覽器會(huì)容易一些，但是需要知道具體的寬高，所以換了圖片之類(lèi)的，比較麻煩。
- 第二種的話，存在兼容性的問(wèn)題，但是它很方便，不用考慮任何的更換圖片的問(wèn)題，也不需要知道具體的寬高，直接就能適應(yīng)。
定位流
- 使用定位流可以單獨(dú)的設(shè)置某一個(gè)元素 無(wú)論他原本是什么狀態(tài)都可以，并且不影響旁邊元素
css3動(dòng)畫(huà)
- 如果想讓css3動(dòng)畫(huà)執(zhí)行完畢后，停留在最后一個(gè)位置，那么則需要加上
animation-fill-mode:forwards - 圖標(biāo)和文字對(duì)齊問(wèn)題
- 如果圖標(biāo)和文字不對(duì)齊，就像下圖一樣
- 1552843014680.png
- 那么解決辦法就是，給這個(gè)想要對(duì)齊圖標(biāo)的標(biāo)簽加上
vertical-align:middle即可
浮動(dòng)注意點(diǎn)
- 在企業(yè)開(kāi)發(fā)中，如果元素設(shè)置了左浮動(dòng)，那么就不要設(shè)置左邊的
margin，不然的話 容易出現(xiàn)bug
