在使用WORD编辑文章的时候,众多网友曾为首字下沉效果而惊叹不已,但其操作却简单得实在不敢恭维!
那么,在网页制作中,如何实现首字下沉效果呢
呵呵,网页制作不比WORD文章编辑,不可一蹴而就,得使用CSS来完成!
以上为代码:
<head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>CSS首字下沉</title> <style type="text/css"> .dyfirst { width:300px; border:1px solid #ddd; padding:5px; font-size:12px; margin:5px 0; } .dyfirst:first-line { color:#050; } .dyfirst:first-letter { font-size:300%; font-weight:bold; color:#000; float:left; } </style> </head> <body> <div class="dyfirst"> Ewww.bookit.cn<br /> www.bookit.cn<br /> www.bookit.cn</div> <div class="dyfirst"> 大众计算机学习网<br /> 众计算机学习网<br /> 众计算机学习网</div> </body> </html>
试试吧,也挺简单滴! |