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

Question

I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, eg home, about us and so on. 我正在创建一个导航系统，当前我所拥有的只是屏幕顶部并排的标题，例如，关于我们的家，等等。

I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen. 我不确定如何在屏幕顶部为导航系统创建固定位置，因此当您向下滚动等时，选项仍会存在，可以在屏幕顶部单击。

Also, how it would be possible to add a background colour just to the navigation system? 另外，如何可能仅向导航系统添加背景色？

Thank you. 谢谢。

Answer 1

Try something like this: 尝试这样的事情：

In between the tags in the HTML: 在HTML中的标记之间：

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

and in the CSS put: 并在CSS中输入：

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

Here's a JSFiddle: http://jsfiddle.net/MGumH/ 这是一个JSFiddle： http : //jsfiddle.net/MGumH/

Answer 2

It would most probably be best to go the HTML5 route, and use SEMANTIC tags. 最好是走HTML5路线，并使用SEMANTIC标签。

Something along the lines of the below: 遵循以下内容：

<!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>

There are also other semantic tags too, like Aside for example. 也有其他语义标签，例如Aside。

And this is the stylesheet that goes with the above sample 这是上面示例附带的样式表

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;
}

Simply copy ans paste the above two samples into separate files one called test.htm and the other called mystylesheet.css (in the same folder) 只需将上面的两个示例复制并粘贴到单独的文件中，一个称为test.htm，另一个称为mystylesheet.css（在同一文件夹中）

Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx 参考：有关更多信息，请参见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