tạo khung đăng nhập css

Tri thức / Lập trình / Lập trình web / Html & Css      13642 – 0      1 năm trước

Đang xem: Tạo khung đăng nhập css

0 0

Sau đây, chúng ta sẽ đến với bài thực hành html và css đầu tiên. Trong bài học này, chúng ta sẽ học cách tạo form đăng nhập đẹp bằng html và css.

Xem thêm: Cách Đăng Nhập Thần Tượng Kpop, Ghim Trên Kpop

Xem thêm: Tư Vấn Xây Dựng Cấu Hình Máy Tính Chơi Game 10 Triệu, Build Pc Chơi Game Chỉ Tầm 10 Triệu

Kiến thức trong bài học sẽ được trình bày theo từng bước, có code mẫu cuối bài viết để các bạn tải về xem thử trực tiếp.

 

Kết quả form đăng nhập bằng html và css

Chúng ta sẽ từng bước viết mã html và css để có được form đăng nhập như hình bên dưới:

*

 

 

Thực hiện viết mã html cho form đăng nhập

Tạo file login.html với nội dung như sau:

<!DOCTYPE html> <html> <head> <title>Đăng nhập vào website</title> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <link href=”css/login.css” rel=”stylesheet” type=”text/css”/> </head> <body> <header> <div class=”container”> Đầu trang </div> </header> <main> <div class=”container”> <div class=”login-form”> <form action=”” method=”post”> <h1>Đăng nhập vào website</h1> <div class=”input-box”> <i ></i> <input type=”text” placeholder=”Nhập username”> </div> <div class=”input-box”> <i ></i> <input type=”password” placeholder=”Nhập mật khẩu”> </div> <div class=”btn-box”> <button type=”submit”> Đăng nhập </button> </div> </form> </div> </div> </main> <footer> <div class=”container”> Chân trang </div> </footer> </body> </html>

 

Lưu file login.html, và mở chạy trên trình duyệt, chúng ta sẽ được kết quả như sau:

*

Công bằng mà nói, thì xấu một cách hoàn hảo, và tất nhiên không giống mẫu ở đầu bài viết chút nào. Nguyên nhân là chúng ta chưa thực hiện làm đẹp đoạn mã html trên bằng css. 

 

Định dạng form đăng nhập bằng css

Chúng ta sẽ tạo file login.css trong thư mục css, thư mục css chúng ta đặt cạnh file login.html

Sau đó, liên kết file css trên vào file login.html. Đoạn mã html trong file login.html trên đã bao gồm việc chèn file này, chúng ta có thể thấy tại dòng thứ 7 với nội dung:

<link href=”css/login.css” rel=”stylesheet” type=”text/css”/>

 

Tiếp đến, chúng ta viết mã cho file login.css như sau:

* header main footer .container .login-form h1 .input-box .input-box input .btn-box .btn-box button

 

Vậy là hoàn tất, chạy lại file login.html trên trình duyệt và kết quả sẽ giống như sau:

*

 

Giờ thì đã giống mẫu rồi nhé.

 

Các bạn có thể tải về code tại link google drive sau:

download  Code form đăng nhập bằng html và css

 

Xem thêm bài viết thuộc chuyên mục: Đăng nhập

Khuyễn Mãi Hot