CSS3基础教程(十九)
flex布局综合案例
使用flex布局实现一个用户注册表单效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1{
text-align: center;
}
.form_container{
width: 40%;
margin: 0px auto;
background: #EEE;
border: 1px solid #BBB;
border-radius: 10px;
padding: 10px;
}
.form_row{
display: flex;
justify-content: center;
padding: 5px;
}
.form_title{
width:30%;
text-align: right;
}
.form_controller{
width:70%;
text-align: left;
}
.form_controller input{
width: 60%;
}
.form_controller .gender{
width: 20px;
}
.form_submit{
width: 40%;
}
.form_submit input{
width: 100%;
display: block;
background: lightblue;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<hr>
<div class="form_container">
<div class="form_row">
<div class="form_title">用户名：</div>
<div class="form_controller"><input type="text" name="username" value=""/></div>
</div>
<div class="form_row">
<div class="form_title">密码：</div>
<div class="form_controller"><input type="password" name="password" value=""/></div>
</div>
<div class="form_row">
<div class="form_title">确认密码：</div>
<div class="form_controller"><input type="password" name="confirmpass" value=""/></div>
</div>
<div class="form_row">
<div class="form_title">性别：</div>
<div class="form_controller"><input type="radio" class="gender" name="gender" value="男" checked/>男<input type="radio" class="gender" name="gender" value="女"/>女</div>
</div>
<div class="form_row">
<div class="form_title">出生日期：</div>
<div class="form_controller"><input type="date" name="birthday" value=""/></div>
</div>
<div class="form_row">
<div class="form_title">学历：</div>
<div class="form_controller">
<select name="edu">
<option value="" selected>----请选择----</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</div>
</div>
<div class="form_row">
<div class="form_title">兴趣：</div>
<div class="form_controller">
<input type="checkbox" name="favorites" class="gender" value="吃"/>吃
<input type="checkbox" name="favorites" class="gender" value="喝"/>喝
<input type="checkbox" name="favorites" class="gender" value="玩"/>玩
<input type="checkbox" name="favorites" class="gender" value="乐"/>乐
</div>
</div>
<div class="form_row">
<div class="form_title">自我介绍：</div>
<div class="form_controller">
<textarea name="introduce" rows="10" cols="40"></textarea>
</div>
</div>
<div class="form_row">
<div class="form_title"></div>
<div class="form_controller">
<input type="checkbox" name="isAccept" class="gender" value=""/>我无条件接受霸王条款
</div>
</div>
<div class="form_row">
<div class="form_submit"><input type="button" value="注册"/></div>
</div>
</div>
</body>
</html>
运行效果如下图：
