最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

CSS 运用first-letter实现首字下沉效果

通过first-letter我们可以方便的实现首字下沉效果,当然也可以实现其他效果,比如首字变色,首字上浮,今天Hicoogle介绍的是通过first-letter实现首字下沉的效果。

CSS样式代码如下:

.first:first-letter
{
font-size:30px;
font-weight:bold;
color:#009;
float:left;
}

通过代码我们可以发现,我们其实只是把首字的CSS样式first-letter进行了简单的加粗放大,就实现了首字下沉的效果了。

下面是运行实例代码,您可以查看一下运用first-letter的效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Hicoogle-CSS 运用first-letter实现首字下沉效果</title>
<style type="text/css">
<!--
.first
{
width:400px;
border:1px solid #ccc;
padding:5px;
font-size:9pt;
margin:5px 0;
color:#ccc
}
.first:first-letter
{
font-size:30px;
font-weight:bold;
color:#009;
float:left;
}
-->
</style>
</head>
<body>
<div class="first">首字下沉实例_http://www.hicoogle.com<br/><br/>
</div>
<div class="first">  嗨酷哥,有你更酷! </div>
</body>
</html>

运行效果图:

转载请注明:嗨酷哥,有你更酷! » CSS 运用first-letter实现首字下沉效果

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项