喵做梦技术讨论群
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>
效果图:
4.提醒
有一点要注意一下就是那个两个框架的嵌套……
好啦,这篇到这里就结束啦,一起努力进步喵!