html head meta charset=UTF-8 titletitle style
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container1{
align-items: flex-start;
/*justify-content: flex-start;*/
}
.container2{
align-items: flex-end;
}
.container3{
align-items: center;
}
.container4{
align-items: stretch;
}
.container5{
align-items: baseline;
}
div[class^=item]{
background-color: #B2f2bb;
border: 4px solid #9ac190;
border-radius: 4px;
margin-right: 10px;
/*height: 20px;*/
text-align: center;
/*width: 100px;*/
}
div[class^=container]{
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: rosybrown;
border-radius: 20px 20px 20px 20px;
border: 4px solid #f4a5a5;
display: flex;
justify-content: center;
/*align-items: center;*/
}
.item1{
width: 100px;
}
.item2{
width: 50px;
}
.item3{
width: 100px;
}
</style>
</head>
<body>
<h1>flex-start</h1>
<div class="container1">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-end</h1>
<div class="container2">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container4">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container5">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
<div>
<h1>个人信息</h1>
</div>
<div>
<label>头像：<input type="file" name="pic"></label>
</div>
<div>
<label>个人说明：<textarea name="desc" rows="5" cols="50" maxlength="150" placeholder="不可超过 150 个字"></textarea></label>
</div>
<div>
<label>性别：</label>
<label><input type="radio" name="sex" value="man">男</label>
<label><input type="radio" name="sex" value="woman">女</label>
</div>
<div>
<label>爱好：</label>
<label><input type="checkbox" name="likes" value="sport">运动</label>
<label><input type="checkbox" name="likes" value="music">音乐</label>
<label><input type="checkbox" name="likes" value="game">游戏</label>
<label><input type="checkbox" name="likes" value="read">读书</label>
<label><input type="checkbox" name="likes" value="code">编程</label>
</div>
<div>
<label>邮箱：<input type="email" name="email"></label>
</div>
<div>
<label>电话号码：<input type="tel" name="tel"></label>
</div>
<div>
<input type="submit" value="提交" />
</div>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
</head>
<style>
.container1{
justify-content:start;
}
.container2{
justify-content:end;
}
.container3{
justify-content:center;
}
.container4{
justify-content:space-between;
}
.container5{
justify-content:space-around;
}
div[class^=item]{
background-color: #B2f2bb;
border: 4px solid #9ac190;
border-radius: 4px;
margin-right: 10px;
height: 20px;
/*width: 100px;*/
}
div[class^=container]{
margin: 0 auto;
width: 1000px;
height: 100px;
background-color: rosybrown;
border-radius: 20px 20px 20px 20px;
border: 4px solid #f4a5a5;
display: flex;
align-items: center;
}
.item1{
width: 100px;
}
.item2{
width: 50px;
}
.item3{
width: 100px;
}
</style>
<body>
<h1>flex-start</h1>
<div class="container1">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-end</h1>
<div class="container2">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container3">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container4">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
<h1>flex-</h1>
<div class="container5">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
弹性盒子，表单代码
浙公网安备 33010602011771号