如何在HTML5和CSS3中并排对齐我的徽标和导航栏？

时间：2015-12-16 18:47:25

标签： html css html5 css3

我是编码和整个编码世界的新手，并开始致力于“有趣和教育”网站学习，我被卡住了，我有一个基于文本的徽标和导航栏，两者总是在顶部在页面上很好但是它们重叠，我如何对齐它们以使它们彼此相邻并且导航栏与徽标的中心宽度对齐？

h1.one {
  float: left;
  position: fixed;
  overflow: auto;
  color: #0066cc;
  font-size: 36px;
  border: 1px solid black;
  background-color: #333;
  text-align: center;
}
h1.one a {
  text-decoration: none;
  color: white;
}
h1.one:hover {
  background-color: #4CAF50;
}
ul.navigation_bar {
  float: right;
  position: fixed;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #333;
}
li.navigation_bar {
  float: right;
}
li a {
  display: block;
  padding: 14px 16px;
  background-color: #333;
  color: white;
  text-align: center;
  text-decoration: none;
}
li a:hover {
  background-color: #4CAF50;
}
p {
  font-size: 24px;
  text-align: center;
}
p br {
  border: 1px solid rgb(12, 27, 232);
}
body {
  background-color: white;
}
<h1 class="one"><a href="index.html"><center>Lorem Ipsum<br>Dolor</br>`</center></a></h1>`
<ul class="navigation_bar">
  <li class="navigation_bar"><a href="index.html">Home</a>
  </li>
  <li class="navigation_bar"><a href=#blog_posts.html>Blog Posts</a>
  </li>
  <li class="navigation_bar"><a href=#social_media_links.html>Social Media Links</a>
  </li>
  <li class="navigation_bar"><a href=#newsletter.html>Newsletter</a>
  </li>
  <li class="navigation_bar"><a href=#contact.html>Contact</a>
  </li>
  <li class="navigation_bar"><a href=#store.html>Store</a>
  </li>
</ul>


<p>
  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet
  semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate
  in.
  </br>

  <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla
  in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend.
  Praesent vehicula quam sit amet bibendum luctus.</br>

  <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum.
  Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris
  consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet
  tincidunt sit amet sit amet dolor.</br>

  <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque
  vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

  <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur
  consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>
  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet
  semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate
  in.
  </br>

  <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla
  in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend.
  Praesent vehicula quam sit amet bibendum luctus.</br>

  <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum.
  Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris
  consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet
  tincidunt sit amet sit amet dolor.</br>

  <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque
  vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

  <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur
  consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>
  <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet
  semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate
  in.
  </br>

  <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla
  in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend.
  Praesent vehicula quam sit amet bibendum luctus.</br>

  <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum.
  Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris
  consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet
  tincidunt sit amet sit amet dolor.</br>

  <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque
  vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

  <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent
  per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur
  consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>
</p>

3 个答案:

答案 0 :(得分：0)

http://jsbin.com/paladi/1/edit?html,css,js,output

而不是在H1上使用fixed位置，UL等...... 仅使用一个固定元素 

<div id="fixedHeader">
     <!-- Other elements here (without the fixed thing) -->
</div>


#fixedHeader{
    position:fixed;
    width:100%;
    top:0;
}

答案 1 :(得分：0)

尝试link

CSS代码

.menu{
  margin-right: 0px;
  float: right;
 }
  h1.one a{
     text-decoration: none;
     color: white;
   }

  h1.one:hover {
      background-color: #4CAF50;
  }

 ul.navigation_bar {
   list-style-type: none;
   right: 0;
   padding: 0;
   overflow: auto;
   width:80%;
   background-color: #333;
 }

答案 2 :(得分：0)

您想制作固定菜单和徽标吗？如果你想制作它你可以把它们放在容器中，因为你使用HTML5或只是添加div与类并修复它。

这是代码 Codepin 

* {
  text-decoration:none;
  list-style-type:none;
}

nav {
  width:100%;
  height:70px;
  background-color: #2980b9;
  position:fixed;
  border-radius: 10px;
}

h3 > a {
  margin:-10px 8px;
  padding:15px;
  float:left;
  background-color:#34495e;
  border-radius: 10px;
  color: #fff
}

ul {
  float:right;
  margin-top:-14px;
  padding-right:60px;
  padding-top:px;
}

ul > li {
  float:right;
  padding:0;
  margin-left:15px;
}

ul > li > a {
  display: inline-block;
  width:100%;
  padding:20px 4px;
  background-color: #3498db;
  color:#fff;
  border-radius:10px;
}

