HTML网页制作（二）——框架初步

喵琉白

于 2024-09-16 16:01:37 发布

阅读量904

点赞数 14

分类专栏： HTML 文章标签： html css html5

本文链接：https://blog.csdn.net/hoke_c/article/details/140490682

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

喵做梦技术讨论群

QQ群号：566341887 （2024/5刚建的群，可能没什么人一开始，相信会越来越好哒。大家一起互帮互助，共同进步，交流分享，奔赴未来！）

保姆级教程，包教会的好吧，只要你有梦想有目标，肯努力，一起进步，绝对成功！

一.框架基础

1.创建框架

首先，我们要知道这个框架是啥，目的又是啥。

现在的目标是做一个网页出来，所以其实还不是很全，不过后面会慢慢补充的。

在html中，这个框架用到标签是<style></style>，在二者中间，即可创建框架。当然，创建框架也有它自己的格式，先讲一个最简单的。

<style>
    .xxx{
    }
</style>

这个里面的xxx就是自己定义名称啦，但是那个“.”不要忘掉哦。

注：这个是写在<head></head>当中的。

2.调用框架

调用方法非常简单，即在<body>中用<div class="xxx"></div>调用即可。

当然啦，在调用的一个框架里面，再调用一个框架也是可以的。

<html>
<head>
	<title>琉璃</title>
	<style>
		.miao{
		}
	</style>
</head>
<body>
    <div class="miao">喵喵喵</div>
</body>
</html>

调用之前，一定要先在<head> 中定义过，其次，调用时不用在名称前加上“.”。

调用方面的语句怎么写就行了，调用很简单，重点在<style>里面对框架的构建。

二.框架属性

额，其实框架定义出来，就已经是这么个框架了，接下来就是对框架属性的完善和补充。

1.基础属性

（1）长宽

如果没有长宽，那这个框架，就可以理解成一个点？就是枝棱不起来，因此，这里介绍两个属性定义用来设定框架的长与宽。

长：width

宽：height

注：这里不是标签的那种格式。

在这个网页之中，它是有一个长度单位的——px。

在使用属性定义的时候，在结尾处要加上“;”。

举个例子，比如给我上面的miao中设长500px宽200px。

<style>
	.miao{
		width:500px;
		height:200px;
	}
</style>

先不要急着运行看效果如何，它现在这个样子出来是没有任何效果能看出来的，因为它这里仅仅是对这个框架长宽的定义。

它也不会有什么自带的描边啥的。

（2）纯色背景

为了方便看效果，先讲这个背景颜色的填充。

其实框架的背景填充方式很多，这里只是单纯为了方便看效果，而说一下这个最简单的纯色填充。

在这里，填充用的是background，同样的，不能当初标签来用。

额，还有要说的一点就是，在HTML中，一种颜色的表达方式有很多。

法一：比如“#”+“72ECAD”，格式就是#加上一串数字和英文。

后面那一串奇怪的东西，其实是3个十六进制的数字，也就是对应了RGB中的红：256，绿：256，蓝：256。

可以参考自带的画图软件里面的编辑颜色。

法二：这个有点麻烦，除此之外还有一种非常简单的方式，就是英文单词：red就是对应红色，blue就是蓝色，以此类推，但是这样的话颜色种类比较/少。

那代码，怎么表示呢。

也是非常简单的一行，“;”仍是要的。

<html>

<head>
	<title>琉璃</title>
	<style>
		.miao{
			width:500px;
			height:200px;
			background:#47F6FF;
		}
	</style>
</head>

<body>
<div class="miao">喵喵喵</div>
</body>

</html>

效果图：

（3）位置

在HTML中，位置都是相对的，用代码来表示就是。

position:relative;

相对于默认位置的意思。

当然，我们都知道，在平面直角坐标系中，在该平面上的任意一个点都能用（x,y）来表示，HTML也可以如此类推，但是不涉及正负，看的是距离，也就是绝对值。

常见的位置写法，就是用“top”和“left”，那分别是什么意思呢？

top:该框架顶部相对于参照系（参照物）的距离。

left:该框架最左边相对于参照系的距离。

top:100px;
left:200px;

这么表示就行了。

（4）梳理

嗯，为了防止某些同学不懂，接下来就代码和效果放一起，对比着来看。

<html>

<head>
	<title>琉璃</title>
	<style>
		.miao{
			width:500px;
			height:200px;
			background:#47F6FF;
			position:relative;
			top:100px;
			left:200px;
		}
	</style>
</head>

<body>
<div class="miao">喵喵喵</div>
</body>

</html>

2.拓展延申

（1）定义边框

在定义边框中，主要考虑的是两个因素：边框厚度和边框颜色。

边框颜色的定义同上。

代码也是一行的问题。

border: solid 1px #237EFC;

“1px”——>框架厚度。

“#237EFC”——>边框颜色。

这个还是比较好理解的。

（2）层级

当两个框架有重叠的时候，就要考虑到层级的问题，就是哪个在上哪个在下，谁被谁覆盖的问题。

z-index:n;

n为一个数字，数字越大，就越在上面，画图举例来说就是……

三.简陋的登录界面

前面讲的都是框架的相关知识，那我们的主线还是不变的——做一个网页，登录这种东西必然是少不了的，这里就简单的做一个登录的框架，具体的内容下期再讲。

1.思路

既然是一个网页界面，简陋点来说，就是一个大背景底色弄一下，然后右边来一个小框架，在框架当中再弄具体的登录内容。

2.涉及知识点

这里还好，不是很多，也就是框架的颜色填充，位置确定和层级问题。

3.代码

理清思路和知识点就好写多了。

<html>

<head>
	<title>琉璃</title>
	<style>
		.back{
			width:1250px;
			height:700px;
			background:#47F6FF;
			position:relative;
			z-index:0;
		}
		.denlu{
			width:200px;
			height:200px;
			background:#CF73F7;
			position:relative;
			top:100px;
			left:1030px;
			z-index:1;
		}
	</style>
</head>

<body>
<div class="back">
	<div class="denlu">登录窗口</div>
</div>
</body>

</html>

效果图：