text-indent实现文本缩进布局
来源:互联网 发布:f盘不可以安装sql吗 编辑:程序博客网 时间:2024/03/29 18:33
今天的总结很简单,但对于初学者来说,特别是对于我这个初入前端门槛的开发者来说,就不是那么地简单了(这里指不容易想到)。
好了,废话不多说,今天的总结就是一个对文本缩进的简单应用。如何做到标题与内容的分离呢?如下图:
就是做这么一个简单的标题与内容的分离,看似简单,但对于我这个初生牛犊确实难以想到(text-indent可以有负值来设置)。这不,想了很长时间才想了出来。
你只需编写以下文档及写以下样式就可以轻松搞定。
HTML文档:
<p class="text_layout_test">header:这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试,这是一个关于文本布局的测试。</p>
style样式:
html,body,object,iframe,div,span,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dd,dt,dl,img{margin: 0;padding:0;}.text_layout_test{padding:5px 10px 5px 60px;text-indent: -3.5em;}
好了,首先要给这段文档设置一个padding,这是在设置text-indent之前的一些设置。是为了防止在设置text-indent为负值时,导致文本隐藏,设置padding后就可以有效避免。随后,给文本设置一个text-indent:-3.5em;就可以了。
0 0
- text-indent实现文本缩进布局
- 文本缩进属性(text-indent)
- css关于文本缩进text-indent属性
- 文本段落缩进text-indent:2em
- CSS3属性之text-indent文本缩进使用详解
- text-indent属性缩进无效解决方法
- 字符缩进 text-indent:0.5em;
- 首行文字缩进text-indent
- text-indent——首行缩进
- div+CSS实现段落首行缩进两个字符(text-indent标签)
- web--p 缩进 text-indent text-decoration 下划线
- NSMutableParagraphStyle 实现文本缩进
- text-indent
- text-indent
- text-indent
- 文本处理属性:text-indent:-xxxpx;的作用
- CSS——文本样式(text-indent,text-transform,text-decoration,text-justify)
- text-indent在360中对其后的div造成缩进10px效果
- z-index用法总结
- javascript编程高手之路
- w3c技术测试-second
- w3c网站第三次的学习总结HTML篇01
- 关于自适应布局的一点总结
- text-indent实现文本缩进布局
- css经典书籍
- 手机浏览器下怎么打开app应用
- 一个简单的CSS弹出窗
- JavaScript数值转换函数(Number(),parseInt(),parseFloat(),Math)总结
- 学习CSS(3)
- JavaScript设置倒计时及倒计时弹窗
- UVALive 6955Finding Lines
- $(document).ready()与$(window).load()的区别