0

申し訳ありませんが、これはとても基本的なことですが、私は初心者です。

MattHaugheyのブログAWholeLotta Nothingは、投稿テンプレートの一部として、各投稿タイトルの下にロゼットを挿入しています。

  • Firebugを使用して、これらのロゼットがCSSのどこから来ているかを見つけるにはどうすればよいですか？エントリヘッダー要素を調べてみましたが、ロゼットに関連付けられているように見えるものは何も表示されません。
  • それらのロゼットはUnicode文字であると推測するのは正しいですか、それとも他に何かが機能していますか？

ありがとう！

4

2 に答える 2

1

あなたのブラウザの開発者ツールはあなたの友達です。Safari（Firefoxでも利用可能）で「InspectElement」を使用すると、theme-journal.cssファイルの121行目に、ロゼットを追加する次のスタイルがあることがすぐにわかりました。

.entry-header {
    font-size: 2.4em;
    line-height: 1.3;
    margin: 0 20px 10px;
    background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;
    padding: 0 0 20px 0;
    text-align: center;
}

@jacktheripperが提案するように使用h1:afterすることは、より洗練されたアイデアですが、古いブラウザーとの互換性はありません。

于 2012-06-10T12:07:27.440 に答える
0

:: afterセレクターを使用して、すべてのh1要素の後にコンテンツを追加できます

CSS

h1:after {
    content: url("imagesource.jpg");
    display: block;
}​

このライブ例を見る

ただし、問題のサイトはそれを背景画像として使用しています。これは、要素インスペクターを使用し、その属性を調べることで確認できます。添付のスクリーンショットを参照してください

そのプロパティは次のとおりです。

background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;
于 2012-06-10T11:57:01.713 に答える