满屏的一个品字布局设计
Posted 暑假过期le
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了满屏的一个品字布局设计相关的知识，希望对你有一定的参考价值。
品字布局设计
一，思路及注意点
1.写三个块元素 设置宽高 及颜色
2.注意html，body默认宽度和高度为0px，设置宽和高分别为为100%
实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
margin: 0 auto;
padding: 0;
html,body
width: 100%;
height: 100%;
.top
width: 50%;
height: 50%;
background-color: yellowgreen;
.left
float: left;
background-color: red;
width: 50%;
height: 50%;
.right
float: right;
background-color: yellow;
width: 50%;
height: 50%;
</style>
</head>
<body>
<div class="top">1</div>
<div class="left">2</div>
<div class="right">3</div>
</body>
</html>
以上是关于满屏的一个品字布局设计的主要内容，如果未能解决你的问题，请参考以下文章
别再写满屏的爆爆爆炸类了，试试装饰器模式，这才是优雅的方式！！
别再写满屏的爆爆爆炸类了，试试装饰器模式，这才是优雅的方式！！