<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>3.6 flex布局--实例</title>
<link rel="stylesheet" href="css/iconfont.css">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #e2e2e2;
color: #595B66;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
}
li {
list-style: none;
}
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
/*min-height: 100vh;*/
min-height: 100%;
}
.header {
width: 100%;
height: 50px;
background-color: rgba(222, 24, 27, 0.9);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.main {
flex: 1;
color: #fff;
display: flex;
}
.main-content {
flex: 1;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
.main-sidebar {
order: -1;
width: 150px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
.tabbar-container {
width: 100%;
height: 50px;
background-color: #fff;
}
.tabbar {
display: flex;
height: 100%;
}
.tabbar-item {
flex: 1;
/*background-color: yellow;*/
}
.tabbar-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.tabbar-link .iconfont {
font-size: 24px;
}
.tabbar-item-active .tabbar-link {
color: #de181b;
}
</style>
</head>
<body>
<header class="header">header</header>
<div class="main">
<div class="main-content">content</div>
<div class="main-sidebar">sidebar</div>
</div>
<footer class="tabbar-container">
<ul class="tabbar">
<li class="tabbar-item tabbar-item-active">
<a href="###" class="tabbar-link">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-category"></i>
<span>分类页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-personal"></i>
<span>个人中心</span>
</a>
</li>
</ul>
</footer>
</body>
</html>
body {
padding: 20px;
margin: 0 auto;
background-color: #E2E2E2;
max-width: 1024px;
color: #595B66;
font-family: 'Microsoft Yahei', sans-serif;
}
h1,h2,h3,h4 {
color: #797979;
padding: 5px 0;
}
h1, h2 {
border-bottom: 2px solid #797979;
}
h1 {
text-align: center;
}
p {
font-size: 20px;
background: #797979;
padding: 10px;
border-radius: 5px;
color: white;
line-height: 2;
}
p a {
font-size: 20px;
color: white;
}
p a:hover {
color: red;
}
a {
color: #FFD200;
text-decoration: none;
}
.box {
background-color: white;
margin: 0 0 55px;
}
.box-tall {
height: 800px;
}
.box-item {
width: 200px;
height: 200px;
line-height: 200px;
vertical-align: middle;
margin: 5px;
background-color: #ffd200;
font-size: 100px;
color: white;
text-align: center;
}
.item-tall {
height: 400px;
line-height: 400px;
}