Thứ tư, 14/10/2020 | 00:00 GMT+7

Cách tạo chân trang tĩnh bằng HTML và CSS (Phần 7)

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

Một phần của loạt bài: Cách xây dựng trang web bằng CSS

Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.

Trong hướng dẫn cuối cùng của loạt bài về CSS, bạn sẽ tạo một chân trang tĩnh nằm ở vị trí cố định ở cuối khung nhìn khi khách truy cập cuộn xuống trang. Hướng dẫn này sẽ tạo lại chân trang trong trang web trình diễn nhưng bạn cũng có thể sử dụng các phương pháp này cho các dự án trang web khác.

Gif của chân trang tĩnh trên trang web trình diễn

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Hướng dẫn này sử dụng một số biểu tượng truyền thông xã hội làm nội dung trong phần chân trang. Nếu bạn muốn sử dụng các biểu tượng này, hãy download ngay từ trang web trình diễn của ta và lưu chúng vào folder hình ảnh của bạn dưới dạng:

Để download những hình ảnh này, hãy nhấp vào tên file được liên kết ở trên và sau đó nhấp CTRL + Left Click (trên Mac) hoặc Right Click (trên Windows) trong khi di chuột vào hình ảnh và chọn “Lưu hình ảnh dưới dạng”. Lưu hình ảnh với tên file được hướng dẫn vào folder images của bạn.

Sau khi bạn đã lưu các biểu tượng của bạn , bạn có thể chuyển sang phần tiếp theo.

Trước tiên, bạn sẽ xác định lớp “footer” bằng cách thêm đoạn mã sau vào cuối file styles.css :

