Hinzufügen und Erstellen einer Kopfzeile und Fußzeile Banner reagiert

Ich habe versucht, eine Kopf- und Fußzeile Banner, aber das Banner sieht nicht richtig aus und reagiert auch nicht. Hier ist meine Header-Code:Hinzufügen und Erstellen einer Kopfzeile und Fußzeile Banner reagiert

<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>

Das ist mein Footer Code:

<!--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='[email protected] | 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='[email protected] | 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-->

Diese Webseite zeigt die Top-Krypto-Münzen und ich wollte, dass die Banner auf allen Bildschirmgrößen gut aussehen. Beide Banner sind 728X90 Pixel.

Quelle

2017-12-27 John

Möchten Sie, dass die Banner die Breite des Bildschirms ausfüllen? – Jonny

Ja, aber die Banner sind nur 728X90. – John

Hängen Sie diese Klasse an beide Banner an. Wie im folgenden Beispiel.

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

Und in Ihrem Stylesheet sollte Ihre Klasse sein.

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

Inline würde aussehen wie dieses

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

Quelle

2017-12-27 02:20:09 Jonny

Es ist einfach, ein Bild zu skalieren und seine Integrität zu bewahren, aber das Skalieren ist eine andere Geschichte. Sie können eine Breite und Höhe für ein Bild festlegen und wenn das Verhältnis dieses Bildes nicht gleich skaliert wird, wird es verzerrt oder gestreckt. Der einfachste Weg ist, das Bild über Photoshop oder etwas in der richtigen Größe zu skalieren. – Jonny

Hallo Jonny, welches CSS sollte ich hinzufügen, wenn ich nur möchte, dass das Bild reagiert, aber bleiben 728x90 wenn auf einem Desktop/Laptop? Wie kann ich diese kleine weiße Lücke im Header-Banner entfernen? Vielen Dank Mann – John

hast du einen Link, wo ich den IMG anzeigen kann? und versuchen Sie, Ihren oberen Rand auf Ihrer Kopfzeile wegzunehmen. könnte deine Lücke sein. – Jonny

-1

.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>

Wenn Ihr nur für etwas sehr einfach (z ohne Navigation) Suchen Sie einfach so etwas tun könnte.

Für 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; 
}

Für HTML

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

ERINNERN! So fügen Sie das Viewport-Tag ein

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

Quelle

2017-12-27 02:22:10 Decrypted

Hinzufügen und Erstellen einer Kopfzeile und Fußzeile Banner reagiert

Antwort

Verwandte Themen