【实训】简单的登录样式练习

最新推荐文章于 2023-07-04 00:17:38 发布

sailven

最新推荐文章于 2023-07-04 00:17:38 发布

阅读量161

点赞数

分类专栏：大二文章标签： css 前端

本文链接：https://blog.csdn.net/sailven/article/details/127506222

版权

大二专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一个简单的html登录界面。
时间：2021-1-28

效果图：
在这里插入图片描述
css样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录样式</title>
<style>

*{margin:0;padding:0;box-sizing:border-box;}

body{background:url(bg.jpg);font-family: "微软雅黑", sans-serif;}

.headtop{background:url(topbg.jpg);height:28px;}

.login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }

input{
    padding:10px;
    width:100%;
    color:white;
    margin-bottom:10px;
    background-color:#555555;
    border: 1px solid black;
    border-radius:4px;
    letter-spacing:2px;
}

form button{
    width:100%;
    padding:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:4px;
    cursor:pointer; 
}
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
  <h1>Login</h1>
  <form action="" method="post">
    <input type="text" name="user" placeholder="用户名" required="required">
    <input type="password" name="password" placeholder="密  码" required="required">
  <button type="submit">登录</button>
  </form>
</div>
</body>
</html>