gpt4 book ai didi

html - 将简单的菜单插入到 css 中以用作网页标题

转载 作者:太空宇宙 更新时间:2023-11-04 13:40:03 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com