styles.css
. . .  /* Footer */  .footer {   position:fixed;   bottom:0;   left:0;   width:100%;   height: 90px;   background-color: #D0DAEE; } 

Lưu file styles.css . Trong đoạn mã này, bạn đã thêm comment để gắn nhãn mã CSS cho phần Chân trang. Sau đó, bạn xác định một lớp có tên footer và khai báo một số luật kiểu. Luật đầu tiên tuyên bố position của nó là fixed, nghĩa là phần tử sẽ không di chuyển khỏi vị trí bạn chỉ định khi user cuộn xuống trang. Vị trí này được chỉ định bởi hai khai báo tiếp theo: bottom:0left:0 , chỉ định một vị trí bằng không pixel từ bên trái và không pixel từ cuối khung nhìn của trình duyệt.

Bằng cách thay đổi các giá trị này, bạn có thể thay đổi vị trí của phần tử trên trang. Tuy nhiên, lưu ý bất kỳ giá trị nào ngoài số 0 cần bao gồm hậu tố px sau số. Bộ luật cũng chỉ định chiều rộng, chiều cao và màu nền của lớp footer .

Đến đây bạn đã sẵn sàng để thêm nội dung chân trang trong phần tiếp theo của hướng dẫn này.

Để thêm nội dung chân trang, bạn sẽ thêm containers <div> vào trang web và gán lớp chân trang mà bạn vừa tạo. Quay lại index.html của bạn và dán đoạn mã sau vào cuối </div> đóng </div> cuối cùng:

index.html
. . .  <!--Section 7: Footer-->  <div class="footer"> </div> 

Lưu index.html của bạn và reload trong trình duyệt. (Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước hướng dẫn của ta Cách Xem Tệp HTML Offline Trong Trình duyệt của Bạn ).
Bây giờ, bạn sẽ có một phần chân trang trống ở cuối trang web , vẫn giữ nguyên vị trí khi bạn cuộn lên và xuống trang:

Gif của chân trang cố định trống

Tiếp theo bạn sẽ thêm nội dung vào phần footer vừa tạo.

Trong bước này, bạn sẽ thêm và tạo kiểu cho các mục menu ở phía bên trái của footer. Các mục menu này được dùng để liên kết đến các trang khác trên trang web . Hiện tại, chỉ có một trang web trên trang web , vì vậy bạn có thể sử dụng các liên kết mà ta cung cấp cho mục đích demo . Sau này, nếu bạn thêm các trang bổ sung vào trang web của bạn , bạn có thể tạo các mục menu tại đây và thêm các liên kết chính xác. Bạn có thể tìm hiểu cách tạo và liên kết đến các trang web mới với hướng dẫn này về Cách tạo trang web bằng HTML .

Quay lại file styles.css của bạn và thêm đoạn mã sau vào cuối file :

styles.css
. . .  .footer-text-left {   font-size:25px;   padding-left:40px;   float:left;   word-spacing:20px; }  a.menu:hover {   background-color:yellow;   font-size:20px; } 

Hãy tạm dừng một chút để xem lại từng bộ luật mà ta đã tạo:

  • Bộ luật đầu tiên xác định một lớp có tên footer-text-left sẽ được sử dụng để tạo kiểu cho văn bản mục menu. Lưu ý bạn đang đặt thuộc tính float left để văn bản được gán cho lớp này sẽ nổi ở bên trái của trang. Bạn cũng đang sử dụng thuộc word-spacing để cấp thêm khoảng cách giữa các mục menu. Nếu bất kỳ mục nào trong menu của bạn có nhiều hơn một từ, bạn cần tạo một lớp để tạo kiểu cho các mục menu (thay vì chỉ thay đổi giá trị khoảng cách từ).

  • Bộ luật thứ hai sử dụng lớp giả hover để thêm màu nền vàng vào văn bản khi user di con trỏ qua văn bản.

Đến đây bạn sẽ thêm các mục menu vào trang web. Quay lại index.html của bạn và thêm đoạn mã được đánh dấu sau vào trong containers chân trang mà bạn đã tạo:

index.html
. . .  <div class="footer">   <p class="footer-text-left">     <a href="index.html" class="menu">home</a>     <a href="https://css.sammy-codes.com/about.html" class="menu">about</a>      <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a>   </p> </div>  

Đoạn mã này thêm hai mục menu (“about” và “credit”), liên kết các mục menu này và tạo kiểu cho văn bản với các lớp footer-text-lefta.menu mà bạn vừa tạo.

Lưu cả hai file và reload trang web trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Gif của chân trang với các mục menu

Thêm biểu tượng truyền thông xã hội

Tiếp theo, bạn sẽ thêm các biểu tượng xã hội vào chân trang, bạn có thể sử dụng biểu tượng này để liên kết với các account mạng xã hội của bạn . Nếu bạn muốn sử dụng các biểu tượng cho các nền tảng truyền thông xã hội khác nhau, bạn có thể tìm kiếm các biểu tượng miễn phí trên web và tải chúng vào folder images của bạn . Quay lại file styles.css của bạn và thêm ba bộ luật sau vào cuối file của bạn:

styles.css
. . .  .footer-content-right {   padding-right:40px;   margin-top:20px;   float:right; }  .icon-style {   height:40px;   margin-left:20px;   margin-top:5px; }  .icon-style:hover {   background-color:yellow;   padding:5px; } 

Hãy tạm dừng để xem xét từng bộ luật :

  • Bộ luật đầu tiên xác định lớp footer-content-right và gán cho nó các giá trị padding, margin và float cụ thể. Bạn sẽ sử dụng bộ luật này để tạo kiểu cho một phần tử <div> sẽ chứa các biểu tượng mạng xã hội.

  • Bộ luật thứ hai tạo kiểu icon-style lớp sẽ cung cấp các giá trị chiều cao và lề cho kích thước và vị trí của các biểu tượng mạng xã hội.

  • Bộ luật thứ ba sử dụng lớp giả hover để thêm nền màu vàng vào biểu tượng khi user di con trỏ qua văn bản.

Lưu file styles.css của bạn. Đến đây bạn sẽ thêm các biểu tượng mạng xã hội vào chân trang. Quay lại index.html của bạn và thêm đoạn mã sau vào thẻ đóng </a> cuối cùng của các mục menu:

index.html
. . .  ... <div class="footer-content-right">   <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a>   <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a>   <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a> </div> 

Đảm bảo rằng bạn thay đổi đường dẫn file và liên kết với thông tin mạng xã hội của bạn .

Đoạn mã này tạo containers <div> , được gán kiểu footer-content-right cho lớp. Bên trong containers div này, bạn đã thêm ba biểu tượng truyền thông xã hội bằng thẻ HTML <img> và liên kết từng hình ảnh bằng thẻ HTML <a> .

Bạn cũng đã thêm văn bản thay thế mô tả từng biểu tượng bằng thuộc tính alt . Khi tạo trang web, văn bản thay thế nên được thêm vào tất cả các hình ảnh để hỗ trợ khả năng truy cập trang web cho các cá nhân sử dụng trình đọc màn hình. Để đọc thêm về cách sử dụng văn bản thay thế bằng HTML, vui lòng truy cập phần về văn bản thay thế trong hướng dẫn của ta Cách Thêm Hình ảnh Vào Trang web của Bạn Bằng HTML .

Lưu index.html của bạn và reload trong trình duyệt. Đến đây bạn sẽ có một chân trang cố định với ba biểu tượng truyền thông xã hội ở bên phải liên kết đến account của bạn. Các liên kết sẽ thay đổi màu sắc khi user di con trỏ qua chúng. Để xác nhận kết quả của bạn , bạn có thể so sánh chúng với ảnh gif ở đầu hướng dẫn này.

Kết luận

Đến đây bạn đã tạo một chân trang tĩnh ở một vị trí cố định ở cuối khung nhìn khi khách truy cập cuộn xuống trang. Bạn có thể tiếp tục khám phá khả năng thiết kế chân trang và nội dung bằng cách thay đổi giá trị trong các lớp CSS mà bạn đã tạo hoặc thêm các loại nội dung khác nhau vào index.html của bạn. Để có thêm ý tưởng về việc khám phá các khả năng thiết kế và bố cục cho trang web , phần kết của loạt bài hướng dẫn này có nhiều gợi ý hơn cho những điều cần thử như sắp xếp lại các phần nội dung, thêm liên kết đến các trang khác và thay đổi kiểu bố cục bằng cách sử dụng mô hình hộp.


Tags:

Các tin trước

Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi 2020-10-12
Cách tạo kiểu cho HTML phần tử div với CSS 2020-10-12
Cách tạo bảng trong HTML 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12
Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML 2020-10-12
Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS 2020-10-12
Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài 2020-10-12
Cách tạo nhận xét HTML 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12