当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How do I align my logo and navigation bar to side by side in HTML5 and CSS3?

问题描述:

I am new to coding and the whole world of coding and started working on for "fun and education" website to learn, I am stuck, I have a text based logo and a navigation bar, and the both are always on top on of the page which is fine but they are over lapping, how can I align them so they are next to each other and the navigation bar is aligned to centre width of the logo?

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>

网友答案:

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

Instead of using fixed position on H1, UL etc...
use only one fixed element

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

#fixedHeader{
    position:fixed;
    width:100%;
    top:0;
}
网友答案:

Try the link

CSS code

.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;
 }
网友答案:

Are you want to make fixed menu and logo? if you want to make that you can put them in container such because you use HTML5 or just add div with class and make it fixed.

This is the code 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: