一、style1.css样式：
实例
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
background-color: #555;
color: white;
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
header, footer{
box-sizing: border-box;
background-color: #ede;
height: 50px;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
main{
box-sizing: border-box;
flex: 1;
background-color: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
footer > a{
border-right: 1px solid white;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
footer > a:last-of-type{
border-right: none;
}二、Style2.css样式：
实例
* {
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
header,footer{
box-sizing: border-box;
height: 50px;
background-color: lightskyblue;
}
main{
box-sizing: border-box;
display: flex;
flex: 1;
}
main > article{
box-sizing: border-box;
flex: 1;
background-color: lightcoral;
display: flex;
flex-flow: row wrap;
}
main > aside{
box-sizing: border-box;
width: 50px;
background-color: lightgrey;
}
main > aside:first-of-type{
order: -1;
background-color: lightgreen;
}
header{
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
header > a{
text-decoration: none;
background-color: #444444;
color: white;
border-right: 1px solid white;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
header > a:last-of-type{
border-right: none;
}
article > section{
flex: 1;
}三、Style3.css样式：
实例
*{
margin: 0;
padding: 0;
/*outline: 1px dashed;*/
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-weight: lighter;
color: #444444;
background:linear-gradient(to top,lightcyan, white, lightcyan);
}
.container{
box-sizing: border-box;
width: 300px;
padding: 20px;
position: relative;
top:-60px;
}
.container > h3{
text-align: center;
font-weight: lighter;
margin-bottom: 15px;
}
.container > form{
border: 1px solid gray;
padding: 15px;
border-radius: 10px;
background: linear-gradient(to right bottom,lightblue, white);
display: flex;
flex-flow: column nowrap;
}
.container > form > div{
margin: 5px 0;
display: flex;
}
.container > form >div > input{
flex: 1;
padding-left: 5px;
margin-left: 5px;
border-radius: 5px;
}
.container > form > div > button{
flex: 1;
height: 24px;
color: white;
letter-spacing: 15px;
border: none;
border-radius: 8px;
background-color: lightseagreen;
}
.container > form:hover{
background: linear-gradient(to left top,lightcyan,white);
box-shadow: 0 0 5px #888;
}
.container > form > div > button:hover{
background-color: lightcoral;
box-shadow: 0 0 5px #888;
}自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页...
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿网站后台首页</title> <link rel="stylesheet" href="./css/style4.css"> </head> <body> <header>个人主页展示</header> <main> <article> <form action=""> <h2>管理員登錄</h2> <div> <label for="username">用戶名：</label> <input type="text" id="username" placeholder="請輸入用戶名"> </div> <div> <label for="password">密碼：</label> <input type="text" id="password" placeholder="請輸入6位數密碼"> </div> <div> <input type="button" value="提交"> </div> </form> </article> <aside>左侧</aside> <aside>右侧</aside> </main> <footer> <a href="">網站首頁</a> <a href="">個人資料</a> <a href="">網站管理</a> <a href="">個人動態</a> </footer> </body> </html>
CSS代码：
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
main{
box-sizing: border-box;
flex: 1;
display: flex;
}
main > aside{
box-sizing: border-box;
width: 80px;
background-color: lightseagreen;
display: flex;
justify-content: center;
align-items: center;
}
main > article{
/*box-sizing: border-box;*/
flex: 1;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
main > aside:first-of-type{
order: -1;
}
main > article > form{
box-sizing: border-box;
border: 1px solid gray;
border-radius: 10px;
width: 300px;
padding: 15px;
background: linear-gradient(to right bottom,lightskyblue,white);
display: flex;
flex-flow: column nowrap;
position: relative;
top: -40px;
}
main > article > form:hover{
background: linear-gradient(to left top,lightseagreen,white);
box-shadow: 0 0 5px #888;
}
form > h2{
text-align: center;
font-weight: lighter;
margin-bottom: 20px;
letter-spacing: 10px;
}
form > div{
display: flex;
margin: 4px 0;
}
form > div > input{
flex: 1;
padding-left: 2px;
border-radius: 5px;
}
form > div:nth-of-type(2) > label{
letter-spacing: 5px;
}
form > div:last-of-type > input{
height: 24px;
color: white;
padding-left: 0;
border: none;
background-color: lightseagreen;
letter-spacing: 15px;
}
form > div:last-of-type > input:hover{
background-color: lightcoral;
box-shadow: 0 0 5px #888;
}
header, footer{
box-sizing: border-box;
height: 60px;
background-color: lightcoral;
display: flex;
justify-content: center;
align-items: center;
}
header{
letter-spacing: 5px;
}
body > footer > a{
flex: 1;
text-decoration: none;
color: white;
height: 50px;
/*text-align: center;*/
margin: 0 0;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid white;
}
body > footer > a:last-of-type{
border-right: none;
}
body > footer > a:hover,
body > footer > a:focus,
body > footer > a:active{
background-color: lightsteelblue;
color: lightslategray;
}手抄作业：
