Hướng dẫn top header in html - tiêu đề hàng đầu trong html
|
Các bạn làm web hẳn đều biết đến thanh navigation (thanh điều hướng), thanh được dùng để điều hướng các phần chính của một website như "Trang chủ", "Tin tức", "Liên Hệ", "Về chúng tôi", ... Thanh này thường được đặt ở đầu trang web hoặc đặt sau header, tùy theo thiết kế và yêu cầu của từng bài. Thiết kế một thanh navigation sẽ làm trang web của chúng ta rõ ràng hơn, người dùng cũng dễ dàng hiểu được trang web của mình có những phần mục nào. Show  Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Hôm nay, mình sẽ làm ví dụ về thanh navigation đặt trên top nhé. Còn trường hợp đặt sau header, bạn chỉ cần đẩy nó cuống dưới và để header lên trên là được nhé. Đây là một ví dụ về thanh top navigation: Bài viết này được đăng tại [free tuts .net] Giờ thì mình bắt tay vào làm ví dụ ngay các bạn nhé Thanh điều hướng Navigation nằm ở đầu trangHTML Đầu tiên nhất vẫn là viết HTML trước, các bạn nhập đoạn mã HTML sau đây vào file HTML nhé:
Ở đây mình chỉ lấy ví dụ 4 phần mục lớn, tương ứng mình sẽ đặt trong 4 div khác nhau, bạn cũng có thể thêm hoặc bỏ bớt các phần danh mục theo yêu cầu của bài mình nhé. Ở phần "Trang chủ" mình có đặt CSS Tiếp theo là đến CSS nhé. Các bạn có thể tham khảo css của mình ở dưới đây body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}Kết quả Thanh điều hướng cố định ở đầu trangNếu như bạn đã dùng qua excel thì hẳn bạn cũng biết đến chức năng Freeze Top Row (cố định phần tiêu đề), tức là khi bạn cuộn chuột thì chỉ nội dung của trang bị tác động còn phần tiêu đề thì đứng yên. Bạn cũng hoàn toàn có thể làm điều này bằng CSS. Áp dụng vào bài tập ở trên, bạn chỉ cần sửa một chút CSS là được nhé. Đầu tiên trong thẻ body, bạn thêm thuộc tính Trong class . Các bạn có thể tham khảo bài mình sửa sau đây nhé body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
}
.topnav {
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}Các bạn "run" để kiểm tra và so sánh kết quả của mình nhé Lời kếtThanh navigation rất quan trọng đối với mỗi website. Nó cho người dùng biết trang web của bạn có những mục gì và trang web của bạn thuộc loại trang web nào. Như vậy, ở trên mình đã hướng dẫn về thiết kế một thanh navigation đặt ở trên top của trang web. Thật đơn giản phải không các bạn. Chúc các bạn thành công nhé! Nguồn: https://www.w3schools.com/howto/howto_js_topnav.asp Tạo bố cục các fixed header và fixed footer Luyện tập sử dụng thuộc tính position để tạo fixed menu. Mô tả- Tạo bố cục các fixed header và fixed footerMột thiết kế menu điều hướng độc đáo sẽ góp phần thu hút người dùng sử dụng và ở lại trên thiết kế web của bạn. Fixed menu là một xu hướng được nhiều trang web lựa chọn vì gọn nhẹ, lại dễ dàng sử dụng. Fixed menu, hay còn gọi là floating menu, là menu được gắn cố định ở một vị trí trên trang kể cả khi bạn cuộn trang lên xuống. Kết quả của phần thực hành là một menu như sau: Hướng dẫnBước 1. Tạo html cơ bản Tạo html cơ bản Bước 2. Tạo cấu trúc menu : thêm đoạn code sau vào thẻ Bước 3. Bổ sung mã CSS: Bổ sung mã CSS: Trong đó, một số thuộc tính quan trọng của class navbar là:
Trên đây CodeGym đã cùng với bạn luyện tập sử dụng thuộc tính position để tạo fixed menu. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé! |
