为下列html页面添加css样式表<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>民航系统登录</title> </head> <body> <h1 style="text-align:center;">欢迎登录民航系统</h1> <div style="display:flex; justify-content:center;"> <a href="add"><button type="button">增加</button></a> <a href="update"><button type="button">修改</button></a> <a href="delete"><button type="button">删除</button></a> <a href="query"><button type="button">查询</button></a> </div> </body> </html>
时间: 2023-07-19 15:11:21 浏览: 133
可以在<head>标签中添加<style>标签,然后在其中添加样式,如下所示:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>民航系统登录</title>
<style>
body {
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
font-size: 36px;
margin-top: 50px;
}
div {
display: flex;
justify-content: center;
margin-top: 50px;
flex-wrap: wrap; /* 允许换行 */
}
a {
text-decoration: none;
}
button {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-right: 20px;
margin-bottom: 20px; /* 添加按钮之间的间距 */
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>欢迎登录民航系统</h1>
<div>
<a href="add"><button type="button">增加</button></a>
<a href="update"><button type="button">修改</button></a>
<a href="delete"><button type="button">删除</button></a>
<a href="query"><button type="button">查询</button></a>
</div>
</body>
</html>
```
阅读全文