一个满屏 品字布局 如何设计 ？
方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>满屏品字布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;/*此设置非常关键，因为默认的 body，HTML 高度为 0，所以后面设置的 div 的高度无法用百分比显示*/
}
.header{
height:50%; /*此步结合 html,body 高度为 100%，解决元素相对窗口的定位问题*/
width: 50%;
background: #ccc;
margin:0 auto;
}
.main{
width: 100%;
height: 50%;
background: #ddd;
}
.main .left,.main .right{
float: left;/*采用 float 方式，对元素进行左右定位*/
width:50%;/*此步解决元素相对窗口的定位问题*/
height:100%;/*此步解决元素相对窗口的定位问题*/
background: yellow;
}
.main .right{
background: green;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>效果如下：
解压密码： detechn或detechn.com
免责声明
本站所有资源出自互联网收集整理，本站不参与制作，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站发布资源来源于互联网，可能存在水印或者引流等信息，请用户自行鉴别，做一个有主见和判断力的用户。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
