CSS导航栏与图像

琼·多伊

我正在尝试使用CSS制作导航栏。导航链接需要与条中间的图片均匀间隔。目前看起来像这样:

在此处输入图片说明

编码:

body {
  background-image: url("../img/bg.jpg");
  margin-left: 0px;
  margin-right: 0px;
}
div.menucontainer {
  margin-top: 50px;
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  height: 35px;
  box-shadow: 0px 5px 10px #000;
  text-align: center;
}
IMG.vcmenulogo {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 10px;
}
.menulinks {
  position: relative;
  right: 0px;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
.menulinks li {
  display:inline;
}
.menulinks a {
  display:inline-block;
  padding:10px;
}
#footer {
  position: fixed; 
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
  width:100%;
  height:20;
  bottom:0;
}
P.footer {
  text-align: center;
  color: white;
  font-size: 11px;
  font-family: Arial;
}
<!DOCTYPE html>
<html>
  <head>
    <title>The Vincent Collection: Luxury in Haircare</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="menucontainer">
      <img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
      <ul class="menulinks">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </div>
    <div id="footer"> <p class="footer">Copyright &copy; 2016 Salon on Wheels, LLC. All rights reserved.</p> </div>
  </body>
</html>

迪帕斯

您可以更改HTML,插入imgas li,然后position:absolute从中删除as 并进行其他一些关于positionvalue和的调整vertical-align,您将拥有所需的内容。

body {
  background-image: url("../img/bg.jpg");
  margin: 0
}
.menucontainer {
  margin-top: 50px;
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  height: 35px;
  box-shadow: 0px 5px 10px #000;
  text-align: center;
}
.menulinks {
  position: relative;
  top: -90px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.menulinks li {
  display: inline-block;
  padding: 10px;
  vertical-align: middle
}
<div class="menucontainer">
  <ul class="menulinks">
    <li><a href="/">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li>
      <img class="vcmenulogo" src="http://www.thevincentcollection.com/img/vc-logo-menu.png" />
    </li>
    <li><a href="/work/">Products</a>
    </li>
    <li><a href="/contact/">Contact</a>
    </li>
  </ul>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章