Html页面框架1.0

最新推荐文章于 2024-04-05 14:19:04 发布

吃辣容易口渴

最新推荐文章于 2024-04-05 14:19:04 发布

阅读量370

点赞数

分类专栏： Html 文章标签： html css css3

本文链接：https://blog.csdn.net/hzsd_ygdcs/article/details/125946446

版权

Html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是两个（frameset/iframe）现在好像是已经不用的标签，就作为知识填充了

frameset 表示页面框架，这个标签已经淘汰，了解，不做掌握
frame 表示框架中具体页面引用
iframe 在一个页面嵌套一个子页面
 表示空格
html是解释型语言，不区分大小写

<html>
	<head>
		<title>两个淘汰的标签</title>
		<meta charset="UTF-8"/>
	</head>
	<!--<body>
		这里是04.html的界面显示
		<iframe src="zifenlan/top.html">
	</body>
	-->
	<frameset rows="20%,*" ><!--frameborder="no" 消除边框-->
		<frame src="zifenlan/top.html">
		<frameset cols="15%,*">
			<frame src="zifenlan/left.html">
			<frameset rows="50%,*">
				<frame src="zifenlan/top2.html">
				<frame src="zifenlan/botton.html">
			</frameset>
		</frameset>
	</frameset>
</html>

效果展示图：
在这里插入图片描述

对于div布局

对于创建的div布局，就相当于创建的一个规定大小的矩形区域，可以设置这一区域的边框宽度、大小、颜色，区域的背景颜色，也可以在div中嵌套div

<html>
	<head>
		<title>05</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#div1{
				width:400px;
				height:400px;
				background-color:"greenyellow";
				/*border边框样式*/
				/*边框粗细*/
				border-width:1px;
				/*边框风格/样式*/
				border-style:solid;/*solid(实线) ,dotted(点状线)...*/
				/*边框颜色*/
				border-color:blue;
				/*或者可以这样*/
				/*border:1px solid blue;*/
				/*也可以分别设置四个边框*/
				/*border-top/left/right/bottom:1px dotted blue;*/
				
	
			}
			#div2{
				width:200px;
				height:200px;
				background:"darkorange";
				margin:100px;
				/*
				margin-top:100px;
				margin-left:100px;
				*/
			}
		</style>
	</head>
	<body>
		<div id="div1">
		<div id="div2"></div>&nbsp;</div>
	</body>
</html>

这个效果展示如图：
在这里插入图片描述

对于div布局的进一步了解

例：（下面有每个部分的解析）

<html>
	<head>
		<title>05</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			body{
				margin:0;
				padding:0;
				background-color:#808080;
				}
			div{
				position:relative;
			}
			#div_top{
				height:15%;
				background-color:blue;
			}
			#div_left{
				width:20%;
				height:85%;
				background-color:sandybrown;
				float:left;
			}
			#div_main{
				width:80%;
				height:60%;
				float:left;
				background-color:pink;
			}
			#div_bottom{
				width:80%;
				height:25%;
				background-color:yellow;
				float:left;
			}
			#div-con{
				width:80%;
				height:100%;
				border:0px solid blue;
				margin-left:10%;
				float:left;
			}

		</style>
	</head>
	<body>
		<div id="div-con">
			<div id="div_top">div_top</div>
			<div id="div_left">div_left</div>
			<div id="div_main">div_main</div>
			<div id="div_bottom">div_bottom</div>
		</div>
	</body>
</html>

效果展示如图：
在这里插入图片描述
1、

	body{
		margin:0;
		padding:0;
		background-color:#808080;
	}

这个是设置我们创建的区域和网页的边缘处有无间隙，margin是间距，padding是填充，将这两个设置为0就可以使我们创建的区域边缘完全贴合网页的边缘
2、

div{
	position:relative;
}

这个使设置我们创建区域所在的位置，relative是相对位置，absolute是绝对位置。相对位置是需要我们找一个参照物的，这个具体情况需要我们具体分析；绝对位置是我们以网页的左上角的端点为原点，以横向的线为x轴，以竖向的线为y轴，此时的位置
3、

#div_top{
		height:15%;
		background-color:blue;
	}
#div_left{
		width:20%;
		height:85%;
		background-color:sandybrown;
		float:left;
	}

设置的id属性，如果不设置width（宽度）就默认为全部，在这里面我们设置的position为relative所以我们设置的这个80%、20%等等都是相对于我们这个块级区域的父区域整体的80%、20%。
float表示浮动， float：left代表我们将这个块级区域仅靠左边，那么如果他的右边还有区域，就可以存放另一块我们申请的块级区域，right就是靠右，作用也是类似。如果我们不设置这个浮动，那么这个块级区域就会占据整个行，不论这个块级区域的宽度大小。
background-Color这个就不用说了，就是背景颜色