黑马程序员技术交流社区
标题:
弹性盒模型实例
[打印本页]
作者:
南国之南
时间:
2016-7-15 18:21
标题:
弹性盒模型实例
弹性盒模型实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-seale=1">
<title>模板页</title>
<style>
.menu{
list-style-type: none;
margin: 0px;
padding: 0px;
display: flex;
flex-flow:row wrap;
}
.menu li{
height:40px;
text-align: center;
line-height: 40px;
flex: 1 1 100%;
}
.menu li:nth-child(1){background-color: #39ADD1;}
.menu li:nth-child(2){background-color: #30CEAB;}
.menu li:nth-child(3){background-color: #56467D;}
.menu li:nth-child(4){background-color: #E15258;}
.menu li:nth-child(5){background-color: #CC6699;}
.menu li:nth-child(6){background-color: #52AC43;}
.menu li a{color:#fff;text-decoration: none;}
@media (min-width: 480px){
.menu li{
flex:1 1 50%;
}
}
@media (min-width: 768px){
.menu{
flex-flow: row nowrap;
}
}
</style>
</head>
<body >
<div>
<ul class="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaSrcipt</a></li>
<li><a href="#">Sacc</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Mongo</a></li>
</ul>
</div>
</body>
</html>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2