Question

我试图让这个网站尽可能简单。

问题一：基本上我试图将页眉镜像到页脚，但它们不匹配。

问题二：导航栏和headerBlue之间有不必要的空格

我在这里找到了所需效果的链接！ http://i.stack.imgur.com/2bJ9Q.png

非常感谢任何帮助。

Html代码：

<!DOCTYPE html>
<html>
<head>
<meta name="language" content="en">
 <link href="teststyle.css" type="text/css" rel="stylesheet" />
 <title>Neecal Natural Stone Care</title>
</head>
<body>

<section class="wrapper"> 
    <div class="HeaderRed">
      <strong><p>Header</p></strong>
    </div>
    <div class="Spacer"></div>
    <div class="HeaderBlue">
      <strong><p>header blue</p></strong>
    </div>
   <div class="navbar">
     <ul>
           <li><a href="About.html" title="About">About</a></li>
           <li><a href="Contact.html" title="Contact">Contact</a></li>
           <li><a href="PhotoGallery.html" title="Gallery">Gallery</a></li>
           <li><a href="NewArchive.html" title="News Archive">News Archive</a></li>
      </ul>
    </div> <!-- nav bar  !-->
    <section class="main">


    </section><!-- body closed  !-->
 <div class="footerBlue">
  <p>footer blue</p>
   </div>

 <div class="Spacer"></div>

<strong><p></p></strong>
    <div class="footerRed">
      <ul>
           <li><strong><a href="Copyright.html">Copyright</a></strong></li>
           <li><strong><a href="SiteMap.html">SiteMap</a></strong></li> 
      </ul>
    </div> <!-- footer  !-->
</section><!-- wrrapper  !-->
</body>
</html>

CSS代码：

      body {
      font-family:Arial, Helvetica, sans-serif; 
      padding: 2.5%;
      font-size: 12px;
      font-weight: normal;
      margin: 2.5%;
      background: #FFF;
    }

    li {
      display:inline;
    }

    div {
    display: block;
    }

    .HeaderRed{
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      background-color: #b51a22;
      width: 100%;
      height: 100px;
      padding-top: 5%;
    }

    .Spacer{
      background-color: white;
      width: 100%;
      height: 100%;
    }

    .HeaderBlue{
      background-color: #12357d;
      width: 100%;
      height: 100px;
    }

    .wrapper{
      width: 100%;
      height: 100%;
      border: 1px dashed black;
      border-top-right-radius: 25px;
      border-top-left-radius: 25px;
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      padding: 2%;
    }

    .navbar{
      width: 100%;
      height: 100%;
      text-align: center;
      border-radius: 2%;
      background-color: #13367c;

    }

    .main{ 
      width: 100%;
      height: 100%;
      background-color: white;
      border: 1px solid black;
    }

    .footerBlue{
      width: 100%;
      height: 100%;
      background-color: #12357d;
    }

    .footerRed{
      width: 100%;
      height: 100%;
      border-radius: 2px;
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: #b51a22;
      text-align: center;
    }

Answer 1

问题1的解决方案 （基本上我正在尝试将页眉镜像到页脚，但它们不匹配。）是：

.footerRed {
  ...
  height: 100px;          /*change the height in px */
  padding-top: 5%;        /* add a padding-top */
 }

问题2的答案 （问题二：导航栏和headerBlue之间有不必要的空格）是：

重置ul的标准边距：

ul {margin:0;}

DEMO

Answer 2

确保 footerRed 匹配 headerRed

.footerRed {
      border-bottom-right-radius: 25px;
      border-bottom-left-radius: 25px;
      background-color: #b51a22;
      width: 100%;
      height: 100px;
      padding-top: 5%;
      line-height: 100px;
      text-align: center;
}

删除 headerBlue 和导航栏

之间的空格

nav > ul {
    margin-top: 0;
}

以下是更新后的JSFiddle。

我的网站上有一个小错误

2 个答案: