<!DOCTYPE html> <html> <head> <title>登陆页面</title> <style> body{ background-color: #FF4F4; } .login{ margin: 100px auto; border: 1px solid #ccc; width: 400px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px #ccc; } input[type=text], input[type=password]{ width: 100%; padding: 10px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px; } button[type=submit]{ background-color: #4CAF50; color: white; padding: 10px 18px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button[type=submit]:hover{ background-color: #45a049; } .error{ color: red; } </style> </head> <body> <div class="login"> <h2>登陆页面</h2> <form action="process.php" method="POST"> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码"> <button type="submit">登陆</button> <a href="register.php">还没有账号?点此处注册</a> <?php if(isset($_GET['error'])){ if($_GET['error'] == 'empty'){ echo "<p class='error'>请输入所有字段!</p>"; } elseif ($_GET['error'] == 'wrong') { echo "<p class='error'>请输入正确的用户名和密码!</p>"; } } ?> </form> </div> </body> </html>
时间: 2023-06-07 12:09:00 浏览: 160
白色; } </style> </head> <body> <form action="login.php" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <br> <label for="password">密码:</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="登陆"> </form> </body> </html>
以上是一个简单的登陆页面的HTML代码,使用了form表单元素,其中包括用户名和密码的输入框以及提交按钮。通过这个表单,可以将用户输入的用户名和密码信息传递给login.php文件进行验证和处理。页面的背景颜色为白色。
相关问题
<!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>` 元素将会应用上指定的背景颜色。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例网页</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: #333; } p { font-size: 16px; line-height: 1.5; color: #666; } button { padding: 10px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style></head><body> <!-- HTML内容 --> <h1>Welcome to my page</h1> <p>This is an example web page.</p> <button id="myButton">Click me</button> <!-- JavaScript代码 --> <script> var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Hello, world!"); }); </script></body></html>解释一下这代码
好的,下面是代码的详细解释:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例网页</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
color: #666;
}
button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- HTML内容 -->
<h1>Welcome to my page</h1>
<p>This is an example web page.</p>
<button id="myButton">Click me</button>
<!-- JavaScript代码 -->
<script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Hello, world!");
});
</script>
</body>
</html>
```
这是一个完整的 HTML 页面,包括头部(`<head>`)和主体(`<body>`)两部分。下面是具体解释:
- `<!DOCTYPE html>`:声明文档类型为 HTML5。
- `<html>`:HTML 页面的根元素。
- `<head>`:头部元素,包含了页面的元信息,如标题、样式表、脚本等。
- `<meta charset="utf-8">`:指定页面使用 UTF-8 编码。
- `<title>示例网页</title>`:页面的标题,显示在浏览器标签页上。
- `<style>`:样式表元素,用于定义页面的样式。
- `body`、`h1`、`p`、`button`:CSS 选择器,用于选中对应的 HTML 元素,并为其定义样式。
- `<!-- HTML内容 -->`:注释,不会被浏览器解析。
- `<h1>`、`<p>`、`<button>`:HTML 元素,用于显示页面内容。
- `id="myButton"`:HTML 属性,为按钮元素指定一个唯一的标识符。
- `<script>`:脚本元素,用于编写 JavaScript 代码。
- `var button = document.getElementById("myButton");`:JavaScript 变量定义,用于获取按钮元素。
- `button.addEventListener("click", function() { alert("Hello, world!"); });`:给按钮元素添加一个点击事件监听器,当按钮被点击时,弹出一个提示框。
阅读全文