CSS float实现首字下沉

cellinlab

于 2019-04-02 16:57:54 发布

阅读量495

点赞数

分类专栏： CSS 前端基础文章标签： CSS CSS效果 CSS应用 CSS首字下沉首字下沉

本文链接：https://blog.csdn.net/funkstill/article/details/88976038

版权

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

CSS

29 篇文章

订阅专栏

方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首字下沉</title>
        <style>
            p {
                width: 400px;
                margin: 0 auto;
            }
            p::first-line {
                text-transform: uppercase;
            }
            P::first-letter {
                font-size: 4em;
                border: 1px solid yellow;
                background: greenyellow;
                float: left;
                padding: 2px;
                margin-right: 5px;
            }
        </style>
    </head>
    <body>
        <p>I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.</p>
        <p>Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of their captivity.</p>
    </body>
</html>