您的位置：首页 > Web前端 > CSS

CSS3 弹性盒子布局

2015-03-25 13:24 447 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>盒子布局</title>
<style>
* { margin:0;padding:0;}
header { width:100%;height:45px;background:rgba(242,24,97,.95);display:-webkit-box;display:-moz-box;}
header .logo { width:110px;height:45px;background-color:orange;}
header .logo h1 { width:75px;height:23px;margin:0 auto }
header .but { width:110px;height:45px;background-color:orange;}
header nav {-webkit-box-flex:1;-moz-box-flex:1 }
header nav ul { display:-moz-box ; display:-webkit-box; list-style:none;width:100%}
header nav ul li {-moz-box-flex:1;-webkit-box-flex:1; line-height:45px;text-align:center; }
header nav ul li  a{ text-decoration:none;color:white}
</style>
</head>
<body>
<header>
<div class="logo">
<h1>logo</h1>
</div>
<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</nav>
<div class="but">菜单</div>
</header>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html html5 flex css3 布局

相关文章推荐

新的分享

章节导航