Sealyu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drop Caps 1</title>
<style type="text/css" media="all">
body {font: 100%/1.5 arial, helvetica, sans-serif;}
.firstletter {float: left;font-size: 3em;line-height: 1;font-weight: bold;margin-right: 0.2em;}
</style>
</head>
<body>
<p><span class="firstletter">O</span>nce upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>

復(fù)制代碼

首字母大些 2使用圖片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drop Caps 2</title>
<style type="text/css" media="all">
body {font: 15px/2 arial, helvetica, sans-serif;}
.firstletter {width: 40px; height: 50px;float: left;display: block;text-indent: -999em;background: url(http://www.htmldog.com/examples/images/o.gif);margin: 0 8px 8px 0;}
</style>
</head>
<body>
<p><span class="firstletter">O</span>nce upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>

復(fù)制代碼

首字母大些3使用偽元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drop Caps 3 (using 'first-letter')</title>
<style type="text/css" media="all">
body {font: 100%/1.5 arial, helvetica, sans-serif;}
p:first-letter {float: left;font-size: 3em;line-height: 1;font-weight: bold;margin-right: 0.2em;}
</style>
</head>
<body>
<p>Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>

復(fù)制代碼

posted on 2010-05-25 23:04 seal 閱讀(489) 評論(0) 編輯收藏所屬分類: CSS


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: CSS Hack區(qū)分瀏覽器 IE6 IE7 IE8 Firefox Opera Safari Effective and Powerful CSS Tools & Generators for Designers Clean vCard: A Free Professional XHTML-CSS vCard Template Top Articles On The Web Design Billboard In August’10 CSS Sprites 100+ Free High Quality Icon Sets for Web Designers and Developers CSS Image Maps(轉(zhuǎn)) CSS樣式首字母黑體加大 CSS首字母大些 TEXT(轉(zhuǎn)) 讓 IE6, 7和 8支持CSS3 (轉(zhuǎn))