Gói thiết kế website Thiết kế website công ty Thiết kế website du lịch Thiết kế website bán hàng Thiết kế website bất động sản Thiết kế website nhà hàng Thiết kế website xây dựng Thiết kế website thuê xe ôtô Thiết kế website nội thất Thiết kế website trọn gói Thiết kế website sim số đẹp, bán sim online
Dịch vụ khác Nâng cấp website Quản trị website Thiết kế giao diện website Đăng tin rao vặt Thiết kế Logo Quảng cáo Google Ads hiệu quả
Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.
Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.
Đầu tiên chúng ta sẽ định dạng cho phần khung của tab như sau:
div#wrapper { margin: 50px; padding: 0; }
Chúng ta sẽ dùng định dạng của thẻ
để tạo lên các tab ở phần 1. Về nguyên tắc thì chúng ta có thể dùng một trong ba thẻ , , . Nhưng tại sao tôi lại dùng thẻ , là bởi vì một lý do nào đó mà trình duyệt của người xem không tải được CSS từ Website của bạn thì họ vẫn hiểu được cấu trúc tab của bạn. Định dạng của phần một như sau
Giới thiệu Sản phẩm Tin tức Liên hệ
Bây giờ chúng ta sẽ định dạng sao cho các tab nằm trên cùng một hàng và có hình dáng của tab.
ol.tab { background: url('/../dot.gif') repeat-x left bottom; /* ảnh 1px */ list-style: none; margin: 0; padding: 6px 0; position: relative; } ol.tab li { background: #F2F5FA; border: 1px solid #D3DDED; display: inline; /* các thẻ li ở trên một dòng */ margin-right: 5px; padding: 0; }
Trong cách định dạng này ta có sử dụng một kỹ thuật nhỏ, đó là chúng ta có sử dụng một ảnh .gif có kích thước 1px x 1px để thay thế border-bottom của
Khi đang ở trong trang nào đó thì tab của trang đó sẽ có màu khác với những tab khác, do vậy chúng ta sẽ đặt cho tab đó một class là active. Vì vậy chúng ta cần phải định dạng cho riêng cho các tab active như sau:
ol.tab li.active { background: #FFF; border-bottom: 1px solid #FFF; font-weight: bold; padding: 5px 10px; }
Tiếp theo chúng ta sẽ định dạng cho các link nằm trong thẻ
ol.tab a { font-weight: bold; margin: 0; padding: 5px 10px; }
Cuối cùng bây giờ chúng ta sẽ định dạng phần chứa nội dung của mỗi tab. Phần này chỉ đơn giản là chúng ta định dạng cho thẻ
div#content { border: 1px solid #D3DDED; border-top: none; padding: 10px; }
Và bây giờ các bạn mở file .html bằng một trình duyệt nào đó và ngắm nhìn kết quả của mình. Các bạn thấy đấy menu dạng tab đâu có quá phức tạp đúng không các bạn? các bạn có thể tải toàn bộ ví dụ tại đây.
Tag: Thiết kế web , thiết kế website
Tổng đài tư vấn miễn phí 100% cho khách hàng Tam Nguyên.
Hãy gọi cho chúng tôi!