移动端布局通常会制作头部的导航和底部的菜单，如果使用flex布局会非常简单，这里简单做个记录。
/css/base.css
body {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
background-color: lightcyan;
height: 40px;
/*居于底部显示*/
position: fixed;
left: 0px;
right: 0px;
/*top: 0px;*/
bottom: 0px;
}
.container .item {
flex: 1;
text-align: center;
/*设置这个文字上下居中*/
line-height: 40px;
}
.container .item .txt:hover {
border-top: 3px solid cadetblue;
padding: 5px 10px;
}
/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
</head>
<body>
<div class="container">
<div class="item"><span class="txt">首页 </span></div>
<div class="item"><span class="txt">新闻</span></div>
<div class="item"><span class="txt">讨论</span></div>
</div>
</body>
</html>
头部导航也可以这样设置，只需把.container中的bottom改成top即可，或则直接删除position: fixed和后面几个样式即可。
网友评论