-1

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

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

此外，如何仅向导航系统添加背景颜色？

谢谢你。

4

2 回答 2

2

尝试这样的事情：

在 HTML 中的标签之间：

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

并在 CSS 中放置：

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

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

于 2013-04-28T00:26:48.530 回答
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

于 2013-04-28T01:56:17.990 回答