效果图
思路
- 编写html
- 使用form
- 区分层次
- 编写css
- 居中
- 所有input 格式
- 按钮格式
- vertical-align对齐
html
参差结构
如图颜色框说明它们有共同的样式
绿色框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<form action="" class="container">
<h1>用户注册</h1>
<div class="form-item">
<input class="txt" type="text" name="tel" maxlength="11" placeholder="请输入11位手机号" />
</div>
<div class="form-item clearfix captcha">
<input class="txt left" type="text" placeholder="填写验证码" />
<button class="right" type="button" disabled>发送验证码</button>
</div>
<div class="form-item">
<input class="txt" type="password" name="password" id="" placeholder="请输入密码" />
</div>
<div class="form-item">
<input class="txt" type="password" name="password" id="" placeholder="请再次确认密码" />
</div>
<div class="form-item">
<select class="txt" name="" multiple id="">
<!-- 布尔属性 属性和值相同, 有就true -->
<option value="">爱好1</option>
<option value="">爱好2</option>
<option value="">爱好3</option>
<option value="">爱好4</option>
<option value="">爱好5</option>
<option value="">爱好6</option>
<option value="">爱好7</option>
<option value="">爱好8</option>
<option value="">爱好9</option>
<option value="">爱好10</option>
</select>
</div>
<div class="form-item clearfix">
<div class="title left">性别</div>
<div class="left">
<!-- 使用label包围比用for好 -->
<label>
<input type="radio" value="male" name="gender" checked />
<span>男</span>
</label>
<label>
<input type="radio" value="female" name="gender" />
<span>女</span>
</label>
</div>
</div>
<div class="form-item">
<textarea class="txt" name="" placeholder="请输入个人简介" id="" cols="30" rows="10"></textarea>
</div>
<div class="form-item policy">
<label>
<input type="checkbox" name="" id="">
<span >同意用户手册</span>
</label>
</div>
<div class="form-item clearfix">
<button disabled class="left">注册</button>
<button type="reset" class="right">重置</button>
</div>
</form>
</body>
</html>
css样式
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
background-color: grey;
color: #333;
}
.container{
background-color:#fff;
width: 400px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
padding: 1em 2em;
}
.container h1{
text-align: center;
margin-bottom: 32px;
}
.form-item{
margin-bottom: 16px;
/*每一项编剧*/
}
/* 每个input元素的公共样式 */
.txt{
outline:none;
border: 1px solid grey;
height: 40px;
width: 100%;
border-radius: 5px;
font-size: 14px;
padding: 0 10px;
border-color: blue;
}
select.txt{
height: 100px;
padding: 10px ;
}
select option{
margin-bottom: 1em;
line-height: 2;
}
textarea.txt{
height: 100px;
padding: 10px;
resize: none;
/*不可以调节testarea大小*/
}
button{
height: 40px;
width: 150px;
border-radius: 5px;
border: none;
outline: none;
color: #fff;
font-size: 14px;
background-color:#1781ea;
}
button:hover{
background-color:#10559a;
}
button:disabled{
background-color: #cfd1ff;
/*按钮禁用样式*/
}
/*清除浮动*/
.clearfix::after{
content:"";
display: block;
clear:both;
}
.right{
float: right;
}
.left{
float: left;
}
.captcha .txt{
width: 180px;
}
.title{
margin-right: 10px;
}
.policy{
font-size: 12px;
}
.policy span{
vertical-align: 3px;
/* 相邻元素都是行盒元素,水平对不齐 */
}
label{
cursor: pointer;
}
label span{
color: #ccc;
}
label input:checked~span{
color: #000;
}
.txt::placeholder{
color: #8a8a8a;
}
.txt:focus:placeholder{
color: #ffffff;
}
