html实现一个好看的登录界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
</head>
<style>
    body{
        background-image: url("bg.jpg");
        background-repeat: no-repeat;
    }
</style>
<body>
<img src="bg.jpg" style="width:100%;height:100%;position:relative">
<div align="center"  width="200px" height="200px" style="font-size: 15px;background-color: lightsteelblue;
        border: 1px;color: #cc0000;position:absolute;left:35%;top:23%;right: 35%;bottom: 15%;border-style: double">
       <form name="form1" action="" method="post" style="position: absolute;top: 22%;left: 15%">
               <input name="name" type="text" size="50" style="height: 40px" placeholder="请输入用户名:"><br><br>
               <input name="name" type="text" size="50" style="height: 40px" placeholder="请输入密码:"><br><br>
               <input name="name" type="text" size="50" style="height: 40px" placeholder="请输入验证码:"><br><br>
               <input type="button" value="登录" style="width: 320px;height: 40px;color: white;
               background-color: #cc0000"><br><br>
              <input type="radio">记住密码&nbsp;&nbsp;&nbsp;&nbsp;
              <a href="" style="text-decoration: none">去注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <a href="" style="text-decoration: none">忘记密码</a>
       </form>
   </div>
</body>
</html>

背景图片:
在这里插入图片描述在这里插入图片描述

发布了9 篇原创文章 · 获赞 0 · 访问量 1206

猜你喜欢

转载自blog.csdn.net/weixin_43728903/article/details/103948452
今日推荐