-1

こんにちは、私は CSS が初めてで、構築中の Web サイトで引用符を使用しています。ただし、CSS を使用できる場合は、スタイルを実現するために画像を使用したくありません。私の問題は、どこから始めればよいかわからないことです。これは、 CSS で同じ効果が得られない場合に使用する画像です。これを実現する方法を教えてください。

4

1 に答える 1

1

最も簡単な方法は、要素を作成し、<blockquote>疑似要素を使用して引用符を制御することです。注: ブラウザーのスタイルを上書きするために、いくつかのスタイル (主にマージンとパディング) が追加されています。

body {
        font-family: sans-serif;
    }
    
    blockquote {
        color: #aaa;
        position: relative;
        display: inline-block;
        padding: 0 5px;
    }
    
    blockquote p {
        margin-bottom: 5px;
    }
    
    blockquote:before,
    blockquote:after {
        content: "“";
        font-size: 70px;
        font-family: "Georgia", Serif;
        color: #666;
        position: absolute;
        left: -30px;
        top: 5px;
    }
    
    cite {
        float: right;
        color: black;
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    
    blockquote:after {
        content: "”";
        right: -30px;
        left: auto;
    }
<blockquote><p>a man may die, nations may rise and fall, but an idea lives on</p><cite>- John F Kennedy</cite></blockquote>

@thomas が言及した記事には、ここで必要なすべての関連情報が含まれているはずです

于 2014-10-26T10:21:25.843 に答える