淺談CSS首字放大下沉及段首縮排2字元
阿新 • • 發佈：2018-11-23
原文出處：https://blog.csdn.net/zhouziyu2011/article/details/53725367
1、CSS首字放大下沉
對首字進行放大下沉，需用到css的偽元素：first-letter。
<!doctype html> <html> <head> <style type="text/css"> .text { font-family: Microsoft YaHei; font-size: 16px; color: #676767; float: left; clear: left; width: 600px; text-align: justify; } /*1. 首字母放大*/ .text:first-letter { font-size: 72px; color: #f5e327; } </style> </head> <body> <div class="text"> 百度前端技術學院誕生於2014年，由百度最大規模的前端技術組織 EFE 團隊發起成立。目前學院是由百度校園品牌部、百度多模互動搜尋部以及百度校園招聘組聯合組織的，面向大學生人群，免費的一個技術學習、交流與分享平臺。一年之計在於春，經過漫長的冬季，又是開學之際，眾多莘莘學子紛紛又回到校園，投入學習之中。百度前端技術學院也在此時為大家帶來了一道前端學習的饕鬄盛宴。經過2年多的嘗試與摸索，我們確認了實踐、交流與分享，對於技術學習而言，是非常有效且高效的手段，因此，本次春季班，我們特別搭建了一個線上平臺系統，通過這個系統向學員們傳送編碼任務，學員們在這個系統上提交作業地址，進行相互的程式碼評審（Code Review）與評價，同時在平臺中積累自己的學習總結筆記並分享給大家。為了讓大家更加有動力進行這些學習方式，我們在整個春季班的學習過程中，融入了競賽模式，任務完成得好的，評價仔細認真的，筆記寫得對他人有幫助的，我們都會通過一套積分系統來進行排名。在頭一個半月的任務“闖關”之後，我們還特意安排了一個很有挑戰性，能夠發揮大家創新能力的大任務環節，具體任務當然暫時保密。這個終極BOSS的挑戰會作為整個春季班的最終環節。 </div> </body> </html>
問題：首字放大後，只佔據一行。不能達到預期的首字佔據多行的效果。
解決方法： 在將首字的字型設為較大的字型後，通過float:left為首字設定浮動，其他文字就會將首字環繞。
<!doctype html> <html> <head> <style type="text/css"> .text { font-family: Microsoft YaHei; font-size: 16px; color: #676767; float: left; clear: left; width: 600px; text-align: justify; } /*1. 首字母放大*/ .text:first-letter { font-size: 72px; color: #f5e327; float: left; /*2. 加上這行，下沉*/ } </style> </head> <body> <div class="text"> 百度前端技術學院誕生於2014年，由百度最大規模的前端技術組織 EFE 團隊發起成立。目前學院是由百度校園品牌部、百度多模互動搜尋部以及百度校園招聘組聯合組織的，面向大學生人群，免費的一個技術學習、交流與分享平臺。一年之計在於春，經過漫長的冬季，又是開學之際，眾多莘莘學子紛紛又回到校園，投入學習之中。百度前端技術學院也在此時為大家帶來了一道前端學習的饕鬄盛宴。經過2年多的嘗試與摸索，我們確認了實踐、交流與分享，對於技術學習而言，是非常有效且高效的手段，因此，本次春季班，我們特別搭建了一個線上平臺系統，通過這個系統向學員們傳送編碼任務，學員們在這個系統上提交作業地址，進行相互的程式碼評審（Code Review）與評價，同時在平臺中積累自己的學習總結筆記並分享給大家。為了讓大家更加有動力進行這些學習方式，我們在整個春季班的學習過程中，融入了競賽模式，任務完成得好的，評價仔細認真的，筆記寫得對他人有幫助的，我們都會通過一套積分系統來進行排名。在頭一個半月的任務“闖關”之後，我們還特意安排了一個很有挑戰性，能夠發揮大家創新能力的大任務環節，具體任務當然暫時保密。這個終極BOSS的挑戰會作為整個春季班的最終環節。 </div> </body> </html>
2、CSS段首縮排2字元
實現段首縮排2字元，需為段落設定text-indent:2em。
<!doctype html> <html> <head> <style type="text/css"> .text { font-family: Microsoft YaHei; font-size: 16px; color: #676767; float: left; clear: left; width: 300px; text-align: justify; } /*1. 首字母放大*/ .text:first-letter { font-size: 72px; color: #f5e327; float: left; /*2. 加上這行，下沉*/ } /*3. 段落縮排*/ p { text-indent: 2em; margin: 0; } </style> </head> <body> <div class="text"> 百度前端技術學院誕生於2014年，由百度最大規模的前端技術組織 EFE 團隊發起成立。目前學院是由百度校園品牌部、百度多模互動搜尋部以及百度校園招聘組聯合組織的，面向大學生人群，免費的一個技術學習、交流與分享平臺。<br> <p>一年之計在於春，經過漫長的冬季，又是開學之際，眾多莘莘學子紛紛又回到校園，投入學習之中。</p> <p>百度前端技術學院也在此時為大家帶來了一道前端學習的饕鬄盛宴。經過2年多的嘗試與摸索，我們確認了實踐、交流與分享，對於技術學習而言，是非常有效且高效的手段。</p> </div> </body> </html>
