Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 首字下沉与首行样式的如何实现?

首字下沉与首行样式的如何实现?

发布时间:2020-05-28   编辑:www.jquerycn.cn
jquery中文网为您提供首字下沉与首行样式的如何实现?等资源,欢迎您收藏本站,我们将为您提供最新的首字下沉与首行样式的如何实现?资源

首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size、float、padding等。伪对象first-

我们来看下面的例子:

 代码如下 复制代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
p:first-letter{
 padding: 8px;
 font-size: 36pt;
 float: left;
 color: red;
}
-->
</style>
</head>
<body>
<p>首字下沉的效果;font-size、float、padding属性配合。</p>
</body>
</html>

首行样式我们可以用first-line伪类定义样式。

我们来看下面的例子:

 代码如下 复制代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
p:first-line{
 color: blue;
 font-size: 20px;
}
-->
</style>
</head>
<body>
<p>Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - Div CSS XHTML XML 教程大全 - </p>
</body>
</html>

您可能感兴趣的文章:
css实现首字下沉实例代码
首字下沉与首行样式的如何实现?
CSS3中first-letter实现首字下沉变大
ASP与JSP的比较(一)
网页设计中针对中文排版CSS心得
php中连续匹配字符或数字正则表达式
PHP开发框架的现状和展望
友情链接在google重要性
CSS 简介
使用 myisamchk 恢复崩溃的mysql数据库

[关闭]