置顶：老师我是还在上学啊但是我找不到在博客里怎末回复您！！！
总结：写作业过程中出现以下问题：
1.刚开始设置第一个div高度为100vh 后来发现不对 修改为body
2.颜色记不住 这次用了 blue purple cyan seagreen
3.发光设置 box-shadow:0 0 5px #888; 没有记住；
4.设制过程中input 账号密码框长度不一样 看过老师代码才想起来flex:1
5.button 中字间距 letter-spacing:15px;没记住
6.没有重新设置input button 边框 看起来比较丑
7.定位忘记 了需要复习
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机端通用布局</title>
<style>
body{
margin:0px;
height: 100vh;
display: flex;
}
div{
display: flex;
flex-direction: column;
flex:1 1 auto;
}
div > header{
height: 10vh;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
}
div>main{
height: 100vh;
/*width: 80vw;*/
display: flex;
flex: 1 1 auto;
flex-flow: row nowrap;
background: linear-gradient(to top, lightcyan, white, lightcyan);
}
div>main>div:nth-child(2){
background-image: linear-gradient(to top right,blue,cyan,purple)
}
div>main>div:nth-child(3){
background-image: linear-gradient(to top right,blue,cyan,purple)
}
div>footer{
height: 10vh;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
div > footer > a{
text-decoration: none;
color: black;
font-size: 25px;
display: flex;
flex: 1 1 auto;
justify-content: center;
align-items: center;
border-right: 1px solid white;
}
div > footer > a:last-child{
border-right: none;
}
.id1 > div:first-child{
flex:1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.id1 > div:nth-child(2){
order: -1;
width: 200px;
background-color: lightgreen;
flex: 0 0 auto;
}
.id1 > div:last-child{
flex: 0 0 auto;
order: 1;
width: 200px;
background-color: yellow;
}
.id1 > div:first-child >form{
display: flex;
flex-direction: column;
padding: 20px;
background: linear-gradient(to right bottom, lightblue, white);
border-radius: 10px 10px 10px 10px;
position: relative;
bottom:60px;
}
.id2{
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.id3{
display: flex;
flex-direction: row;
margin-top: 10px;
margin-bottom: 10px;
}
.id1 > div >h3{
display: flex;
justify-content: center;
align-items: center;
font-weight: lighter;
position: relative;
bottom:50px;
}
.id1 > div > form>button{
border-radius: 8px;
border: 1px solid #888;
background-color: lightseagreen;
letter-spacing: 7px;
height: 24px;
}
.id3 > input{
flex:1 1 auto;
border-radius: 5px 5px 5px 5px;
padding-left: 6px;
margin-left: 10px;
border: 1px solid #888;
}
.id2 > input{
flex:1 1 auto;
border-radius: 5px 5px 5px 5px;
padding-left: 6px;
margin-left: 10px;
border: 1px solid #888;
}
.id1 > div > form>button:hover{
background-color: lightcoral;
color: white;
}
.id1 > div > form:hover,form:focus{
box-shadow: 0 0 5px #888;
background-image: linear-gradient(to left top, lightcyan, white)
}
</style>
</head>
<body>
<div>
<header>PHP中文网</header>
<main class="id1">
<div>
<form action="">
<div class="id2">
<label for="">账号:</label>
<input type="text" placeholder="xxx@email.com">
</div>
<div class="id3">
<label for="">密码:</label>
<input type="password" placeholder="请输入密码">
</div>
<button>提交</button>
</form>
</div>
<div>左边框</div>
<div>右边框</div>
</main>
<footer>
<a href="">官网首页</a>
<a href="">教学视频</a>
<a href="">工具手册</a>
</footer>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
选做没时间做了：等等看有时间再做