HTML 导航条,固定在网页顶部,水平框(按钮)
HTML Navigation Bar, fixed at the top of webpage, horizontal boxes(buttons)
我正在尝试让导航栏显示在网页顶部,在干净的框内放置水平按钮。与 http://www.apple.com/ 中的导航栏非常相似。我觉得好像我应该知道该怎么做,但显然我不知道。非常感谢任何帮助,甚至是要点和提示。谢谢,下面是我到目前为止的代码。
Css 先显示,然后是我的 HTML。
body{
border: solid;
background-color: white;
color: black;
text-align: center;
}
table.slideshow{
}
th.slideshowtitle{
text-align: center;
}
footer{
border-top: solid 10px;
}
/*nav bar*/
.navbar-inverse {
background-color:black;
}
<!DOCTYPE html>
<html>
<head>
<link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" />
<title>
Hall Of Framers
</title>
</head>
<body>
<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<u1 class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li>
<li><a href="">Custom Frames</a></li>
<li><a href="">News</a></li>
<li><a href="">Silent Auction</a></li>
<li><a href="">Upcoming and Past Events</a><li>
<li><a href="">i dont know</a></li>
</u1>
</div>
</div>
</nav>
<p> Products </p>
</table>
</body>
如果您将显示 css 选择器添加到 "li" 元素,它会起到作用
将以下内容添加到您的 css。
li{
display:inline-block;
}
这会将元素移动到彼此旁边,您可以从那里进一步设置样式。祝你好运
看起来你的人正在使用 bootstrap 类。如果是这样,只需下载并包含 boostrap.css.
我正在尝试让导航栏显示在网页顶部,在干净的框内放置水平按钮。与 http://www.apple.com/ 中的导航栏非常相似。我觉得好像我应该知道该怎么做,但显然我不知道。非常感谢任何帮助,甚至是要点和提示。谢谢,下面是我到目前为止的代码。 Css 先显示,然后是我的 HTML。
body{
border: solid;
background-color: white;
color: black;
text-align: center;
}
table.slideshow{
}
th.slideshowtitle{
text-align: center;
}
footer{
border-top: solid 10px;
}
/*nav bar*/
.navbar-inverse {
background-color:black;
}
<!DOCTYPE html>
<html>
<head>
<link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" />
<title>
Hall Of Framers
</title>
</head>
<body>
<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<u1 class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="C:\Users\Chester Szydlowski\Desktop\HOF\public_html\EmailList.html">Email List</a></li>
<li><a href="">Custom Frames</a></li>
<li><a href="">News</a></li>
<li><a href="">Silent Auction</a></li>
<li><a href="">Upcoming and Past Events</a><li>
<li><a href="">i dont know</a></li>
</u1>
</div>
</div>
</nav>
<p> Products </p>
</table>
</body>
如果您将显示 css 选择器添加到 "li" 元素,它会起到作用
将以下内容添加到您的 css。
li{
display:inline-block;
}
这会将元素移动到彼此旁边,您可以从那里进一步设置样式。祝你好运
看起来你的人正在使用 bootstrap 类。如果是这样,只需下载并包含 boostrap.css.