You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

67 lines
2.1 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Example</title>
<link rel="stylesheet" href="../resource/public/resource/css/style.css">
<style>
/* Navigation 样式 */
.navbar {
background-color: #007bff;
padding: 10px 0; /* 添加上下内边距 */
overflow: hidden; /* 触发 BFC块级格式化上下文以防止浮动元素影响布局 */
}
.navbar ul {
list-style-type: none; /* 移除列表默认样式 */
margin: 0;
padding: 0;
overflow: hidden; /* 清除浮动 */
}
.navbar li {
float: left; /* 将列表项水平排列 */
}
.navbar li a {
display: block; /* 将链接显示为块级元素,使其充满父元素的宽度 */
color: #fff;
text-align: center;
padding: 14px 16px; /* 添加上下内边距,左右内边距 */
text-decoration: none;
}
.navbar li a:hover {
background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}
/* Footer 样式 */
.footer {
background-color: #ddd; /* 设置背景颜色为灰色 */
color: #333; /* 设置文字颜色 */
padding: 20px;
text-align: center;
position: fixed; /* 将 footer 固定在底部 */
width: 100%; /* 设置宽度为100% */
bottom: 0; /* 将 footer 置底 */
}
</style>
</head>
<body>
<!-- Include the navigation -->
{{ include "nav.html" .}}
<!-- Main content container -->
{{ include .mainTpl .}}
<!-- Include the footer -->
{{ include "footer.html" .}}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>