0

男が私のためにウェブサイトを作ってくれたので、私はそれを理解しようとしています. ここにあります： http://www.brilliantzenaudio.com

左上にロゴ画像があることに注意してください。これがどこから来たのか理解しようとしています。関連するコードは、一部が header.php に、一部が app.css にあるようです。header.php から、

<header class="banner" role="banner">
  <div class="container">

    <div class="row">
      <div class="col-xs-12 col-lg-2">
        <h1 class="logo"><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?>">Brilliant Zen Audio</a></h1>
          ... stuff removed here, other items in header ...             
      </div>
    </div>
  </div>
</header>

また、app.css には次のような行が含まれています。上記の php を見ると、「banner」クラスの要素があることがわかります。そのため、それをアドレス指定する css コードがあることは明らかです (色、位置、境界線、および z-index を指定します)。また、ヘッダータグにも「バナー」という「役割」が与えられていることがわかります。それは当面の目的に役立ちますか、それともスクリーンリーダー用ですか?

また、php には h1 要素が含まれており、'h1' 要素内に 'a' 要素が含まれていることもわかります。CSS エントリはそれらのもののためにあります。彼らの目的が何なのかはっきりしない。一つには、ロゴはイメージです。なんでh1タグつけてるの？ロゴは (ホームページに戻るために) クリックできるようにする必要があるため、タグの必要性を理解しています。しかし、リンクのテキストとして配置されるものは次のとおりです (そこで PHP を解析する方法については明確ではありません。賢いのは、「h1.logo a」CSS エントリの背景であるため、画像がそこに配置されることです。 .

以下のコメントにいくつかの一般的な質問を追加しました。

.banner { }

header.banner {
   background:#603913;
   position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
   border-bottom:solid 1px #fff;  // question: is this bottom border important for some reason?
   z-index:9999; // what does this do?
}
h1.logo {
   margin:0;  // is there a need to define these on h1.logo?
   padding:0;
}
h1.logo a {
   display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
   text-indent:-9999px;  // what is this?
   background:url(../img/sm-logo.png) no-repeat 0 0;
   width:101px;    // what does it mean when you set the width and height of an <a>
   height:103px;
   margin:0 auto;
}
4

2 に答える 2

3 
.banner { }

header.banner {
   background:#603913;
   position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
   border-bottom:solid 1px #fff;  // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
   z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
   margin:0;  // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
   padding:0;
}
h1.logo a {
   display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
   text-indent:-9999px;  // The text-indent property specifies the indentation of the first line in a text-block.
   background:url(../img/sm-logo.png) no-repeat 0 0;
   width:101px;    // Sets the width of this a, because it is a block element.
   height:103px;
   margin:0 auto;
}
于 2013-10-18T12:23:19.000 に答える
1

これは必ずしも答えではありませんが、Veelenの応答は各要素の機能に完全に的を射ていますが、以下はGoogle Chromeの Web インスペクター (またはFirefoxのFirebug )のスクリーンショットです。任意の DOM 要素にカーソルを合わせると、それに関するすべての情報が表示されます。CSS ルールをクリックすると、その場で何でも変更できます。

それを試してみて、物事がどのように見え、どのように感じられ、それが構築されているかを確認してください. これは、ほとんどの開発者がコード/再アップロードすることなく変更がどのように見えるかをテストして確認する方法であり、Web Inspector で触れて変更したものは保存されません =)

Google Chrome インスペクター

その後

于 2013-10-18T12:44:27.973 に答える