<!DOCTYPE
html>
<
html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>豆瓣列表页</title>
<!-- 引入 Bootstrap
样式 -->
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel=“stylesheet”>
<style>
/* 全局
样式 /
body {
margin: 0; / 移除
默认外边距 /
background-image: url(“/static/6.jpg”); / 设置背景图片 /
background-size: cover; / 背景图片自适应屏幕 */
}
/* 标题
样式 */
h1 {
color: rgb(35, 140, 205); /* 设置标题颜色 */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 添加文字阴影效果 */
}
/* 导航
链接样式 */
a {
color: white; /*
链接文字颜色 */
background-color: rgb(35, 140, 205); /*
链接背景颜色 */
text-decoration: none; /*
去除下划线 */
border-radius: 8px; /* 圆角效果 */
padding: 3px 10px; /* 内边距 */
margin: 0 5px; /* 外边距 */
}
/* 鼠标悬停时的
链接样式 */
a:hover {
background-color: rgb(20, 90, 150); /* 悬停时背景颜色加深 */
}
/* 表格
样式 */
table {
width: 90%; /* 表格宽度 */
margin: 20px auto 0; /* 表格外边距，顶部20px，水平居中 */
border-collapse: collapse; /* 合并表格边框 */
}
/* 表格单元格
样式 */
th, td {
border: 2px solid black; /* 单元格边框 */
text-align: center; /* 文本居中 */
padding: 8px; /* 内边距 */
}
/* 表头
样式 */
th {
background-color: rgb(35, 140, 205); /* 表头背景颜色 */
color: white; /* 表头文字颜色 */
font-size: 18px; /* 字体大小 */
}
/* 表格数据行
样式 */
td {
font-size: 16px; /* 字体大小 */
}
/* 搜索框
样式 */
form {
margin-bottom: 20px; /* 搜索框底部外边距 */
}
/* 自定义 input-group 的宽度和高度 */
.custom-input-group {
margin: 0 auto; /* 移除
默认外边距 */
width: 400px; /* 设置宽度 */
height: 50px; /* 设置高度 */
}
/* 确保内部的输入框和按钮也适应新的高度 */
.custom-input-group .form-control,
.custom-input-group .btn {
height: 100%; /* 内部元素的高度与父容器一致 */
}
input[type="text"] {
padding: 8px; /* 内边距 */
border-radius: 4px; /* 圆角效果 */
border: 1px solid #ccc; /* 边框
样式 */
width: 50%; /* 输入框宽度 */
}
/* 提交按钮
样式 */
input[type="submit"] {
padding: 8px 25px; /* 内边距 */
background-color: rgb(35, 140, 205); /* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
border: none; /*
去除边框 */
border-radius: 4px; /* 圆角效果 */
cursor: pointer; /* 鼠标悬停时显示手型 */
}
/* 提交按钮悬停
样式 */
input[type="submit"]:hover {
background-color: rgb(20, 90, 150); /* 悬停时背景颜色加深 */
}
</style>
</head>
<body>
<!-- 页面主体内容 -->
<div class=“container text-center py-5”>
<!-- 标题 -->
<h1 class=“display-4”>欢迎使用豆瓣网</h1>
<!-- 导航
链接 -->
<p>
<a href="/">首页</a>
<a href="/list">电影类型列表</a>
<a href="/add">添加电影类型</a>
<a href="/addMovie">添加电影</a>
<a href="/zhu" target="_blank">查看柱状图</a>
<a href="/bing" target="_blank">查看饼状图</a>
<a href="/zhe" target="_blank">查看折线图</a>
</p>
<!-- 搜索表单 -->
<form action="/sousuoSubmit" method="post">
<div class="input-group custom-input-group">
<input type="text" class="form-control" placeholder="请输入电影名称" name="a" required>
<button type="submit" class="btn btn-primary">搜索</button>
</div>
</form>
</div>
<!-- 数据表格 -->
<table>
<!-- 表头 -->
<tr>
<th>编号</th>
<th>名称</th>
<th>内容</th>
<th>创建日期</th>
<th>操作</th>
</tr>
<!-- 动态生成的数据行 -->
{% for i in info %}
<tr>
<td>{{i[0]}}</td>
<td>{{i[1]}}</td>
<td>{{i[2]}}</td>
<td>{{i[3]}}</td>
<td>
<a href="/update/{{i[0]}}">修改</a>
<a href="/delete/{{i[0]}}">删除</a>
<a href="/movielist/{{i[0]}}">查看</a>
</td>
</tr>
{% endfor %}
</table>
</body>
</
html>使得搜索框下的内容上下仅靠
本文介绍了一种常见需求的解决方案：如何通过CSS代码让网页中的a链接在被点击时保持原有颜色，避免颜色变化，适用于希望保持页面一致性的前端开发者。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
