设计一个登录表单要求 宽度300像素,外边距默认0 和浏览器计算外边距 用户名和密码输入框宽度为100像素;内边距设置为5像素;下外边距设置为10像素 提交按钮背景颜色为灰色 字体颜色为白色 内边距设置为:上内边距和下内边距是10px,左右内边距是20px 设置边框为:lpx soild black 鼠标移动到按钮上后,按钮颜色变成红色
时间: 2024-03-15 20:44:39 浏览: 14
好的,以下是一个简单的HTML和CSS代码实现上述要求:
```html
<form style="width: 300px; margin: 0 auto;">
<label for="username">用户名:</label>
<input type="text" id="username" style="width: 100px; padding: 5px; margin-bottom: 10px;"><br>
<label for="password">密码:</label>
<input type="password" id="password" style="width: 100px; padding: 5px; margin-bottom: 10px;"><br>
<button type="submit" style="background-color: gray; color: white; padding: 10px 20px; border: 1px solid black;">登录</button>
</form>
<style>
button:hover {
background-color: red;
}
</style>
```
这个代码使用了内联样式(inline style)和内部样式表(internal style sheet)来定义表单和按钮的样式。在HTML中,我们使用`<form>`元素来定义表单,而`<label>`和`<input>`元素用来添加输入框和标签。在CSS中,我们使用`style`属性来添加内联样式,或者使用`<style>`元素来添加内部样式表。我们使用`hover`伪类来定义当鼠标悬停在按钮上时的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)