首字下沉与首行样式的如何实现?
首字下沉的效果我们可以用伪对象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数据库