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

最新推荐文章于 2022-11-23 20:38:07 发布

gCodeTop 格码拓普老师

最新推荐文章于 2022-11-23 20:38:07 发布

阅读量1.4k

点赞数

分类专栏： Html/CSS等前端技术文章标签： web 教学技术网页设计前端技术

本文链接：https://blog.csdn.net/vinglemar/article/details/53525157

版权

Html/CSS等前端技术专栏收录该内容

61 篇文章 0 订阅

订阅专栏

练习目标:

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

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>
<div id="father">
    <div id="text"></div>
    <div id="bottomBorder"></div>
</div>
</body>
</html>