小贝子编程

HTML和CSS修复网站样式异常


有什么问题？ 为什么链接位置

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

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

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

可以阅读有关媒体查询或引导程序以实现响应能力的详细信息。

在这里检查我的小提琴。

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

更改您的样式和 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>

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

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium