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、大数据视频,价值数万资源大放送
寻找资源的地址如下: