CSS text-indent 文字缩进效果

2019-02-04  本文已影响43人  Devops海洋的渔夫

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

需求

编写一个文字缩进的示例

示例

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

代码如下:

<!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、大数据视频,价值数万资源大放送

寻找资源的地址如下:

扫描微信公众号

寻找价值数万的视频资源

上一篇下一篇

猜你喜欢

热点阅读