美文网首页
CSS text-indent 文字缩进效果

CSS text-indent 文字缩进效果

作者: Devops海洋的渔夫 | 来源:发表于2019-02-04 01:31 被阅读43次

仅供学习,转载请注明出处

需求

编写一个文字缩进的示例

示例

这上面的第二个段落就是实现了缩进的效果。
第三个段落实现的是水平居中的效果。
第四个段落实现的是水平靠右,垂直居中的效果。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 100px;
            margin: 50px auto;
            background: cyan;
        }

        .p2{
            text-indent: 90px;
        }

        .p3{
            text-align: center;
        }

        .p4{
            text-align: right;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <!-- p.p${段落文件演示$}*3 -->
    <p class="p1">段落文件演示1</p>
    <p class="p2">段落文件演示2</p>
    <p class="p3">段落文件演示3</p>
    <p class="p4">段落文件演示4</p>
</body>
</html>

2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

相关文章

  • CSS text-indent 文字缩进效果

    仅供学习,转载请注明出处 需求 编写一个文字缩进的示例 示例 这上面的第二个段落就是实现了缩进的效果。第三个段落实...

  • 文字缩进妙用-CSS隐藏文字的方法

    text-indent 正值向右缩进,负值向左缩进 CSS隐藏文字的方法 利用负值向左缩进,设置很大的值就可以达到...

  • 转载---HTML学习笔记7——CSS控制文字的一些基本属性的使

    CSS控制文字的一些基本属性的使用: 一、CSS控制段落: 段落缩进:text-indent:20px; 文字方向...

  • CSS文本

    CSS文本 文本的颜色、字符间距,对齐文本,装饰文本,文本缩进设置。 文本缩进 使用text-indent属性对文...

  • 文本格式的处理

    css p{ text-indent:2em;//首行缩进2个字符 }

  • CSS1-2基础补充

    CSS字体属性 text-indent属性(缩进文本) 作用:设置首行字体缩进注意点:1.一般来说,可以为所有块级...

  • css常用属性

    text-indent 文本缩进

  • 文字从第二行开始缩进小技巧

    text-indent缩进属性将对段落首行文字进行缩进展示,将值设置为负值,就会向左缩进,再将正个段落设置marg...

  • CSS学习

    css基础 首行缩进text-indent:2em; 页面布局常见命名规范头:header内容:content/c...

  • CSS文本

    文本 text-align 对齐元素中的文本 / text-indent 缩进元素中文本的首行 .css body...

网友评论

      本文标题:CSS text-indent 文字缩进效果

      本文链接:https://www.haomeiwen.com/subject/bzzusqtx.html