本文摘自PHP中文网,作者清浅,侵删。
实现首行缩进效果的方法:首先创建一个HTML示例文件;然后在body中创建一些文本内容;最后通过CSS中的text-indent属性来实现首行缩进效果即可。
本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3。
可以通过CSS中的text-indent属性来实现首行缩进效果
我们在写页面的时候,尤其是碰到那些文本内容过多导致页面效果不好看时,这时我们可以通过首行缩进的方法来使文章内容更加有层次感。我们可以通过添加CSS中的text-indent属性来实现首行缩进效果。它可以使得容器内的首行缩进以单位通过段落前面空两个字的距离,不要再使用空格了
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
效果图:
这样通过设置text-indent属性,我们的文本内容的首行就会向后缩进。
以上就是如何实现首行缩进效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css span标签里text-indent不起作用是什么原因?
更多相关阅读请进入《text-indent》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者