H5新增標(biāo)簽、樣式,手寫tab切換 水平垂直居中

H5新增標(biāo)簽

1.header : 頭部信息
2.footer :頁腳
3.nav:導(dǎo)航鏈接的部分。
4.main: 主體
5.section:獨(dú)立的內(nèi)容區(qū)塊
6.aside:側(cè)邊欄導(dǎo)航
7.article:文章標(biāo)簽
8.mark:標(biāo)記,內(nèi)容顯示背景顏色,可以修改
9.address:地址標(biāo)簽
10.time: 表示日期或時(shí)間,也可以同時(shí)表示兩者,相當(dāng)于span
11.figure+figcaption:表示一段獨(dú)立的內(nèi)容,一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。figcaption表示 figure 的標(biāo)題。從屬于 figure , 并且, figure 中只能放置一個(gè) figcaption。
12.video/audio

CSS3樣式

1.color:rgba(R,G,B,A) :

以上R、G、B三個(gè)參數(shù),正整數(shù)值的取值范圍為:0 - 255。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。A為透明度參數(shù),取值在0~1之間,不可為負(fù)值。

2.text-shadow:文本陰影。

指定多個(gè)陰影:(參數(shù)形式為X坐標(biāo) Y坐標(biāo) 陰影的模糊程度 陰影顏色)
text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;

3.box-shadow:盒子陰影。

注意:inset 可以寫在參數(shù)的第一個(gè)或最后一個(gè),其它位置是無效的。

4.word-break:自動(dòng)換行。

normal:使用瀏覽器默認(rèn)換行規(guī)則。
keep-all:只能在半角空格或連接字符處換行。
break-all:允許在單詞內(nèi)換行(對(duì)于標(biāo)點(diǎn)符號(hào)來說,允許標(biāo)點(diǎn)符號(hào)位于行首,不過在IE中是不可以的)。

5.word-wrap:讓長單詞與URL地址自動(dòng)換行。

word-wrap:break-word;

6.border-radius:圓角。
7. 引用的一些服務(wù)端字體。
8.box-sizing:border-box 怪異盒模型。
9.transform :2D轉(zhuǎn)換

rotate() 旋轉(zhuǎn)函數(shù) 取值度數(shù) Transform-origin 旋轉(zhuǎn)的基點(diǎn)

skew() 傾斜函數(shù) 取值度數(shù) (扭曲) skewX() skewY()

scale() 縮放函數(shù) 取值 正數(shù)、負(fù)數(shù)和小數(shù) scaleX()scaleY()

translate() 位移函數(shù) translateX()translateY()

10.transform: rotate3d()/ translate3d()/scale3d() 3D轉(zhuǎn)換

rotate3d(x,y,z,angle):旋轉(zhuǎn)

translate3d(x,y,z):平移

scale3d(x,y,z) 縮放

11.transition:過渡

transition-property 要運(yùn)動(dòng)的樣式 (all || [attr] || none)
transition-duration 運(yùn)動(dòng)時(shí)間
transition-delay 延遲時(shí)間
transition-timing-function 運(yùn)動(dòng)形式
ease:(逐漸變慢)默認(rèn)值
linear:(勻速)
ease-in:(加速)
ease-out:(減速)
ease-in-out:(先加速后減速)

手寫tab切換

1.利用JS寫
(參考二階段考試題)
2.vue 動(dòng)態(tài)組件寫。
(參考昨天鵬哥講的動(dòng)態(tài)組件)

水平垂直居中

1.position:absolute/fixed;top:50%;left:50%;margin-left:-(width/2);margin-top:-(height/2);

2.position:absolute/fixed;top:0;left:0;right:0;bottom:0;margin:auto;

3.display:flex;justify-content:center;align-items:center;如果寫的父元素為body,加上html,body{height:100%}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,421評(píng)論 0 11
  • (這是15年初學(xué)css時(shí)記的筆記) 選擇器 簡單選擇器 標(biāo)簽選擇器 直接把標(biāo)簽名加前面。 類選擇器 用.+ cla...
    burningalive閱讀 1,192評(píng)論 0 0
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,708評(píng)論 0 6
  • 細(xì)草穿沙雪半銷,涓流吻石花滿俏! 踏雪留痕梅花烙,花枝招展新人笑。
    會(huì)笑的眼淚閱讀 343評(píng)論 5 4
  • 就 說一下我自己吧 我呢 小時(shí)候在某個(gè)地方生活會(huì)了那里的語言 家里發(fā)生變故 就回了老家 寄人籬下不懂人情世故 慢慢...
    Ynev閱讀 153評(píng)論 0 0

友情鏈接更多精彩內(nèi)容