0

我正在使用像素完美来尝试复制网页以用于学习目的。我很难创造这个。对于初学者，我的文字不会停留在导航栏的中心。我认为这可能是我的标题的问题。我可能不小心将标题和导航组合在一起。我不知道如何解决它。

我要复制的页面

我的html：

  <body>
  <div id="wrapper">
    <header>
    <div id="bluebox"><h1>Main Title Here</h1></div>
    <div id="outerbox"></div>
    <div id="navbox"></div>
    </header>
    <div class="navigation-bar">
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

我的CSS：

/* general */
*{margin: 0; padding: 0;}
body {font-size: 100%; line-height: 1.5em; font-family: 'arial'; }
article, aside, figure, footer, header, main, menu, nav, section, video {display: block;}

/* wrapper */
#wrapper {width: 1024px; margin: 0 auto; }

/* header */
#wrapper header {height: 50px; padding-top: 128px; padding-right: 0px;
padding-bottom: 0px; padding-left: 0px;}
#wrapper h1 {font-family: "arial"; color: #FFF; top: 70px; position: absolute; padding-left: 195px; font-size: 2.75em;}
#bluebox{
 background-color: #23b6eb;
 width: 1020px;
 height: 140px;
 position: absolute;
 top: 30px;
}
#outerbox{
 background-color: #5d5a5a;
 width: 1020px;
 height: 30px;
 position: absolute;
 top: 0px;
}

/* navigation */

#navbox{
 background-color: #BBB;
 width: 1020px;
 height: 40px;
 position: absolute;
 top: 170px;
}

.navigation-bar {display: inline-block; font-weight: bold; font-size: 1.2em; vertical-align: center; text-align: center;}
nav ul li span, nav ul li a {text-decoration: none; color: #000; }
4

1 回答 1

2

正确的方法也是如此。我更改了以下内容：

  1. 彻底摆脱position: absolute。
  2. 替换所有height使用line-height.
  3. 去掉不必要的标签，比如outer-box等。
  4. 尽可能使用语义标签。

/* general */

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 100%;
  line-height: 1.5em;
  font-family: 'arial';
}

article, aside, figure, footer, header, main, menu, nav, section, video {
  display: block;
}

/* wrapper */
#wrapper {
  width: 1024px;
  margin: 0 auto;
  padding: 20px 0;
  background-color: #5d5a5a;
}

/* header */
#wrapper header {
  background-color: #23b6eb;
}

#wrapper header h1 {
  font-family: "arial";
  color: #fff;
  font-size: 2.75em;
  text-align: center;
  line-height: 2.5;
}


/* navigation */
nav ul {
  text-align: center;
  background-color: #ccc;
}

nav ul li {
  display: inline-block;
  padding: 0 25px;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}
<div id="wrapper">
  <header>
    <h1>Main Title Here</h1>
  </header>
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</div>

预习

预习

于 2017-04-18T17:57:56.087 回答