应用错误收集

如何使菜单停留在特定位置。（初学者）

时间：2016-10-19 04:27:48

标签： html css

我正在为我的家人制作一个网站，我仍然坚持如何让菜单停留在特定的地方。我希望它在图片下面，所以它看起来更好。此外，当我调整浏览器大小时，菜单出现在不同的位置，图片也会调整大小，我不知道如何解决这个问题。到目前为止，这是我的代码。

<!DOCTYPE html>

<head>
    <title>King Buffet</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
     <img src="images/LOGO.png" />
</head>

<body>
    <ul><a href="#/menu.html">Menu</a></ul>
    <ul><a href="#/map.html">Map</a></ul>
    <ul><a href="#/contact.html">Contact</a></ul>
    <ul><a href="#/order-now.html">Order Now</a></ul>

</body>

body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}

img {
width: 50%;
height: auto;
position: fixed;
top: 15%;
left: 25%;
}

ul {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;

}

1 个答案:

答案 0 :(得分：1)

试试此代码

＆＃13;

＆＃13;

body {
background: #db2811;
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 500px;
box-shadow: 0 0 2px rgba(0,0)
}

img {
  width: 100%;
}

div.wrapper {
  width: 50%;
 height: auto;
 position: fixed;
 top: 15%;
 left: 25%;
}
ul {
  display: block;
  position: absolute;
  bottom: 0;
}

ul li {
color: #fff200;
font-size: 20px;
font-weight: 600;
display: inline-block;
list-style: none;
}

＆＃13;

<div class="wrapper">
<img src="http://www.logoopenstock.com/media/users/379/777/raw/e6d45448a69242d3c681de28cdd9b470-logo-design-download-free-psd-file.jpg" clas="logo"/>
<ul class="menu">
  <li><a href="#/menu.html">Menu</a></li>
  <li><a href="#/map.html">Map</a></li>
  <li><a href="#/contact.html">Contact</a></li>
  <li><a href="#/order-now.html">Order Now</a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;