【筆記】浮動屬性float的應用07——浮動可縮放的首字下沉
阿新 • • 發佈：2018-12-06
第1步 - 從一段文字開始
在本練習中，我們希望強制將一個下降帽放在一段文字旁邊。我們還希望丟棄上限是可擴充套件的，無論使用者的預設字型大小如何 - 這意味著所有測量都將以ems或百分比表示。從一段簡單的文字開始。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </body> </html>
效果圖如下：
第2步 - 在第一個字母周圍新增一個範圍
將規則應用於第一個字母有兩種方法。到目前為止，浮動dropcap的最優雅的解決方案是使用“first-letter”，但由於Windows / Internet Explorer5不支援，我們將使用較少語義正確的選項並將第一個字母包裝在<span>中。
對於本教程，span中的類已命名為“dropcap”以幫助說明該點，但可以使用任何名稱。但是，最好根據它們的含義來命名類和id，而不是它們的外觀。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <p><!--new codes--> <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </body> </html>
效果圖如下：
第3步 - 浮動第一個字母
當我們將“float：left”應用於第一個字母時，我們還必須提供寬度。您使用的寬度取決於要“刪除”的字母寬度。
我們使用ems來設定字母的寬度和大小。這將允許首字下沉放大或縮小，並始終匹配使用者的預設字型大小。em大約是大寫字母“M”的寬度。因此，大寫“L”只需要大約.7em的寬度。
程式碼如下所示：
<!DOCTYPE html> <html> <head> <style type="text/css"> .dropcap {/*new codes*/ float:left; width:0.7em; } </style> </head> <body> <p><!--new codes--> <span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </body> </html>
效果圖如下：
第4步 - 增加字型大小
增加字型大小，直到它是3行文字的高度 - 大小約為4周。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dropcap {
float:left;
width:0.7em;
font-size:4em;/*new codes*/
}
</style>
</head>
<body>
<p><!--new codes-->
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</body>
</html>效果圖如下：
第5步 - 設定行高
要使首字下劃線與文字並排，請設定行高。在這種情況下，大約83％似乎有效。與字型大小一樣，這些數字可以根據您的需要進行調整。
程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dropcap {
float:left;
width:0.7em;
font-size:4em;
line-height:83%;/*new codes*/
}
</style>
</head>
<body>
<p><!--new codes-->
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</body>
</html>效果圖如下：
