给这段代码找一个CSS样式。 <!DOCTYPE html> <html> <head> <title>用户登录</title> </head> <body> <h1>用户登录</h1> <form action="login.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label for="remember">记住我:</label> <input type="checkbox" id="remember" name="remember"><br><br> <input type="submit" value="登录"> </form> </body> </html>
时间: 2023-05-21 08:00:55 浏览: 109
可以使用以下CSS样式:
form {
width: 50%;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"],
input[type="checkbox"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
相关问题
<!DOCTYPE html> <html> <head> <title>Display YAML</title> <style>{{ css }}</style> </head> <body> <h1>YAML Data:</h1> <pre>{{ highlighted_data|safe }}</pre> </body> </html>
好的,我会在你的HTML代码中增加两个按钮:修改和保存,并且点击修改按钮时会弹出一个窗口。下面是修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Display YAML</title>
<style>{{ css }}</style>
<script>
function openDialog() {
// 弹出窗口的逻辑
alert("弹出窗口");
}
</script>
</head>
<body>
<h1>YAML Data:</h1>
<pre>{{ highlighted_data|safe }}</pre>
<button onclick="openDialog()">修改</button>
<button>保存</button>
</body>
</html>
```
在这个例子中,我添加了一个名为 `openDialog()` 的 JavaScript 函数,当点击 "修改" 按钮时,会弹出一个警告框作为示例。你可以在 `openDialog()` 函数中编写你自己的逻辑来显示弹出窗口。请注意,我添加的保存按钮还没有功能,你可以通过自己的代码来实现保存的逻辑。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> <ul>{ background-color: #DDA0DD; } </style> </head> <body <ul> <li>雄安白兔</li> <li>雄安白兔</li> <li>雄安白兔</li> <li>雄安白兔</li> </ul> </body> </html> 为什么ul背景颜色不生效
在你提供的代码中,CSS 语法有一些错误。正确的写法应该是将 `<ul>` 元素放在 HTML 中,然后在 `<style>` 标签中设置样式。同时,你可以使用类或 ID 来选择要应用样式的元素。下面是修正后的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
background-color: #DDA0DD;
}
</style>
</head>
<body>
<ul>
<li>雄安白兔</li>
<li>雄安白兔</li>
<li>雄安白兔</li>
<li>雄安白兔</li>
</ul>
</body>
</html>
```
请将 CSS 样式放置在 `<style>` 标签内,并确保 `<ul>` 元素位于 HTML 的正确位置。这样,你的 `<ul>` 元素将会应用上指定的背景颜色。