HTML5 网页栅格布局

栅格布局:也称为网格系统,运用固定的格子设计版面布局。

Demo

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>栅格布局</title>
		<style type="text/css">
			/*清空所有标签外边距和内边距。*/
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.grid{
				/*设置弹性布局容器*/
				display: flex;
				/*flex容器为单行*/
				flex-wrap: nowrap;
				/*主轴方式对齐,平均分布在行里*/
				justify-content: space-around;
			}
			.grid-cell-1,
			.grid-cell-2,
			.grid-cell-3,
			.grid-cell-4,
			.grid-cell-5,
			.grid-cell-6{
				/*弹性收缩比率*/
				flex-shrink: 1;
				padding: 10px;
			}
			.grid-cell-1{
				/*弹性扩展比率*/
				flex-grow: 1;
			}
			.grid-cell-2{
				/*弹性扩展比率*/
				flex-grow: 2;
			}
			.grid-cell-3{
				/*弹性扩展比率*/
				flex-grow: 3;
			}
			.grid-cell-4{
				/*弹性扩展比率*/
				flex-grow: 4;
			}
			.grid-cell-5{
				/*弹性扩展比率*/
				flex-grow: 5;
			}
			.grid-cell-6{
				/*弹性扩展比率*/
				flex-grow: 6;
			}
			/*粉红色背景*/
			.box-red{
				background-color: green;
				min-height: 50px;
				text-align: center;
				width: 100%;
				line-height: 50px;
			}
			/*绿色背景*/
			.box-green{
				background-color: pink;
				min-height: 50px;
				text-align: center;
				width: 100%;
				line-height: 50px;
			}
			
		</style>
	</head>
	<body>
		<header id="header" class="box-red">
			<div class="grid">
				<div class="grid-cell-1">
					<div class="box-green">
						游戏商城Logo
					</div>
				</div>
				<nav class="grid-cell-3">
					<div class="box-green">
						顶部导航栏
					</div>
				</nav>		
				<div class="grid-cell-1">
					<div class="box-green">
						顶部功能区
					</div>
				</div>	
			</div>
		</header>
		
		<section id="content" class="box-red">
			<div class="grid box-green">
				<div class="grid-cell-1">
					<div class="box-red">
						优惠
					</div>
				</div>
				
				<div class="grid-cell-1">
					<div class="box-red">
						优惠
					</div>
				</div>
				
				<div class="grid-cell-1">
					<div class="box-red">
						优惠
					</div>
				</div>
				
				<div class="grid-cell-1">
					<div class="box-red">
						优惠
					</div>
				</div>
			</div>
			<div class="box-green">
				<div class="grid">
					<nav class="grid-cell-1">
						<div class="box-red">
							游戏分类
						</div>
					</nav>		
				</div>
			</div>
			<div class="grid box-green">
				<div class="grid-cell-1">
					<div class="box-red">
						游戏列表
					</div>
				</div>
			</div>
		</section>
		<footer id="footer" class="grid box-red">
			<nav class="grid-cell-2">
				<div class="box-green">
					底部导航栏
				</div>
			</nav>
			<div class="grid-cell-1">
				<div class="box-green">
					底部网址
				</div>
			</div>
			
		</footer>
		
		
	</body>
</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页