使用 HTML 和 CSS 设计一个透明的登录/注册网页

项目介绍：

在本文中，我们将讨论如何使用 HTML 和 CSS 设计一个透明的登录网页。

项目结构：

• index.html
• style.css

index.html

    
        
        
        
        
        
        Transparent Login Page using HTML/CSS
    
  
    
        
            
                LogIn
                
                    
                    
                
                
                    
                    
                
                Submit
            
        
    

解释：

我们将登录表单放在一个名为container 的类中，并且我们将每个输入标签放置在一个单独的div 中，并带有类行，以便每个输入标签占据整行。我们还在输入标签中添加了一个矢量图像，其来源如下。

样式文件

/*CSS Reset*/
*{
    margin:0px;
    padding: 0px;
}
/*Stling the body*/
body{
    background: url(imgurl) no-repeat center center fixed;
    background-size:cover;
}
  
/*Styling the name LogIn*/
h1{
    border-bottom: 3px solid blue;
    margin-bottom: 10px;
    color:black;
    font-weight: bold;
    background: none;
    margin-right: 105px;
    margin-top: 50px;
    font-family: 'Baloo Bhai 2', cursive;
}
  
/*Styling the class container*/
.container{
    width: 100%;
    height:100vh;
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
      
}
.row1{
    position: absolute;
    left: 33%;
}
  
/*Styling and positioning the login form*/
.row{
    position: relative;
}
.row input{
    position: relative;
    left: 25px;
    margin:10px;
    padding: 10px;
    width:80%;
    outline:none;
    background: none;
    border: 0px;
    font-weight: bold;
    border-bottom:3px solid blue;
    font-family: 'Baloo Bhai 2', cursive;
}
.row i{
    position: absolute;
    margin-top:10px;
    padding: 10px;
     
}
/*Styling the buttons in the login*/
.btn{
    width: 4rem;
    border-radius: 15px;
    background: none;
    margin-right: 105px;
    background-color:black;
    color: blanchedalmond;
    outline:none;
    font-family: 'Baloo Bhai 2', cursive;
    cursor: pointer;
}
.btn:hover{
    background-color: blue;
    color:white;
}

完整代码：

    
        
        
        
        
        
            /*CSS Reset*/
            * {
                margin: 0px;
                padding: 0px;
            }
            /*Stling the body*/
            body {
                background: url(
https://contribute.geeksforgeeks.org/wp-content/uploads/space_background_for_infinite_scroll_example.png)
                  no-repeat center center fixed;
                background-size: cover;
            }
  
            /*Styling the name LogIn*/
            h1 {
                border-bottom: 3px solid blue;
                margin-bottom: 10px;
                color: black;
                font-weight: bold;
                background: none;
                margin-right: 105px;
                margin-top: 50px;
                font-family: "Baloo Bhai 2", cursive;
            }
  
            /*Styling the class container*/
            .container {
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
            }
            .row1 {
                position: absolute;
                left: 33%;
            }
  
            /*Styling and positioning the login form*/
            .row {
                position: relative;
            }
            .row input {
                position: relative;
                left: 25px;
                margin: 10px;
                padding: 10px;
                width: 80%;
                outline: none;
                background: none;
                border: 0px;
                font-weight: bold;
                border-bottom: 3px solid blue;
                font-family: "Baloo Bhai 2", cursive;
            }
            .row i {
                position: absolute;
                margin-top: 10px;
                padding: 10px;
            }
            /*Styling the buttons in the login*/
            .btn {
                width: 4rem;
                border-radius: 15px;
                background: none;
                margin-right: 105px;
                background-color: black;
                color: blanchedalmond;
                outline: none;
                font-family: "Baloo Bhai 2", cursive;
                cursor: pointer;
            }
            .btn:hover {
                background-color: blue;
                color: white;
            }
        
        Transparent Login Page using HTML/CSS
    
  
    
        
            
                LogIn
                
                    
                    
                
                
                    
                    
                
                Submit
            
        
    

说明：

• 设置主体样式：我们在主体中放置了一个背景图像，为了覆盖整个屏幕，我们将background-size分配给了 cover 。
• 样式名称登录：我们为它分配了适当的边距，并带有适当的蓝色边框。我们已将它的字体系列分配给 Baloo Bhai 2 ，为了使其透明，我们将背景设置为none 。
• 设置类容器的样式：我们将容器类设置为 flexbox，然后将登录表单定位到网页的中心。
• 登录表单样式：在登录表单居中之后，现在我们已经根据需要对其进行了定位。我们还将字体系列设置为 Baloo Bhai 2。为了使其透明，我们将背景设置为无。我们还在输入标签前面添加了矢量图像。
• 按钮样式样式：我们为按钮分配了适当的宽度。我们对它的轮廓没有任何了解。每当用户将鼠标悬停在按钮上时，我们都会将光标更改为指针。

输出：