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.
|
|
|
|
|
<!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>
|
