将图像设置在页面顶部

Question

我想在菜单列表上方设置以下image。

我是否可以将<header>标记用于此目的 - 如果可以，我可以如何使用？

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 1

您可以在标题标记中使用它，您可以在下面更新代码

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

<header>
  <img src="https://www.sololearn.com/Uploads/html-css.jpg " alt="" />
</header>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 2

不确定您想要实现的目标，但从您的问题我知道您希望图像位于菜单上方。所以它是：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

<img src="https://www.sololearn.com/Uploads/html-css.jpg">
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 3

你可以试试这个。 我添加了一个类（.img-header）来使图像响应。如果需要，可以删除此类。

我还添加了<header>代码，因为您在问题中提到了它，但这不是强制性的。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

.img-header {
  width: 100%;
  height: auto;
}

<header>
  <img class="img-header" src="https://www.sololearn.com/Uploads/html-css.jpg" />
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</header>

Answer 4

只需将标记放在导航栏上方即可。使用可以实际扩展到屏幕宽度的高质量图像。

header > img{
width:100%;
height:auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

<header><img src="https://www.sololearn.com/Uploads/html-css.jpg " alt="" /></header>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 5

请看这个，对你有帮助。

＆＃13;

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

＆＃13;

<header>
<center><img src="https://www.sololearn.com/Uploads/html-css.jpg" /></center>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 6

＆＃13;

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-image: url(https://www.sololearn.com/Uploads/html-css.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: white;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

＆＃13;

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

检查上面的代码段..

Answer 7

你可以使用背景大小和填充顶部来保持图像比例，如果它只是关于设计。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url(https://www.sololearn.com/Uploads/html-css.jpg) 0 0 no-repeat;
  background-color: #333333;
  background-size: 100% auto;
  
  /* eventually */
  max-width: 800px;/* any sized wished*/
  margin: auto;
}

ul:before {
  content: '';
  display: block;
  padding-top: 48%;/* 325/675  gives average ratio */
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

html {background:#74CDD3}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>