使用 :first-letter属性来实现的下沉效果-教程教材教学_网页设计特效

Nice Drop caps with CSS- 使用 :first-letter属性来实现的下沉效果 . 不需要额外的HTML 或Javascript且支持 IE5以上版本的浏览器.

运行代码框
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { background-color:#666666; color:#333333; font-family:Georgia, "Times New Roman", Times, serif; } code { display:inline; font-family:"Courier New", Courier, monospace; } #container { padding:10px; width:800px; margin:0 auto; background-color:#FFF; } p { line-height:1.2em; clear:both; } /* THE DROPCAP CODE */ p:first-letter { display:block; float:left; border:1px solid black; padding:5px; margin:4px 5px; background:url(firstletter1.png); font-size:73px; } </style> </head> <body> <div id="container"> <h1>Designing Initials with <acronym title="Cascading Style Sheets">CSS</acronym></h1> <p>This is the example page of the article on <a href="http://www.onyx-design.net/weblog2/">Onyx Design Weblog</a> about designing initials with CSS, click <a href="http://www.onyx-design.net/weblog2/css/nice-drop-caps-with-css/">here</a> to go to the article. The trick is the <code>:first-letter</code> pseudo element. It targets the first letter of an element, the <code><p></code> element in this case. I used <a href="http://commons.wikimedia.org/wiki/Image:Triquetra-Cross-alternate.png">this</a> image from Wipemedia Commons for the background image of the initials. <h2>Some dummy text</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi id metus sit amet sapien rhoncus ullamcorper. Donec posuere felis vel ipsum faucibus adipiscing. Donec justo mi, facilisis eget, malesuada vel, consectetuer in, mauris. Curabitur justo. Etiam massa lacus, malesuada a, porttitor nec, posuere luctus, eros. Phasellus consequat magna ac urna. Morbi id elit et sapien bibendum tempus. Aliquam erat volutpat. Praesent sed ante. Vivamus convallis. Nunc turpis est, gravida quis, pretium ac, viverra tempor, felis. Cras pretium pellentesque lorem. Aenean rhoncus. Donec molestie, leo interdum fermentum auctor, enim nibh pharetra sem, non dignissim augue nibh in nisi. Etiam varius. Nulla nulla sapien, accumsan ut, faucibus ac, vulputate nec, nulla. In posuere diam eget est. Nam semper blandit eros. Aliquam luctus, elit id ornare ornare, justo tellus consectetuer enim, vitae iaculis sapien nibh ut ipsum. Morbi commodo. Donec sit amet lorem non diam sodales placerat. Nam dapibus, sapien sit amet malesuada elementum, nisi elit rutrum orci, non accumsan purus elit non enim. Ut iaculis nunc quis leo. Mauris tempus lorem vel est. Ut velit. Sed erat. Pellentesque fermentum pellentesque nulla. Praesent ut mauris.</p> <p>Nullam dapibus, nulla a scelerisque iaculis, nisl magna cursus risus, eu malesuada mauris arcu vitae urna. Sed dignissim vulputate elit. Integer ipsum. Ut neque odio, gravida id, pulvinar id, fermentum non, nisi. Morbi volutpat. Donec ultrices ultrices massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tempor venenatis ipsum. Nam mattis. Quisque a tortor nec lacus accumsan egestas. Suspendisse turpis. Donec dignissim gravida justo. Nam ac ante. Fusce imperdiet magna ac nisi. Maecenas aliquam urna a dolor. Morbi ac turpis.</p> <p>Donec vehicula lacinia lectus. Curabitur facilisis urna eget justo. Donec tortor tellus, accumsan in, cursus vel, tempus at, magna. Nullam pede risus, mattis eu, semper in, feugiat ac, est. Ut dolor risus, commodo id, facilisis ac, dignissim nec, risus. Nulla tortor velit, ultrices nec, blandit in, mollis vitae, ipsum. Donec pellentesque lacus at nulla. Aliquam ultrices purus ut dui. Etiam placerat varius massa. Vivamus vulputate sem in sem. Cras sem odio, placerat sed, suscipit eget, posuere et, libero. Praesent id libero. Vivamus ultricies, justo eget vestibulum posuere, metus nulla convallis mauris, at sodales leo lectus in dolor. Donec eget dolor eu metus suscipit tempus. Duis nec justo non lorem tincidunt pellentesque. Vestibulum porttitor. Maecenas arcu erat, luctus at, venenatis sed, ultricies in, mi. Maecenas at erat at enim cursus mollis. Etiam rhoncus, velit sed faucibus vulputate, velit odio interdum erat, luctus porta sapien risus id magna. Sed sed magna. Vivamus in sem sit amet velit congue ullamcorper. Ut suscipit varius elit. Quisque volutpat volutpat purus. Integer egestas velit nec nulla fermentum vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Etiam feugiat. Quisque semper ipsum.</p> <br style="clear:both" /> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用 :first-letter属性来实现的下沉效果

相关新闻

热点新闻

推荐新闻