flex弹性盒布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="font-family/img/iconfont.css"/>
		<style type="text/css">
			.main{width: 1366px;height: 659px;margin: 30px auto;border: 1px solid red; display: flex;flex-direction: column;}
			/*.main header:first-child{height: 80px;background: #ffa500;display: flex;justify-content: space-between;}*/
			
			.main section:nth-of-type(1){flex:1;}
			.main footer:last-child{height: 80px;background: #ccc;display: flex;justify-content: space-around;}
			
			.main header{display: flex;justify-content:space-between ;background: #ffa500;height: 80px;}
			header div:first-child{font-size: 30px;}
			header div:nth-child(2){font-size: 40px;}
			header div:last-child{font-size: 50px;}
		</style>
	</head>
	<body>
		<section class="main">
			<header>
				<div class="iconfont icon-11qq"></div>
				<div class="iconfont icon-rentfillmtui"></div>
				<div class="iconfont icon-weixin"></div>
				<!--<img src="img/tubiao.jpg" />
				<img src="img/tubiao.jpg" />-->
			</header>
			<section></section>
			<footer>
				<img src="img/footer.jpg" />
				<img src="img/footer.jpg" />
				<img src="img/footer.jpg" />
				<img src="img/footer.jpg" />
			</footer>
		</section>
	</body>
</html>

发布了15 篇原创文章 · 获赞 1 · 访问量 226
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览