html 和 css 响应式网站样式异常

Question

有什么问题？为什么链接的位置不正确？如何在最小化浏览器后将链接保持在正确的位置，而且链接之间没有分隔。为什么会这样？请纠正我的 css 代码。还有我怎样才能让它更有反应。

.body {
  background-color: #E8E8E8;
  color: 000305;
  font-size: 87.5%;
  /*Base font size 14px*/
  font-family: arial, "Lucida Sans Unicode";
  font-height: 1.5;
  text-align: left;
  margin: 0 auto;
  width: 70%;
  clear: both;
}
a {
  text-decoration: none;
}
a:link,
a:visited {
  color: #CF5C3F;
}
a:hover,
a:active {
  background-color: #CF5C3F;
  color: #FFF;
}
.mainHeader img {
  width: 20%;
  height: auto;
  margin: 2% 0;
  border-radius: 90px;
}
.mainHeader nav {
  background-color: #666;
  height: 40px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainHeader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainHeader nav ul li {
  float: left;
  display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
  background-color: #CF5C3F;
  height: 20px;
  text-shadow: none;
}
.mainHeader nav ul li a {
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainContent {
  line-height: 25px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.content {
  width: 70%;
  float: left;
}
.topcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
}
.bottomcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
  margin-bottom: 2%;
}
.top-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
  margin-top: 2%;
}
.middle-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.bottom-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.mainFooter {
  width: 100%;
  float: left;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  background-color: #666;
  margin-top: 2% margin-bottom: 2%;
  height: 40%;
}
.mainFooter p {
  margin: 10px auto;
  width: 92%;
  color: #FFF;
}
.postinfo {
  font-style: italic;
  color: #999;
  font-size: 90%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->

<body class="body">

  <header class="mainHeader">
    <!--Main logo of the page!-->
    <img src="img/images.jpeg" alt="logo here">
    <!-- Main navigation bar!-->
    <nav>

      <ul>

        <li class="active"><a href="#">Home</li>
    
    <li><a href="#">About </li>
    
    <li><a href="#">Portofolio </li>
    
    <li><a href="#">Contact </li>

    </ul>
    
    </nav>

</header>

<!--Main content starts here!-->

<div class="mainContent">
<div class="content">

<article class="topcontent">

<header> 
   <h2><a href="#" title="First post">First post</a>
          </h2>
  </header>

  <footer class="postinfo">
    <p>This post is written by Christian</p>
  </footer>

  <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
      iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
      iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
  </content>


  </article>

  <!--bottom content starts!-->

  <article class="bottomcontent">

    <header>
      <h2><a href="#" title="Second post">Second post</a></h2> 
    </header>

    <footer class="postinfo">
      <p>This post is written by Christian</p>
    </footer>

    <content>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
        iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
        iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
    </content>


  </article>


  </div>
  </div>
  <!--This is the right side content!-->
  <aside class="top-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>

  <aside class="middle-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>

  <aside class="bottom-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>
  <!--This should be the foot of the webpage!-->
  <footer class="mainFooter">
    <p>Copyright &copy; 2016 <a href="#" title="1stwebdesinger">1stwebdesinger.com</a>
    </p>
  </footer>

</body>

</html>

Answer 1

我在你的代码中注意到的两个问题是你没有关闭 <a> 标签

第二次设置悬停时的高度从来都不是一个好习惯。在悬停链接高度增加这就是为什么会发生这种事情。 see snippet

更新代码尝试媒体查询

@media all and (max-width: 768px) {
 .mainHeader nav a:link, .mainHeader nav a:visited {
   font-size:80%;
    padding: 10px 15px;
}
/**MORE CODE FOR WIDTH 0 to 768px**/ 
    }

.body {
  background-color: #E8E8E8;
  color: 000305;
  font-size: 87.5%;
  /*Base font size 14px*/
  font-family: arial, "Lucida Sans Unicode";
  font-height: 1.5;
  text-align: left;
  margin: 0 auto;
  width: 70%;
  clear: both;
}
a {
  text-decoration: none;
}
a:link,
a:visited {
  color: #CF5C3F;
}
a:hover,
a:active {
  background-color: #CF5C3F;
  color: #FFF;
}
.mainHeader img {
  width: 20%;
  height: auto;
  margin: 2% 0;
  border-radius: 90px;
}
.mainHeader nav {
  background-color: #666;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainHeader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainHeader nav ul li {
  float: left;
  display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
  background-color: #CF5C3F;
 
  text-shadow: none;
}
.mainHeader nav ul li a {
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainContent {
  line-height: 25px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.content {
  width: 70%;
  float: left;
}
.topcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
}
.bottomcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
  margin-bottom: 2%;
}
.top-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
  margin-top: 2%;
}
.middle-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.bottom-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.mainFooter {
  width: 100%;
  float: left;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  background-color: #666;
  margin-top: 2% margin-bottom: 2%;
  height: 40%;
}
.mainFooter p {
  margin: 10px auto;
  width: 92%;
  color: #FFF;
}
.postinfo {
  font-style: italic;
  color: #999;
  font-size: 90%;
}

