Question

我尝试添加页眉和页脚横幅，但横幅看起来不正确，也没有响应。这是我的标题代码：

<div id="fb-root"></div>
<header>	
  <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-->

这个网站显示顶部加密硬币，我希望横幅在所有屏幕尺寸上看起来都很好。两个横幅都是728X90像素。

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

＆＃13;

.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%;}

＆＃13;

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

＆＃13;

如果你只是寻找一些非常简单的东西（例如没有导航），你可以简单地做这样的事情。

适用于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" />

添加＆amp;使页眉和页脚横幅响应

2 个答案: