请编写一个HTML和CSS代码,创建一个简单的登录表单。该表单应含用户名和密码字段,以及一个提交按钮。设计一个CSS样式,使表单具有美观的外观,且CSS文件需要通过外部样式在HTML代码中代入。 要求: 1表单: 宽度为300像素 外边框:默认为0,和浏览器计算外边距 2用户名和密码: 输入框宽度为100像素; 内边距设置为5像素; 下外边距设置为10像素; 3提交按钮 背景颜色为:灰色;字体颜色为白色; 内边距设置为:上内边和下内边距为10px,右内边距和左内边距为20px 设置边距为:1px solid black 鼠标移动到按钮上以后,按钮颜色变红色
时间: 2024-03-15 11:45:03 浏览: 15
以下是HTML和CSS代码,创建一个简单的登录表单:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
以下是CSS样式,使表单具有美观的外观,并通过外部样式在HTML代码中代入:
```css
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid black;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100px;
padding: 5px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: grey;
color: white;
padding: 10px 20px;
margin-top: 10px;
border: 1px solid black;
}
input[type="submit"]:hover {
background-color: red;
}
```