除此之外,我們?cè)赪eb的制作中,常常會(huì)碰到在一個(gè)標(biāo)題后面緊跟著一行小的副標(biāo)題。在Bootstrap中他也考慮了這種排版效果,使用了<small>標(biāo)簽來制作副標(biāo)題。這個(gè)副標(biāo)題具有其自己的一些獨(dú)特樣式:
1、行高都是1,而且font-weight設(shè)置了normal變成了常規(guī)效果(不加粗),同時(shí)顏色被設(shè)置為灰色(#999)。
2、由于<small>內(nèi)的文本字體在h1~h3內(nèi),其大小都設(shè)置為當(dāng)前字號(hào)的65%;而在h4~h6內(nèi)的字號(hào)都設(shè)置為當(dāng)前字號(hào)的75%;
詳細(xì)代碼請(qǐng)參閱bootstrap.css文件中第407行~第443行。
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small { font-size: 65%; } h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; } h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small { font-size: 75%; }
來簡單看其使用方法與最終效果:如右側(cè)代碼編輯器中12-17行代碼所示。
我也來試一試:完成下面任務(wù)
把“孤兒院無私奉獻(xiàn)30年”作為一級(jí)標(biāo)題,“一曲人性的贊歌”作為副標(biāo)題。
<h1>孤兒院無私奉獻(xiàn)30年<small>一曲人性的贊歌</small></h1>
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)