@media all and (max-width: 768px) {
 .mainHeader nav a:link, .mainHeader nav a:visited {
   font-size:80%;
    padding: 10px 15px;
} 
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>HTML5/CSS3 responsive theme</title>
</head>
<!--Body start here!-->

<body class="body">

  <header class="mainHeader">
    <!--Main logo of the page!-->
    <img src="img/images.jpeg" alt="logo here">
    <!-- Main navigation bar!-->
    <nav>

      <ul>

        <li class="active"><a href="#">Home</a></li>
    
    <li><a href="#">About</a> </li>
    
    <li><a href="#">Portofolio </a></li>
    
    <li><a href="#">Contact </li>

    </ul>
    
    </nav>

</header>

<!--Main content starts here!-->

<div class="mainContent">
<div class="content">

<article class="topcontent">

<header> 
   <h2><a href="#" title="First post">First post</a>
          </h2>
  </header>

  <footer class="postinfo">
    <p>This post is written by Christian</p>
  </footer>

  <content>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
      iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
      iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
  </content>


  </article>

  <!--bottom content starts!-->

  <article class="bottomcontent">

    <header>
      <h2><a href="#" title="Second post">Second post</a></h2> 
    </header>

    <footer class="postinfo">
      <p>This post is written by Christian</p>
    </footer>

    <content>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
        iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada ac lacinia vel, vulputate sit amet arcu. Aliquam quis congue nulla. Nulla egestas nisl risus, accumsan
        iaculis sem scelerisque vel. Praesent sit amet risus efficitur, rhoncus nisi quis, tincidunt dui. Duis consequat.</p>
    </content>


  </article>


  </div>
  </div>
  <!--This is the right side content!-->
  <aside class="top-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>

  <aside class="middle-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>

  <aside class="bottom-sidebar">
    <article>
      <h2>Top sidebar</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet interdum elit, id ultricies leo pretium id. Aenean erat risus, malesuada</p>
    </article>
  </aside>
  <!--This should be the foot of the webpage!-->
  <footer class="mainFooter">
    <p>Copyright &copy; 2016 <a href="#" title="1stwebdesinger">1stwebdesinger.com</a>
    </p>
  </footer>

</body>

</html>

Answer 2

您的代码中存在一些 css 和 html 问题。
首先关闭所有 <a href> 标签，然后从 .mainHeader nav ul li class 中删除 float:left 并将 inline 替换为 inline-block，这样您就不需要高度来显示导航背景。

之后您会看到所有菜单都排成一行，但再调整一些大小后，菜单将不再显示 space。对于此问题，您必须使用 Media query 来解决或使用 bootstrap 或导航栏菜单样式。

您可以阅读有关 Media query or Bootstrap 响应的更多信息。

在这里查看我的Fiddle。

* **注意 : 每当你使用 float:left 之后尝试使用 clear:both 这样就不会有任何额外的白色 gap/space 但是我已经从你的代码中删除了 float，所以只是旁注。希望对你有帮助..

Answer 3

风格的改变html可能对你有帮助

1- 关闭您的 "a" 标签

2- 用于

中的响应式使用风格

<style>
.body {
  background-color: #E8E8E8;
  color: 000305;
  font-size: 87.5%;
  /*Base font size 14px*/
  font-family: arial, "Lucida Sans Unicode";
  font-height: 1.5;
  text-align: left;
  margin: 0 auto;
  width: 70%;
  clear: both;
}
a {
  text-decoration: none;
}
a:link,
a:visited {
  color: #CF5C3F;
}
a:hover,
a:active {
  background-color: #CF5C3F;
  color: #FFF;
}
.mainHeader img {
  width: 20%;
  height: auto;
  margin: 2% 0;
  border-radius: 90px;
}
.mainHeader nav {
  background-color: #666;
  height: 40px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainHeader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainHeader nav ul li {
  float: left;
  display: inline;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
}
.mainHeader nav a:hover,
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
  background-color: #CF5C3F;
  height: 20px;
  text-shadow: none;
}
.mainHeader nav ul li a {
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.mainContent {
  line-height: 25px;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
}
.content {
  width: 70%;
  float: left;
}
.topcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
}
.bottomcontent {
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  padding: 3% 5%;
  margin-top: 2%;
  margin-bottom: 2%;
}
.top-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
  margin-top: 2%;
}
.middle-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.bottom-sidebar {
  width: 21%;
  float: left;
  background-color: #FFF;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  margin-left: 3%;
  padding: 2%;
  margin-bottom: 2%;
}
.mainFooter {
  width: 100%;
  float: left;
  border-radius: 5px;
  moz-border-radius: 5px;
  webkit-border-radius: 5px;
  background-color: #666;
  margin-top: 2% margin-bottom: 2%;
  height: 40%;
}
.mainFooter p {
  margin: 10px auto;
  width: 92%;
  color: #FFF;
}
.postinfo {
  font-style: italic;
  color: #999;
  font-size: 90%;
}

/*css 响应 */

@media (max-width:767px)
{
.mainHeader nav
{
    box-sizing:border-box;
    overflow:hidden;
}
.mainHeader nav ul li{
    width:100%;
    display:block;
    float:none;
}
.mainHeader nav, .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited{
    height:100%;
}
.mainHeader nav ul{
    padding:0px 0px;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
width:100%;
}
.mainHeader nav ul li a{
    border-radius:0px 0px;
}
}
</style>


 <!--html-->


    <nav>

          <ul>

            <li class="active"><a href="#">Home</a></li>

        <li><a href="#">About</a> </li>

        <li><a href="#">Portofolio </a></li>

        <li><a href="#">Contact </li>

        </ul>

        </nav>

html 和 css 响应式网站样式异常

html and css resposive website has abnormal styling

html

css

mobile-website