Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks
CSS首字母大些 TEXT(转)
首字母大些1
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.         <title>Drop Caps 1</title>
  5.         <style type="text/css" media="all">
  6.         body {font: 100%/1.5 arial, helvetica, sans-serif;}
  7.         .firstletter {float: left;font-size: 3em;line-height: 1;font-weight: bold;margin-right: 0.2em;}
  8.         </style>
  9. </head>
  10. <body>
  11. <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>
  12. </body>
  13. </html>
复制代码
首字母大些 2使用图片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.         <title>Drop Caps 2</title>
  5.         <style type="text/css" media="all">
  6.         body {font: 15px/2 arial, helvetica, sans-serif;}
  7.         .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;}
  8.         </style>
  9. </head>
  10. <body>
  11. <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>
  12. </body>
  13. </html>
复制代码
首字母大些3使用 伪元素
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.         <title>Drop Caps 3 (using 'first-letter')</title>
  5.         <style type="text/css" media="all">
  6.         body {font: 100%/1.5 arial, helvetica, sans-serif;}
  7. p:first-letter {float: left;font-size: 3em;line-height: 1;font-weight: bold;margin-right: 0.2em;}
  8.         </style>
  9. </head>
  10. <body>
  11. <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>
  12. </body>
  13. </html>
复制代码
posted on 2010-05-25 23:04 seal 阅读(479) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。
网站导航: