Heim > Artikel > Web-Frontend > css段落首字母下沉_html/css_WEB-ITnose
css段落首字母下沉_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:261228Durchsuche
摘要：
段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。
单行放大：在第一行内放大，效果如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #FFFFFF; color: #595959; } .contain { width: 150px; } .contain p { font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif; } .contain p:first-letter { font-size: 2em; padding: 0.1em; color: #000000; vertical-align: middle; } .contain p:first-line { color: red; } .contain p:first-child:first-letter { color: red; } .contain p:first-child:first-line { color: inherit; } </style></head><body> <div class="contain"> <p>This is a test article. This is a test article.</p> <p>This is a test article. This is a test article.</p> <p>这是一个测试</p> </div></body></html>
注意：first-letter支持IE7+，first-line支持IE8+
多行放大：效果如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style> * { margin:0; padding:0; } body { font-size:12px; font-family: Tahoma, Geneva, sans-serif; padding:200px; } p { width:150px; color:#000; font-size:1em; margin-bottom: 20px; } p:first-letter{ float: left; font-size:2.5em; padding-right:5px; text-transform:uppercase; } p:first-line{ color:#f00; } </style> <p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p> <p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：移动web滑屏框架分享_html/css_WEB-ITnoseNächster Artikel：MVC页面的跳转和加载_html/css_WEB-ITnose