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

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 个解决方案

解决方案1
2 2013-04-28 00:26:48

解决方案2
2 2013-04-28 01:56:17

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

问题描述

2 个解决方案

解决方案1 2 2013-04-28 00:26:48

解决方案2 2 2013-04-28 01:56:17

解决方案1
2 2013-04-28 00:26:48

解决方案2
2 2013-04-28 01:56:17