共计 1087 个字符，预计需要花费 3 分钟才能阅读完成。
一个满屏 < 品 > 字布局 如何设计?
第一种方式：采用 float 的方式. 上面的 div 宽 100%，下面的两个 div 分别宽 50%
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<head>
<title> 满屏品字布局 </title>
<style type=”text/css”>
.ping-top{
width: 100%;
height: 500px;
background-color: red;
}
.ping-left{
width: 50%;
height: 500px;
background-color:green;
float: left;
}
.ping-right{
width: 50%;
height: 500px;
float: left;
background-color:yellow;
}
</style>
</head>
<body>
<div class=”ping-top d1″> 上 </div>
<div class=”ping-left d2″> 左 </div>
<div class=”ping-right d3″> 右 </div>
</body>
</html>
第二种方式：display:inline-block
<!DOCTYPE html>
<html>
<meta charset=”utf-8″>
<head>
<title> 满屏品字布局 </title>
<style type=”text/css”>
.d1, .d2, .d3{
height: 100px;
width: 100px;
background-color: yellow;
border: solid 1px #000000;
}
.d1{
height: 100px;
width: 100px;
background-color: #FF0000;
margin: 0 auto;
}
.d2{
display: inline-block;
margin-left: 50%;
}
.d3{
display: inline-block;
margin-right:-210px;
}
</style>
</head>
<body>
<div class=”ping-top d1″> 上 </div>
<div class=”ping-left d2″> 左 </div>
<div class=”ping-right d3″> 右 </div>
</body>
</html>
用纯 CSS 创建一个三角形的原理是什么？
#demo{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}