.menu-framework {
  width:100%;
  height:70px;
}
<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content="Lorem Ipsum"/>
    <meta name="description" content="Lorem Ipsum"/>
    <meta name="author" content="Magic Liquid" />
    <title>Lorem Ipsum!</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
  <body>
   <nav>
      <h3> <a href="#">Site Logo </a> </h3>
        <ul class="navigation_bar">
          <li class="navigation_bar"><a href="index.html">Home</a></li>
          <li class="navigation_bar"><a href=#blog_posts.html>Blog Posts</a></li>
          <li class="navigation_bar"><a href=#social_media_links.html>Social Media Links</a></li>
          <li class="navigation_bar"><a href=#newsletter.html>Newsletter</a></li>
          <li class="navigation_bar"><a href=#contact.html>Contact</a></li>
          <li class="navigation_bar"><a href=#store.html>Store</a></li>
      </ul>
    </nav>
    <div class="menu-framework"></div>
    <p>
        <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate in.</br>

        <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend. Praesent vehicula quam sit amet bibendum luctus.</br>

        <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum. Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet tincidunt sit amet sit amet dolor.</br>

        <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

        <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate in.</br>

        <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend. Praesent vehicula quam sit amet bibendum luctus.</br>

        <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum. Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet tincidunt sit amet sit amet dolor.</br>

        <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

        <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie sem odio. Nunc molestie auctor mi eu sollicitudin. Sed at tempor justo, a pulvinar ipsum. Nam non placerat neque, non aliquam erat. Proin diam ligula, rhoncus non ex eu, aliquet semper sem. Maecenas euismod porttitor augue. Praesent tincidunt nunc ac elit consectetur suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque dictum velit sem, eu congue tortor vulputate in.</br>

        <br>Mauris consectetur consectetur neque quis varius. Aliquam libero velit, venenatis et erat ac, blandit congue libero. Maecenas aliquam orci ac felis finibus, a eleifend dui tincidunt. Nam justo velit, bibendum nec lobortis a, viverra eget sapien. Nulla in porta lorem. Pellentesque eget lorem lacus. Fusce vel sodales sem, eleifend ultrices orci. Nullam ultricies sollicitudin sapien sed viverra. Quisque porta aliquet ante, id convallis felis auctor ac. Vestibulum lobortis nisl congue ultrices eleifend. Praesent vehicula quam sit amet bibendum luctus.</br>

        <br>Proin tincidunt varius lacus vitae pellentesque. Aenean a fringilla ligula. In hac habitasse platea dictumst. Aliquam sed tincidunt nunc. Nunc efficitur scelerisque odio, sit amet elementum mauris hendrerit id. Nulla ac est ut diam facilisis elementum. Vivamus et enim iaculis sapien dignissim imperdiet eget quis odio. Pellentesque quam metus, fringilla non sapien ut, hendrerit dictum nulla. Vestibulum porta, arcu at commodo ornare, ante est condimentum lacus, eget vehicula odio ante at arcu. Mauris consequat ipsum nibh, non malesuada dolor gravida eu. Etiam justo eros, commodo eu mollis et, commodo sodales nisl. Aliquam consequat ornare ipsum id venenatis. Vivamus vitae est cursus, scelerisque mauris at, tincidunt ipsum. Ut sed ante id erat laoreet tincidunt sit amet sit amet dolor.</br>

        <br>Aliquam lacinia volutpat diam, in tincidunt felis tristique egestas. Sed accumsan dolor eget ipsum iaculis hendrerit. Morbi nec sodales libero, non accumsan magna. Mauris at neque odio. Vivamus a mi non risus sollicitudin tincidunt a quis elit. Pellentesque vel erat nec diam imperdiet dictum. Integer rhoncus congue mi, vitae pellentesque justo finibus sed. Nulla sit amet erat eros. Vivamus eu pretium lacus. Sed sed blandit neque.</br>

        <br>Vestibulum sit amet nunc elementum nunc semper iaculis. Pellentesque id lacinia massa, non bibendum sem. In aliquam at odio eu pretium. Cras dictum quis lectus quis viverra. Fusce pretium dapibus scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur metus quis tortor posuere volutpat. Fusce vel nibh commodo, pellentesque neque nec, aliquet dolor. Aliquam eget libero lacus. Aenean molestie turpis risus, eu sagittis mi interdum vitae. Curabitur consequat molestie urna nec rutrum. Pellentesque eget orci sagittis, eleifend dolor non, ultrices enim. Vivamus porttitor feugiat consectetur.</br>
</p>
  </body>
</html>

但你会遇到一些问题，你的菜单会从他的框架中取出并让下面的内容取代他的位置以避免这个你可以做的小技巧就是把导航后的div放进去给它一个具有相关名称的类，如menu-framework，并使菜单宽度和高度相同：

问候。

相关问题
最新问题