打印本文 打印本文 关闭窗口 关闭窗口
Css轻松实现网页文字首字下沉
作者:武汉SEO闵涛  文章来源:敏韬网  点击数1131  更新时间:2009/6/9 2:31:49  文章录入:mintao  责任编辑:mintao

在使用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>

试试吧,也挺简单滴!

打印本文 打印本文 关闭窗口 关闭窗口