效果图展示:
实现这个简单登录页面是用的是html和css,以下是代码实现部分
首先需要link css一下(link+tab)
html(body)部分:
<!-- 创建表单 -->
<form action="">
<!-- 创建账号输入框 -->
<input class="zhanghao" type="text" name="" value="" placeholder="账号">
<br />
<!-- 创建密码输入框 -->
<input class="mima" type="password" name="" value="" placeholder="密码">
<br />
<!-- 创建登录按钮 -->
<input class="denglu" type="button" name="" value="登录">
<br />
<p>版权所有©hqyj.com</p>
</form>
css部分的代码实现:
/*插入背景图*/
body{
background-image: url(image/bgt.jpeg);
}
/*为表单设置居中*/
form{
position: absolute;
left: 50%;
top: 50%;
}
/*将输入框的各项数值改为合适数值*/
input{
/*对文本框进行长宽调整,去除框,以及边框圆角等操作*/
width: 235px;
height: 30px;
border:none;
padding-left: 8px;
margin-top: 15px;
border-radius: 40px;
}
/*段落居中*/
p{
text-align: center;
}
.denglu{
/*设置背景图,并对文字进行调色处理*/
background:url(image/bgt.jpeg);
margin-left: 5px;
color: white;
font-size: 17px;
}
以上便是实现一个简单的基础登录页面所需代码