css 首字下沉效果原理
首字下沉主要使用到css的first-letter伪元素，然后配合使用font-size和float来设置文字的样式即可实现。
first-letter选择器选取指定元素文本内容的第一个字母，即用于设置第一个字母的css样式。
下面是一个简单的first-letter实例
<!DOCTYPE HTML>
<html>
<title>http://www.manongjc.com</title>
<head>
<style>
p:first-letter {
font-size: 200%;
background-color: lightgray;
border: 1px solid black;
}
p::first-line {
letter-spacing: 5px;
}
</style>
</head>
<body>
<p>
This is a test. This is a test.
This is a test. This is a test.
</p>
</body>
</html>
效果如下：
下面我们使用first-letter制作首字下沉效果。
css首字下沉效果的实现
通过first-letter选择器选择元素的首个字母，然后通过font-size和float来设置字母的css样式
源码如下：
<!DOCTYPE html>
<html>
<title>http://www.manongjc.com/article/1313.html</title>
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>CSS ::first-letter 伪元素实现首字母下沉效果</title>
<style type="text/css" media="all">
p::first-letter
{
font-size: 4em;
font-weight: bold;
border: 1px solid blue;
margin-right: 8px;
float: left;
}
</style>
</head>
<body>
<p>码农教程旨在为IT编程入门学员及码农们提供免费学习的平台。
本网站有大量IT编程入门教程(JAVA, PHP, java script, C, C++, HTML,
CSS等)及编程过程中遇到问题时的解决办法，在这里，码农们可以找到
优质的IT编程入门教程，同时，码农们还可以找到大量编程入门实例及
编程笔记，通过教程、实例、笔记和解决方案相结合，使码农们学习起
来更容易更轻松。</p>
</body>
</html>
在线运行
原文地址：http://www.manongjc.com/article/1312.html
其他阅读：