我想在菜单列表上方设置以下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>
答案 0 :(得分：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>
答案 1 :(得分：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;
}<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>
答案 2 :(得分：1)
你可以试试这个。
我添加了一个类（.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>
答案 3 :(得分：1)
只需将标记放在导航栏上方即可。使用可以实际扩展到屏幕宽度的高质量图像。
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>
答案 4 :(得分：0)
请看这个，对你有帮助。
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>
<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>
答案 5 :(得分：0)
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;
}<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>
检查上面的代码段..
答案 6 :(得分：0)
你可以使用背景大小和填充顶部来保持图像比例，如果它只是关于设计。
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>