移動(dòng)端布局通常會(huì)制作頭部的導(dǎo)航和底部的菜單唉匾，如果使用flex布局會(huì)非常簡單孕讳，這里簡單做個(gè)記錄。
/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;
/*設(shè)置這個(gè)文字上下居中*/
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>
頭部導(dǎo)航也可以這樣設(shè)置巍膘，只需把.container中的bottom改成top即可厂财，或則直接刪除position: fixed和后面幾個(gè)樣式即可。
