Question

我正在创建一个导航系统，目前我所拥有的只是屏幕顶部的标题，并排，例如回家，关于我们等等。

我不确定如何在屏幕顶部为导航系统创建固定位置，因此当您向下滚动时，选项仍然会在屏幕顶部点击。

此外，如何才能将背景颜色添加到导航系统？

谢谢。

Answer 1

尝试这样的事情：

在HTML中的标记之间：

<div id='header'>NAVIGATION LINKS</div>

并在CSS中放置：

#header{
   padding:10px;
   height:20px;
   position:fixed;
   width:100%;
}

这是一个JSFiddle：http://jsfiddle.net/MGumH/

Answer 2

最有可能最好使用HTML5路线，并使用SEMANTIC标签。

下面的内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
  <!-- next line points to EXTERNAL Stylesheet -->
  <link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>

<body>

  <!-- HEADER -->
  <header>
    <h1>Header in h1</h1>
  </header>

  <!-- NAVIGATION -->
  <nav>
    <ul>
      <li class="MyMenuItem"><a href="#">Menu Option 1</a></li>
      <li class="MyMenuItem"><a href="#">Menu Option 2</a></li>
      <li class="MyMenuItem"><a href="#">Menu Option 3</a></li>
    </ul>
  </nav>

  <!-- SECTION(S) -->
  <br />
  <section>
    <article>
      <header>
        <h3 class="MyArticleHeader">Article #1</h3>
      </header>
      <section>
        <p>This is the first article.  This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p>
      </section>
    </article>
    <article>
      <header>
        <h3 class="MyArticleHeader">Article #2</h3>
      </header>
      <section>
        <p>This is the second article.  These articles could be blog posts, etc.</p>  
      </section>
    </article>
  </section>

  <!-- FOOTER -->
  <footer id="MyFooter">Footer - Copyright 2013</footer>
</body>
</html>

还有其他语义标签，例如Aside。

这是与上面的示例一起使用的样式表

body
{
  padding: 12px;
}   

h1
{
  color: #FFFFFF;
  background-color: #FF0000;
  text-align: center;
  vertical-align: middle;
}

.MyMenuItem
{
  margin: 2px;
  padding: 2px 8px 2px 8px;
  list-style-type: none;
  vertical-align: middle;
  text-align: center;
  float: left;
  color: #FFFFFF;
  background-color: #FFCC66;
}

.MyMenuItem:hover
{
  margin: 2px;
  padding: 2px 8px 2px 8px;
  list-style-type: none;
  vertical-align: middle;
  text-align: center;
  float: left;
  color: #000000;
  background-color: #99CCFF;
}

.MyArticleHeader
{
  color: #FF0000;
  text-decoration: underline;
  font-weight: bold;
}

p
{
  font-family: Tahoma;
  font-size: 12pt;
}

#MyFooter
{
  color: #FFFFFF;
  background-color: #FF0000;
  vertical-align: middle;
  text-align: center;
}

只需将上述两个样本复制并粘贴到单独的文件中，一个名为test.htm，另一个名为mystylesheet.css（在同一个文件夹中）

参考：更多信息http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

在屏幕顶部创建导航栏固定

2 个答案: