注册

CSS实现首段首字下沉效果的代码,兼容所有主流浏览器

嗨豆壳技术文章 时间:2014-08-22 16:42:37 [ray]

在报纸中常看到一种排版效果:文章的首段第一个字使用大号加粗字体,并下沉。其实在网页排版中也可以使用css实现这样的效果。

<!DOCTYPE html>
<html><head>
<meta charset=" utf-8">
<title>CSS首字下沉效果</title>
<style type="text/css">
.parent_class>p:first-child:first-letter{ 
font-size:2.5em; 
padding:5px 5px 0 0; 
float:left; 
font-family:楷体,楷体_GB2312; 
font-weight:bold; 
color:#E6192C; 
line-height:1.2em; 
}
</style>
</head><body>
<div class="parent_class"> <p>装B,也是一种境界。。</p></div>
</body></html>

其中.parent_class为p标签的父级元素,最后一行指定行高为了兼容IE,否则ie显示会错位。

字体的话,在xp下,用“楷体”可能无法识别,必须用“楷体_GB2312”,而win7下正常。其它样式可按需要更改为你想要的效果。

标签

本文地址:https://www.hi-docs.com/article/60.html

上一篇:用jquery实现菜单下拉和收缩效果的代码

下一篇:linux date命令实现日期时间和Unix时间戳转换