除此之外,我們在Web的制作中,常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果,使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式:
1、行高都是1,而且font-weight設置了normal變成了常規效果(不加粗),同時顏色被設置為灰色(#999)。
2、由于<small>內的文本字體在h1~h3內,其大小都設置為當前字號的65%;而在h4~h6內的字號都設置為當前字號的75%;
詳細代碼請參閱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%; }
來簡單看其使用方法與最終效果:如右側代碼編輯器中12-17行代碼所示。
我也來試一試:完成下面任務
把“孤兒院無私奉獻30年”作為一級標題,“一曲人性的贊歌”作為副標題。
<h1>孤兒院無私奉獻30年<small>一曲人性的贊歌</small></h1>
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報