ヘッダーとフッターのバナーを追加して反応させる

Question

ヘッダーとフッターのバナーを追加しようとしましたが、バナーが正しく表示されず、反応しません。ここに私のヘッダコードは次のとおりです。

<div id="fb-root"></div> 
 
<header> \t 
 
    <center style="margin-top: 10px"><a href="https://example.com"><img src="https://example.com" alt="Banner"></a></center>

これは私のフッターのコードです：

<!--Footer--> 
 
<center><a href="https://example.com" alt="Banner"></a></center> 
 
<footer class="page-footer"> 
 
    <div class="container section"> 
 
    <div class="row"> 
 
     <div class="col s12 m12 l6"> 
 
     <h5> 
 
      <img src="{{ file_exists('assets/images/logo-udf.png') ? 'assets/images/logo-udf.png' : 'assets/images/logo.png' }}"> 
 
      <span>{{ @site.name }}</span> 
 
     </h5> 
 
     <p> 
 
      {{ @site.description }} 
 
     </p> 
 
     </div> 
 
     <div class="col s12 m6 l3"> 
 
     <h5><span>{{ @text.top_risers }}</span></h5> 
 
     <ul> 
 
      <repeat group="{{ @vars.risers }}" value="{{ @coin }}"> 
 
      <li><a href="{{ @BASE }}{{ 'coin','symbol='.@coin.symbol | alias }}">{{ @coin.name }}<span class="right">{{ @coin.change_pct }}</span></a></li> 
 
      </repeat> 
 
     </ul> 
 
     </div> 
 
     <div class="col s12 m6 l3"> 
 
     <h5><span>{{ @text.top_fallers }}</span></h5> 
 
     <ul> 
 
      <repeat group="{{ @vars.fallers }}" value="{{ @coin }}"> 
 
      <li><a href="{{ @BASE }}{{ 'coin','symbol='.@coin.symbol | alias }}">{{ @coin.name }}<span class="right">{{ @coin.change_pct }}</span></a></li> 
 
      </repeat> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="divider"></div> 
 
    </div> 
 
    <div class="footer-copyright"> 
 
    <div class="container section"> 
 
     <div class="row"> 
 
     <div class="col s12 m6"> 
 
      <a href="{{ @BASE }}/page/faq">{{ @text.faq_header }}</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</footer> 
 
<!--END Footer-->

当サイトは、トップ暗号コインを表示すると、私はバナーを望んでいましたすべての画面サイズで見栄えがよくなります。両方のバナーは728×90ピクセルです。

Answer 1

このクラスを両方のバナーに付けます。以下の例のように。

<center style="margin-top: 10px"><a href="https://example.com"><img class="imgClass" src="https://example.com" alt="Banner"></a></center> 

あなたのスタイルシートには、クラスがあります。あなたがちょうどあなたは、単にこのような何かを行うことができます（例えば、ナビゲーションなし）非常にシンプルなものを探している場合

.imgClass{ 
    width:100%; 
    height:auto; 
    float:left; 
    } 

インラインこの

<img style="width:100%; height:auto; float:left;" class="imgClass" src="https://example.com" alt="Banner"> 

Answer 2

.nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    background: #fff; 
 
    box-shadow: 0 0 0 4px rgba(0,0,0,0.125); 
 
} 
 
.nav>.container { 
 
    max-width: 950px; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.nav .title { 
 
    display: inline-block 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    font-size: 17px; 
 
    line-height: 50px; 
 
    color: #333; 
 
} 
 

 

 

 
/*** NOT RELEVANT ***/ 
 
html { height: 500px; background: #f9f9f9; 
 
padding-top:60px;font-family:sans-serif;} 
 
#app {margin-top:35px;} 
 
.container { 
 
    max-width: 950px; 
 
    padding-left: 1.5em; 
 
    padding-right: 1.5em; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
img { 
 
max-width: 100%;}

<meta name="viewport" content="width=device-width, user-scalable=no" /> 
 

 
<header class="nav" role="navigation"> 
 
    <div class="container"> 
 
     <a href="/" class="title">Brand</a> 
 
    </div> 
 
</header> 
 
<div class="container" id="app"> 
 
    <img src="https://fortunedotcom.files.wordpress.com/2017/06/btc_value.png"> 
 
    <small><em>Image from Google Search</em></small> 
 
</div>

ようになります。 CSS

.nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    background: #fff; 
    box-shadow: 0 0 0 4px rgba(0,0,0,0.125); 
} 
.nav>.container { 
    max-width: 950px; 
    padding-left: 1.5em; 
    padding-right: 1.5em; 
    margin-left: auto; 
    margin-right: auto; 
} 
.nav .title { 
    display: inline-block 
    font-family: sans-serif; 
    font-weight: bold; 
    font-size: 17px; 
    line-height: 50px; 
    color: #333; 
} 

については

HTML

<header class="nav" role="navigation"> 
    <div class="container"> 
     <a href="/" class="title">Brand</a> 
    </div> 
</header> 

のために忘れないでください！ビューポートタグを含める。

<meta name="viewport" content="width=device-width, user-scalable=no" />