我正在使用 CSS 创建一个带有页眉和页脚的简单网页。我希望我的网页标题(由 CSS 构建)包含一个简单的导航菜单:
------------------------------------------------------------
WebPage Header (Appears on every page)
Image Logo
Home | News | Event | Contact Us <-- How to do this is CSS to appear in all pages?
------------------------------------------------------------
Body Content
------------------------------------------------------------
WebPage Footer (Appears on every page)
------------------------------------------------------------
我已经在 CSS 中定义了页眉和页脚，如下所示。
hr {color:sienna;}
p {margin-left:20px;}
header
{
height: 192px;
background:#ffffff url("images/logo.jpg") no-repeat center top;
//How to add navigating buttons here?
}
footer
{
height: 192px;
}
我已经做了很多研究，但大多数在线教程使用不同的方法(例如:php)。 w3schools 也没有太深入。
最佳答案
首先: 如果没有 Javascript 或 PHP 或其他语言的帮助，您无法在每个页面中添加页脚或导航栏或其他内容。 HTML 和 CSS 是静态的，使用 CSS3，您可以为每个元素添加一种标签，而不是结构。
在 HTML 中使用 FRAMES* 的独特方法，但这是一种丑陋且陈旧的方法。 Docs here ，但实际上，如果不是为了作业，请不要使用框架。
但是，如果您在每个页面中复制并粘贴这样的代码:
<div id="top_menu">
<ul id="nav_bar">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="events.html">Contact us</a></li>
</ul>
</div>
您可以根据需要在 css 中设置此菜单的样式
#nav_bar li{
display: inline;
padding: 3px; //just a sample
}
#nav_bar a {
text-decoration: none;
}
框架示例:
<!DOCTYPE html>
<html>
<frameset rows="25%,*,25%">
<frame src="header.html">
<frame name="openhere" src="frame_b.htm">
<frame src="footer.htm">
</frameset>
</html>
所以在页面“header.html”中放置您的导航栏(添加链接 attribute: target="openhere")
*请记住，HTML5 不再支持标记 FRAME。所以...尽可能避免!
关于html - 将简单的菜单插入到 css 中以用作网页标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22759291/