微信页脚制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
head{
display:block; /* 显示为块 */
height: 40px;
outline: solid 3px #ddd;
}
body {
height: 100vh;
display: flex; /* 定义为弹性盒子,元素默认水平排列 */
flex-direction: column; /* 上下排列 */
/* flex-direction: row; 默认排列 */
/* flex-direction: column-reverse 下上排列*/
/* flex-wrap: wrap-reverse; 盒子放不下时自动换行或者换列/(反向换行,换列) */
/* flex-flow: row wrap-reverse; 排列方式和换行同时设置 */
}
main {
background: #ddd;
flex: 1;
}
footer {
background:linear-gradient(to top,#f3f3f3,#ccc,#f3f3f3);/* 向上渐变 */
display: flex; /* 定义为弹性盒子,元素默认水平排列 */
height: 50px;
justify-content: space-evenly; /* 居中排列 */
}
footer div{
flex: 1;
text-align: center;
line-height: 3em; /* 3倍行高 */
color: #555;
}
footer div:nth-child(n+2){
border-left: solid 1px #ccc;
}
</style>
</head>
<body>111
<!-- 使用弹性盒模型布局微信界面 -->
<main>111</main>
<footer> <!-- 页脚 -->
<div>微信</div>
<div>通讯录</div>
<div>发现</div>
<div>我</div>
</footer>
</body>
</html>