频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
[Web前端技术教学]网页布局-基础布局练习-带框的界面铺满整个浏览器
2016-12-09 09:39:36         来源:温格码的博客  
收藏   我要投稿

练习目标:

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

代码如下:

<!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>

效果图:

\
点击复制链接 与好友分享!回本站首页
上一篇:pamo前端实习
下一篇:1208css学习笔记
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站