html5-伸缩菜单案例
2019-08-27 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin:100px auto;
}
div > ul{
list-style: none;
width: 100%;
/*将父容器设置了伸缩盒子，子元素默认成为伸缩项 float margin*/
display: flex;
}
div > ul > li{
/*宽度
1.我们并不知道li的具体的数量
2.也不直接设置%*/
height: 36px;
line-height: 36px;
text-align: center;
background-color: #9fff9d;
border-right: 1px solid #ccc;
flex: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li>首页</li>
<li>商品分类</li>
<li>我的订单</li>
<li>最新商品</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>
