在屏幕顶部创建一个导航栏固定 [英] Creating a Navigation Bar FIXED on the top of screen
问题描述
我正在创建一个导航系统，目前我所拥有的是屏幕顶部的标题，并排显示，例如，家庭，关于我们等等。
我不确定如何在屏幕顶部为导航系统创建固定位置，因此当您向下滚动时这些选项仍然会在那里点击屏幕顶部。
另外，如何才能为导航系统添加背景颜色？
谢谢。
去HTML5路线，并使用SEMANTIC标签。
以下内容：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title>标题< / title>
<！ - 下一行指向EXTERNAL Stylesheet - >
< link type =text / css =stylesheethref =mystylesheet.css/>
< / head>
< body>
<！ - HEADER - >
< header>
< h1> h1中的标题< / h1>
< / header>
<！ - 导航 - >
< nav>
< ul>
< li class =MyMenuItem>< a href =＃>菜单选项1< / a>< / li>
< li class =MyMenuItem>< a href =＃>菜单选项2< / a>< / li>
< li class =MyMenuItem>< a href =＃>菜单选项3< / a>< / li>
< / ul>
< / nav>
<！ - SECTION（S） - >
< br />
<节>
<文章>
< header>
< h3 class =MyArticleHeader>文章＃1< / h3>
< / header>
<节>
< p>这是第一篇文章。这是<标记>突出显示< /标记> ;.这是一些身体文本，lorem ipsum dipsum和一些更多未知的拉丁文字一遍又一遍。 Lorem ipsum dipsum和一些更多未知的拉丁文字一遍又一遍。 Lorem ipsum dipsum和一些更多未知的拉丁文字一遍又一遍。 Lorem ipsum dipsum和一些更多未知的拉丁文字一遍又一遍。< / p>
< / section>
< / article>
<文章>
< header>
< h3 class =MyArticleHeader>文章＃2< / h3>
< / header>
<节>
< p>这是第二篇文章。这些文章可能是博客帖子等。< / p>
< / section>
< / article>
< / section>
<！ - FOOTER - >
< footer id =MyFooter>页脚 - 版权所有2013< / footer>
< / body>
< / html>
也有其他语义标签，例如Aside。
这就是符合上面示例的样式表
body
{
padding：12px;
}
h1
{
颜色：#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;
颜色：#FFFFFF;
背景颜色：＃FFCC66;
}
.MyMenuItem：hover
{
margin：2px;
padding：2px 8px 2px 8px;
list-style-type：none;
vertical-align：middle;
text-align：center;
float：left;
颜色：＃000000;
背景颜色：＃99CCFF;
}
.MyArticleHeader
{
color：＃FF0000;
text-decoration：下划线;
font-weight：bold;
}
p
{
font-family：Tahoma;
font-size：12pt;
}
#MyFooter
{
color：#FFFFFF;
background-color：＃FF0000;
vertical-align：middle;
text-align：center;
$ b 只需将上述两个样本复制并粘贴到单独的文件中，一个名为test.htm另一个名为mystylesheet.css（位于同一个文件夹中）
I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, e.g. 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.
解决方案 It would most probably be best to go the HTML5 route, and use SEMANTIC tags.
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.
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)
Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx
这篇关于在屏幕顶部创建一个导航栏固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
