一、创建html文件,vscode下载相关插件
我们先选择一个文件夹创建login.html,.之前的文件命无所谓,.之后就必须为html或者htm。
在编辑改文件输入!且出现提示后按回车或按tab快捷生成基础代码。
然后我们下载一个可以方便我们开发的插件。
搜索之后点击一下然后下载即可。
二、编写html标签
我们以QQ登陆为例,需要分别输入账号和密码,还有输入完账号密码之后需要登陆,就还有一个登陆按钮,也就是总共3个Input框。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="login">
<form action="">
<h2>我来组成标题</h2>
<span>登陆:</span><input type="text">
<span>密码:</span><input type="text">
<span><input type="button" value="登陆"></span>
</form>
</div>
</body>
</html>
效果如下:
一个基本框架就搭建好了,现在我们就需要用css代码给页面进行美化。
三、css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url('./bgc.png') no-repeat;
background-size: 100%;
font-family: '宋体';
}
a {
text-decoration: none;
}
.login {
width: 500px;
height: 300px;
background-color: rgba(150,143,172,0.3);
margin: 150px 100px;
text-align: center;
padding: 30px;
border-radius: 20px;
box-shadow: 2px 2px 5px #000; /*阴影效果*/
}
.fstInput, .sndInput {
width: 250px;
height: 25px;
color: rgb(61,54,64);
text-align: center;
outline: none;
margin: 15px;
background-color: rgba(0, 0, 0, 0.0);
border: 0;
border-bottom: 2px solid black;
transition: 1s; /*宽度变化的过度时间*/
}
/* 过度动画,点击输入账号密码框之后会使输入框的下边框扩大 */
.fstInput:focus, .sndInput:focus {
width: 300px;
border-bottom: 2px solid gray;
}
.register {
display: block;
margin-top: 10px;
}
.btn {
width: 100px;
height: 30px;
border-radius: 15px;
border: 0;
background-color: rgb(153,139,152);
}
</style>
</head>
<body>
<div class="login">
<form action="">
<h2>遇事不决,可问春风</h2>
<span><input class="fstInput" type="text" placeholder="请输入账号"></span><br>
<span><input class="sndInput" type="password" placeholder="请输入密码"></span><br>
<span class="register">还没有账号?<a href="">立即注册</a></span><br>
<span><input class="btn" type="button" value="登陆"></span>
</form>
</div>
</body>
</html>
效果如图:
文章来源:https://www.toymoban.com/news/detail-443281.html
四、根据自己需求需要更改的位置
首先就是背景图片,可换成自己的其他背景。根据文件名和路径修改下方的background:url()即可
修改了背景图片那就需要让输入框的位置更适合背景。修改.login里面的margin属性即可,或者需要更改整个表单的大小,也可以修改.login里面的width和height属性。
文章来源地址https://www.toymoban.com/news/detail-443281.html
到了这里,关于用html实现一个静态登陆页面-可根据需求更改样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!