css3 flex布局仿微信布局
标签：
css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
background: #f3f3f3;
flex-direction: column;
}
footer {
background: #ddd;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: solid 1px #ccc;
}
footer section {
flex: 1;
border-right: solid 1px #bbb;
display: flex;
flex-direction: column-reverse;
}
footer section:last-child {
border-right: none;
}
footer section h4 {
flex: 0 0 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
cursor: pointer;
}
footer section ul {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
margin-bottom: 5px;
justify-content: center;
text-align: center;
border-radius: 5px;
margin: 5px;
}
footer section ul li {
flex: 1 0 50px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: solid 1px #ccc;
cursor: pointer;
}
footer section ul li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<main>
</main>
<footer>
<section>
<h4>教程</h4>
<ul>
<li>PHP</li>
<li>css</li>
</ul>
</section>
<section>
<h4>直播</h4>
</section>
<section>
<h4>软件</h4>
</section>
</footer>
</body>
</html>
