一个满屏<品>字布局 如何设计?第一种方式：采用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;}