html和css resposive网站有异常的样式

时间：2016-03-18 07:03:47

标签： html css html5 css3 mobile-website

有什么问题？为什么链接位置不正确？如何在最小化浏览器之后将链接保持在正确的位置，链接之间也没有分离。为什么会这样？请纠正我的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>

3 个答案:

答案 0 :(得分：1)

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

之后，您将看到所有菜单都在一行中，但在重新调整大小之后，菜单将会下降，因为没有这样的空间。对于此问题，您必须使用媒体查询来解决或使用引导程序或导航栏菜单样式。

您可以详细了解Media query或Bootstrap的响应能力。

点击此处Fiddle。

* **注意：每当您使用float:left时，请尝试使用clear:both，这样就不会有任何额外的白色间隙/空间，但我有从你的代码中删除了浮动，所以只需注意。希望它会有所帮助..

答案 1 :(得分：0)

我在您的代码中注意到的两个问题是您没有关闭<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**/ 
    }

＆＃13;
＆＃13; 
.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;
} 
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的风格和HTML的变化可能会对你有所帮助

1-关闭你的“a”标签

用于代表性的使用方式

<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>
相关问题
最新问题