HTML 带有页眉,页脚和导航元素的HTML5文档

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML 带有页眉,页脚和导航元素的HTML5文档相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	
		<div id="wrapper">
		
			<header>
				
				<nav>
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</nav>
			
			</header>
		
			<footer>
			
			</footer>
		
		</div>
	
	</body>
</html>

带有 % extends 的每页上的 Django 页脚和页眉

【中文标题】带有 % extends 的每页上的 Django 页脚和页眉【英文标题】:Django Footer and header on each page with % extends 带有 % extends 的每页上的 Django 页脚和页眉 【发布时间】:2015-10-06 00:55:45 【问题描述】:

所以我试图在我网站的每个页面上添加页脚和页眉。我制作了一个包含网站总体布局的 base.html 文件。

在我的 about.html 页面中,我做了:

% extends "public/base.html" %

<h1>Content goes here</h1>

我可以看到我的页眉和页脚,但如何显示内容。我想在 about.html 页面中输入内容。此处的内容没有显示在中间。

【问题讨论】:

【参考方案1】:

你需要在 base.html 中定义一个块,并在 about.html 中填充它。

base.html:

<header>...</header>
% block content %% endblock %
<footer>...</footer>

关于.html

% extends "public/base.html" %

% block content %
<h1>Content goes here</h1>
% endblock %

这一切在教程中都有完整的解释。

【讨论】:

谢谢!我添加了块内容和结束块,它起作用了! 快速问题。那么如果我想用 css 编辑文本和布局怎么办,我会为那个页面制作一个单独的 css 文件,我将如何扩展它?同样的方式? 所以 CSS 被认为是一个静态文件,所以你可以使用:% load staticfiles %。更多信息:docs.djangoproject.com/en/1.8/howto/static-files 另外,如果正确,请将答案标记为正确。 我刚刚浏览了 7 部分教程,虽然解释了块内容方面,但没有使用 % extends "public/base.html" %。尽管如此,一个易于理解的答案非常感谢!【参考方案2】:
% extends "public/base.html" %
% block content %
<h1>Content goes here</h1>
% endblock %

或者简单地创建about.html 并将其包含在主 html 中您想要的位置。

例子:

    % extends "public/base.html" %
    % block content %
       "Your code"
    % include "core/about.html" %
    % endblock %

【讨论】:

我绝对更喜欢你的,因为它可以很容易地将非身份验证模式下的页脚与其他情况下的页眉区分开来【参考方案3】:

假设您的 base.html 如下所示:

<html>
    <body>
        <!-- header code -->
        % block content %
        % endblock %
        <!-- footer code -->
    </body>
<html>

然后在你的其他文件中你会这样做:

% extends "base.html" %
% block content %
    <!-- Content here -->
% endblock %

任何放置在模板(扩展文件)正文标签内的内容都会被子文件内容中的内容覆盖,但该标签之外的任何内容都会被扩展或复制到其中。

这里是the docs on the block tag

【讨论】:

块名应该是父模板和扩展模板中的大小写。在这种情况下,在另一个文件中,块应该以% block content % 开头,而不是% block body % 没错。已编辑。

以上是关于HTML 带有页眉,页脚和导航元素的HTML5文档的主要内容,如果未能解决你的问题,请参考以下文章

ruby 使用带有页眉,页脚和页码的Prawn Library创建PDF文档。

ruby 使用带有页眉,页脚和页码的Prawn Library创建PDF文档。

带有 % extends 的每页上的 Django 页脚和页眉

将 iFrame 设置为固定页脚和页眉之间的全高

在单个单元格中显示页眉页脚和单元格?

在 Google Web Toolkit (GWT) 中实现页眉、页脚和菜单栏