时间戳

首页 > 解决方案 > html/css 中的楼梯踏步文本

html - html/css 中的楼梯踏步文本

问题描述

有没有使用 HTML/CSS 在网站上阶梯式文本的最佳实践方法？“和”这个词 说明了效果。

标签： htmlcss

解决方案

vertical-align使用带有百分比值的 css 属性（参见MDN 上的本节）。0%标记默认基线，支持负值和正值。这可能不是任何类型的最佳实践，但它可以达到目的并且足够灵活以支持各种“台阶高度”和“楼梯长度”

一个独立的例子如下：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Stair Stepping</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                .step0 { vertical-align: -45%; }
                .step1 { vertical-align: -30%; }
                .step2 { vertical-align: -15%; }
                .step3 { vertical-align:   0%; }
                .step4 { vertical-align:  15%; }
                .step5 { vertical-align:  30%; }
                .step6 { vertical-align:  45%; }
            </style>
        </head>
        <body>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="step0">A</span><span class="step1">l</span><span class="step2">i</span><span class="step3">q</span><span class="step4">u</span><span class="step5">a</span><span class="step6">m</span> liquam cursus diam ut bibendum hendrerit. Vivamus dignissim egestas ullamcorper. Vestibulum dapibus ullamcorper neque, id hendrerit magna scelerisque eget. Quisque et elit urna. Pellentesque facilisis tempor lacus, dignissim fermentum odio rhoncus vel. Aenean vitae magna vitae purus volutpat posuere non vitae odio. Phasellus quam nulla, euismod ac consequat a, hendrerit ut diam. Nam diam urna, sollicitudin eu commodo pharetra, condimentum ut magna. Etiam rhoncus et lorem efficitur rhoncus. Duis ac nibh vehicula, laoreet sem non, congue mi. In eget fringilla metus. Donec nec nulla dui. Ut a bibendum orci.</p>
        </body>
    </html>

推荐阅读