上次我们讲了音频和图片,但是其弊端也是显而易见的。为此,我们就要用到CSS,这里只是浅浅地说一下。当然啦,除了CSS,我们还要讲一个输入框,毕竟很多时候大家在登各种网站时,都会看到“用户名”“密码”一类的输入框,或是“确认”“登录”的按钮。
可能大伙要问为什么不直接用之前的<audio>或是<img src="">,如果你只是做出了自己用用的,那倒也无妨,但如果要把网站做好给别人用,那就要用到今天讲的了。
(大家可以放心,我找别人试验过,别人打开看到的内容和我这边是一样的)
好啦,我们先来了解一下这个CSS,CSS是层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
在这里我们就挑一部分讲,是关于"div"的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>范例</title>
<style>
.xx{
width:500px;
height:150px;
background:pink;
position:relative;
top:10px;
left:50px;
z-index:-5;
}
</style>
</head>
<body>
<div class="xx">例子</div>
</body>
</html>
上面这个是个简单的例子,接下我会详细讲解。
在<style>中我们可以进行定义,格式为“.”+"任意字母"如".xx",然后加一个大括号,在里面写代码。
width | 方框宽度 |
height | 方框高度 |
background | 方框的背景颜色 |
position:relative | 相对定位(此处为默认值) |
top(bottom) | 相对上下距离 |
left(right) | 相对左右距离 |
z-index | 层面(堆叠顺序) |
这个大家可以自己用不同数据自行测试。
接下来说一下这个输入框,"<input type="">"
<div>
用户名:
<input type="text">
</div>
效果是这样的(我背景换成粉的了已经)
这个输入框这次先一笔带过,详细地再讲过。
接下来是按钮。
<html>
<head>
<title>Hoke</title>
</head>
<body>
<button type="submit" id="submit-button">登录</button>
</body>
</html>
就是这么个效果,是可以点击的。
这次就到这里,谢谢浏览,如有不足错误之处还请指出。