<style>
/* 设置段落缩进样式 */
.段落 {
text-align: center;
margin-bottom: 20px;
/* 设置每行缩进样式 */
.每行 {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
/* 设置标题样式 */
font-size: 3em;
margin-bottom: 30px;
</style>
/* 将文章内容插入页面 */
<div class=”文章”>
<h1>这是一篇关于 CSS 使每一段都缩进的文章</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac consectetur semper ac. Donec ut ultricies urna. Duis sit amet arcu velit. Nullam id mi vel quam accumsan consectetur ac velit. Sed ultricies sapien ac turpis luctus malesuada. Proin nec sapien ac velit consectetur consectetur vel augue. Donec ultricies arcu ac sapien consectetur malesuada id nisl. Proin sit amet arcu velit. Nullam id mi vel quam accumsan consectetur ac velit. Sed ultricies sapien ac turpis luctus malesuada. Proin nec sapien ac velit consectetur consectetur vel augue.</p>
</div>
在这个示例中,大家首先使用 `.段落` 类定义一个段落元素,并使用 `text-align: center` 和 `margin-bottom: 20px` 属性将其缩进到屏幕底部。
接下来,大家使用 `.每行` 类定义一个每行元素,并使用 `display: flex` 和 `justify-content: space-between` 属性将每行元素缩进,使其底部与段落底部对齐。
最后,大家使用 `h1` 类定义标题元素,并使用 `font-size: 3em;` 和 `margin-bottom: 30px` 属性将其缩进到屏幕底部。
通过这些设置,大家将文章的内容缩进到了每行底部,标题元素也被居中了。