flex布局是css3中的新布局模式,本文是一个基于flex布局的小案例。
案例图片
实现效果
实现代码
index.css
body {
margin: 0 auto;
padding: 0;
max-width: 540px;
min-width: 320px;
}
/* 搜索模块 */
.search-index {
display: flex;
height: 44px;
background-color: aqua;
}
.search {
flex: 1;
border: 1px solid black;
}
.user {
width: 44px;
border: 1px solid black;
}
/* 焦点图模块 */
.focus {
height: 120px;
background-color: antiquewhite;
}
/* 局部导航 */
.local-nav {
display: flex;
height: 64px;
background-color: blueviolet;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.local-nav li {
flex: 1;
border: 1px solid black;
}
/* 主导航栏 */
.nav-common {
display: flex;
height: 88px;
background-color: brown;
border: 1px solid black;
}
.nav-items {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid white;
}
.nav-items span {
flex: 1;
border: 1px solid yellow;
}
index.html
<body>
<!-- 搜索模块 -->
<div class="search-index">
<div class="search"></div>
<a href="#" class="user"></a>
</div>
<!-- 焦点图模块 -->
<div class="focus">
<img src="" alt="">
</div>
<!-- 局部导航 -->
<ul class="local-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 主导航栏 -->
<nav>
<div class="nav-common">
<div class="nav-items">
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
<div class="nav-items">
<span></span>
<span></span>
</div>
</div>
</nav>
</body>