Hướng dẫn how can we create a simple login page using html and css? - làm thế nào chúng ta có thể tạo một trang đăng nhập đơn giản bằng html và css?

Giới thiệu

HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Đây là ngôn ngữ đánh dấu quan trọng nhất có thể được sử dụng để tạo một trang web. Nó được sử dụng để hiển thị văn bản, hình ảnh, âm thanh và video trong một trang web.

CSS là viết tắt của các bảng phong cách xếp tầng. Nó được sử dụng để tạo kiểu tài liệu HTML. CSS có thể tạo các trang web đáp ứng và được sử dụng để tạo kiểu và việc thu thập các quy tắc định dạng của nó. Nó được sử dụng cho mục đích thiết kế. Phần mở rộng CSS là [.css].

Có ba loại CSS:

• CSS nội tuyến

• CSS nội bộ

• CSS bên ngoài

Bước 1

Tạo một thư mục mới và đặt tên cho thư mục. Trong thư mục lưu tệp HTML và CSS. Sau khi tạo các thư mục, hãy mở trình chỉnh sửa văn bản tuyệt vời.

Bước 2

Nhấp vào Tệp, chọn Tệp mới và nhấp vào Lưu. Đặt cho tệp tên chỉ số.html.

Bước 3

Tiếp theo, nhấp vào Tệp, sau đó tệp mới và nhấp vào Lưu. Đặt cho tệp tên là Kiểu.

Bước 4

Bây giờ, liên kết HTML và CSS với tệp HTML bạn vừa sao chép và dán mã này vào thẻ tiêu đề:

1.    
2.      "stylesheet" type="text/css" href="css/style.css"/>  
3.   

Bước 5

Tiếp theo, tạo một cấu trúc cho trang đăng nhập bằng HTML, tên người dùng và mật khẩu.

1.     
2.     
3.     
4.     Login Form    
5.         "stylesheet" type="text/css" href="css/style.css">    
6.     
7.     
8.     Login Page    
9.         class="login">    
10.         "login" method="get" action="login.php">    
11.         User Name     
12.             
13.             
14.             "text" name="Uname" id="Uname" placeholder="Username">    
15.             
16.         Password     
17.             
18.             
19.             "Password" name="Pass" id="Pass" placeholder="Password">    
20.             
21.                "button" name="log" id="log" value="Log In Here">       
22.             
23.             "checkbox" id="check">    
24.         Remember me    
25.             
26.         Forgot Password    "#">Password    
27.          
28.     
29.     
30. & nbsp; & nbsp; & nbsp; & nbsp; 

Bước 6

Tiếp theo, ghi mã trong CSS để áp dụng một số kiểu cho HTML để bạn có thể thay đổi giao diện của trang đăng nhập.

1. body  
2. {  
3.     margin: 0;  margin: 0;  
4.     padding: 0;  padding: 0;  
5.     background-color:#6abadeba;  background-color:#6abadeba;  
6.     font-family: 'Arial';  font-family: 'Arial';  
7. }  
8. .login{  
9.         width: 382px;  width: 382px;  
10.         overflow: hidden;  overflow: hidden;  
11.         margin: auto;  margin: auto;  
12.         margin: 20 0 0 450px;  margin: 20 0 0 450px;  
13.         padding: 80px;  padding: 80px;  
14.         background: #23463f;  background: #23463f;  
15.         border-radius: 15px ;  15px ;  
16.           
17. }  
18. h2{  2{  
19.     text-align: center;  text-align: center;  
20.     color: #277582;  color: #277582;  
21.     padding: 20px;  padding: 20px;  
22. }  
23. label{  
24.     color: #08ffd1;  color: #08ffd1;  
25.     font-size: 17px;  font-size: 17px;  
26. }  
27. #Uname{  {  
28.     width: 300px;  width: 300px;  
29.     height: 30px;  height: 30px;  
30.     border: none;  border: none;  
31.     border-radius: 3px;  3px;  
32.     padding-left: 8px;  padding-left: 8px;  
33. }  
34. #Pass{  {  
35.     width: 300px;  width: 300px;  
36.     height: 30px;  height: 30px;  
37.     border: none;  border: none;  
38.     border-radius: 3px;  3px;  
39.     padding-left: 8px;  padding-left: 8px;  
40.       
41. }  
42. #log{  {  
43.     width: 300px;  width: 300px;  
44.     height: 30px;  height: 30px;  
45.     border: none;  border: none;  
46.     border-radius: 17px;  17px;  
47.     padding-left: 7px;  padding-left: 7px;  
48.     color: blue;  color: blue;  
49.   
50.   
51. }  
52. span{  
53.     color: white;  color: white;  
54.     font-size: 17px;  font-size: 17px;  
55. }  
56. a{  
57.     float: right;  float: right;  
58.     background-color: grey;  background-color: grey;  
59. }  

Bước 7

Trước khi sử dụng mã CSS, đầu ra trông như thế này:

Sau khi sử dụng mã CSS, đầu ra trông như thế này:

Bản tóm tắt

Chúng tôi đã tạo thành công một trang đăng nhập. Tôi hy vọng bài viết này hữu ích cho bạn. Nếu bạn có bất kỳ ý kiến ​​trong bài viết này, xin vui lòng hỏi trong phần bình luận.

Làm cách nào để tạo trang đăng nhập cho trang web của tôi bằng HTML và CSS?

Làm thế nào để bạn tạo một trang bằng HTML và CSS?

Làm thế nào chúng ta có thể viết biểu mẫu đơn giản bằng HTML và CSS?

Làm cách nào để tạo một trang đăng nhập để làm việc?