您现在的位置：首页 >> 前端 >> 内容

[Web前端技术教学]网页布局-基础布局练习-带框的界面铺满整个浏览器

时间：2016/12/9 9:39:36 点击：

　　核心提示：练习目标:带黑框的绿色界面铺满整个浏览器,并随着浏览器的伸缩而伸缩.代码如下:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN h...

练习目标:

带黑框的绿色界面铺满整个浏览器,并随着浏览器的伸缩而伸缩.

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="https://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>基础大布局</title>  
<style type="text/css">  
<!--  
html {  
    height:100%;  
}  
body {  
    margin: 0px;      
    height:100%;      
}  
#father{  
    background-color: #00FF00;  
    height:100%;  
    border-left: 10px solid #FF0000;  
    border-right: 10px solid #FF0000;         
    position: relative;  
}  
#text{  
    border-top: 10px solid #FF0000;  
    height:100%;  
}  
#bottomBorder {  
    height:10px;  
    background-color: #FF0000;  
    position: absolute;  
    width: 100%;  
    left: 0px;  
    bottom: 0px;  
}  
-->  
</style>  
</head>  
<body>  
<p id="father">  
    <p id="text"></p>  
    <p id="bottomBorder"></p>  
</p>  
</body>  
</html>