html5+css3 登录页面

射手座的程序媛

已于 2023-12-12 09:08:01 修改

阅读量1.2k

点赞数 33

分类专栏：前端文章标签： html5 css3 前端

于 2023-12-11 13:35:41 首次发布

本文链接：https://blog.csdn.net/ly121862/article/details/134924819

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

代码如下:

css文件

该文件命名为 login.css

/*

login.html 页面中使用的css样式

*/
.container{
   position: relative;
}

#bg_div{
   margin:0px auto;
   background: url(../img/bg.jfif) no-repeat; /* 设置背景图片, 注意图片的位置,可以更改*/
   width: 1280px;
   height:730px;
   text-align: center;
}

.form_div{
   position: absolute;/* 设置绝对布局*/
   top: 100px;
   right:300px;
   width: 400px;
   height: 400px;
   background-color: #fff;
   opacity: 0.6;/* 设置透明度*/
}
.form_div h2{
   text-align: center;
   font-weight: 700;
   color: black;
   margin:30px;
}
.form_div .form-group{
   text-align: center;
}
.form_div .form-group input{
   width:300px;
   display: inline-block;
   margin:15px;
   line-height:35px;

}
.form_div .form-group input:focus{
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);/* 设置阴影位置*/
}
.form-group-left{
   text-align: left;
   margin:15px;
   width:300px;
}
.form-group-right{
   text-align: right;
   margin-right:50px;
}
.form-group-left a{
   color:#55aaff;
   font-size: 16px;
   padding-left: 32px;
   text-decoration: none;/* 设置去掉文本装饰 (去掉超链接默认的下划线)*/
}
.form-group-right button{
   background-color: blue;
   color: #FFFFFF;
   border-radius: 10px;/* 设置边框圆角半径 10px*/
   border: none;
   width:300px;
   height:40px;
}

html 源码

该文件命名为login.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>登录页面标题</title>
       <link href="css/login.css" rel="stylesheet"> 
   </head>
   <body>
       <div class="container">
           
       <div id="bg_div"></div>
       
       <div class="form_div">
           <h2>登录</h2>
           
           <form action="1.html" method="post">
               <div class="form-group">
                   <input name="username" type="text" placeholder="请输入您的用户名" required="required" />
               </div>
               <div class="form-group">
                      <input name="password" type="password" placeholder="请输入您的密码" required="required"/>
               </div>
               <div class="form-group-left">
                      <a href="1.html">没有账号,立即注册</a>
               </div>
               <div class="form-group-right">
                   <button>登录</button>
               </div>

           </form>

       </div>
       </div>
   </body>
</html>