Design a simple HTML login interface using CSS style
|
login.html part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!--Introduce font icon library-->
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="wrap">
<h1>E-Commerce Mall Backend Management System</h1>
<form action="">
<div class="input-group">
//The icon-like thing on the left side of the input box is a font. //You can download the file font-awesome-4.7.0 from the Internet and paste it directly into the project directory for use <i class="icon-user fa fa-user"></i>
<input type="text" name="" class="form-control" placeholder="Please enter your username">
</div>
<div class="input-group">
<i class="icon-user fa fa-lock"></i>
<input type="password" name="" class="form-control" placeholder="Please enter your password">
</div>
<div class="input-group btn-group">
<button>Login</button>
</div>
</form>
<p>©xx Group All rights reserved</p>
</div>
</body>
</html>
reset.css part (reset part)
*{
margin:0;
padding:0;
}
a{
font-size: 12px;
text-decoration: 0;
color:#222;
}
a,
input,
button{
outline: none;
}
ul,ol,li{
list-style: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: 100;
}
img{
display: block;
border: 0;
}About resetting the style file: Because different browsers render HTML tags differently, even if the developer does not write a line of CSS code for the HTML page, the opened page will always have a style, but the default styles of different browsers are slightly different, which creates trouble for developers to a certain extent. Therefore, before starting to write CSS code, the style sheet is usually reset first to unify the styles of HTML elements in all browsers. Front-end engineers unify the styles through custom style files, thereby improving the compatibility of the front-end interface. login.css part
y{
background: rgba(0,0,0,0.8);
}
body{
//Set the background image for the web page background-image: url(../img/xx.jpg);
}
.wrap{
//Center the main body of the interface in the browser position: absolute; //Absolute positioning left: 50%;
top: 50%;
margin: -175px 0 0 -250px;
padding: 20px;
width: 500px;
height: 350px;
background: #333333;
box-shadow:0 0 10px rgba(255,255,255,0.5);
box-sizing: border-box; //padding and border are included in the defined width and height}
h1{
height: 50px;
font-size: 1.6em;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.input-group{
margin: 20px auto;
height: 40px;
width: 300px;
border: 1px solid rgba(0,0,0,0.2);
}
i{
float: left; //left float width: 40px;
height: 40px;
text-align: center;
line-height: 40px !important;
background: rgb(22,160,93);
color: #fff;
font-size: 22px !important;
}
.form-control{
float: left;
padding: 0 10px;
height: 40px;
border: 0;
width: 260px;
font-size: 18px;
box-sizing: border-box;
}
.btn-group{
border: 0;
margin-top: 40px;
}
button{
display: block;
width: 100%;
height: 40px;
font-size: 1.2em;
letter-spacing: 10px;
border: 1px solid rgb(22,160,93);
color: rgb(22,160,93);
background: #fff;
cursor: pointer;
}
button:hover{
//Set the dynamic effect color of mouse hover for button elements: #fff;
background: rgb(22,160,93);
}
p{
font-size: 12px;
text-align: center;
color: #888;
}The effect of the design results on the browser:
This is the end of this article about how to use CSS styles to design a simple HTML login interface. For more relevant CSS HTML login interface content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: A brief discussion on the definition and precautions of H tags
>>: How to display percentage and the first few percent in MySQL
Recommend
Detailed explanation of dynamic Christmas tree through JavaScript
Table of contents 1. Animated Christmas Tree Made...
How to deploy SpringBoot project using Docker
The development of Docker technology provides a m...
Example code for drawing double arrows in CSS common styles
1. Multiple calls to single arrow Once a single a...
How to set npm to load packages from multiple package sources at the same time
Table of contents 1. Build local storage 2. Creat...
Linux exposes Sudo privilege escalation vulnerability, any user can also run root commands
As one of the most commonly used and important ut...
How to add rounded borders to div elements
As shown below: CSS CodeCopy content to clipboard...
How to use CSS attributes to block mouse events (mouse clicks can penetrate upper elements)
Origin: A few days ago, a tester sent a requireme...
MySQL data compression performance comparison details
Table of contents 1. Test environment 1.1 Hardwar...
33 ice and snow fonts recommended for download (personal and commercial)
01 Winter Flakes (Individual only) 02 Snowtop Cap...
Bugs encountered when using mybatis-generator with mysql8.0.3 in IDEA
1. Add the plug-in and add the following configur...
How to modify the time zone and time in Ubuntu system
On a Linux computer, there are two times, one is ...
Nexus uses nginx proxy to support HTTPS protocol
background All company websites need to support t...
How to use CSS to display multiple images horizontally in the center
Let me first talk about the implementation steps:...
JavaScript canvas text clock
This article example shares the specific code of ...
How to install Windows Server 2008 R2 on Dell R720 server
Note: All pictures in this article are collected ...