首字下沉效果我們在css 2.1以版本就支持一個:first-letter并且它可以與可以與任何元素關聯,下面我們來看個實例,直接使用first-letter實例的一些實例,代碼如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>css首字下沉效果</title>
- <style type="text/css">
- p:first-letter { font-size:36px; float:left; color:#f60; padding:5px; font-family:"黑體"}
- </style>
- </head>
- <body>
- <p>這個偽元素用于指定一個元素第一個字母的樣式。所有前導標點符號應當與第一個字母一同應用該樣式。某些語言有一些要處理為單個字符的字母組合，如果是這樣，用戶****可能會把首字母同時應用到這個字母組合。<br/>
- 在 CSS2.1 之前，:first-letter 只能與塊級元素關聯。CSS2.1 擴大了這個范圍，可以與任何元素關聯?？梢詰玫绞鬃帜傅膶傩允怯邢薜摹?lt;br /></p>
- </body>
- </html>
還有一些其它辦法我也整理了下,第一個字變大(首字變大、首字下沉)手動加上樣式語法,使用 span 其實做法與 code 語法類似,請進到「范本」>>「修改html」,并將底下的css語法復?貼上到 </b:skin> 之前,代碼如下:
- .fb {
- font-size:280%;
- font-weight:bold;
- float:left;
- margin-right:3px;
- }
接著,在HTML編輯模式,手動用<span>語法將文章第一個字包起來即可,如下所示:
<p><span class="fb">測</span>試第一個字變大的效果，第一個字變大</p>
那么如何應用到wordpress博客中呢,百度了一下方法,找到如下代碼:
<?php the_content(''); ?>
改為如下代碼:
<div class="aaa"><?php the_content(''); ?> </div>
在CSS里加 aaa是隨便的,代碼如下:
- .aaa p:first-child:first-letter{text-transform:uppercase;font:24px Impact,”黑體”;color:#000;float:left;margin-right:2px;}
就可以了.
新聞熱點
疑難解答
圖片精選
