請你幫我用CSS美化這個控件,用藍色 <div id=“submit” class="form-row"> <button type="submit">提交</button> </div>
时间: 2024-03-23 13:43:20 浏览: 16
好的,以下是使用 CSS 美化控件的代码:
```html
<div id="submit" class="form-row">
<button type="submit">提交</button>
</div>
```
```css
#submit button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
#submit button:hover {
background-color: navy;
}
```
这段 CSS 代码会将提交按钮的背景色设为蓝色,字体颜色设为白色,去除边框,添加圆角,设置字体大小为 16px,以及在鼠标悬停时将背景色改为深蓝色。您可以将这些代码添加到您的 CSS 文件中,或者将它们添加到页面的 `<style>` 标签中。
相关问题
用BOOTSTRAP样式布一个HTML登录页面,所有label用中文。 控件有:LOGO图片-大小30x30,用户名,密码,记住我,控件的label与控件一行显示。
可以使用下面的HTML代码以BOOTSTRAP样式布局一个HTML登录页面,其中所有label都是中文的:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmLyE+8WyJ0OTaWluczka5TOlQ5XirkVThNE" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<img src="logo.png" width="30" height="30" alt="LOGO">
登录页面
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember_me">记住我
</label>
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
其中,LOGO图片大小为30x30,用户名和密码都是文本输入框,记住我使用了checkbox控件,控件的label与控件都在同一行显示,整个页面都使用了BOOTSTRAP的样式。
用BOOTSTRAP样式布一个HTML登录页面,所有label用中文。 控件有:LOGO图片,用户名,密码,记住我,控件的label与控件一行显示。
以下是使用Bootstrap样式布局一个HTML登录页面,所有label都是中文的代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<img src="logo.png" alt="LOGO">
<h3 class="panel-title">用户登录</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
```
这个HTML页面使用了Bootstrap的样式来布局,并且所有的label都是中文的。控件包括LOGO图片、用户名和密码输入框以及记住我复选框,它们的label都和控件在同一行。最后有一个登录按钮,点击它可以提交表单。