Phần liên kết toàn cục global navigation

Phần liên kết toàn cục

global navigation

Phân tích ta sẽ thấy phần global navigation có cấu trúc tương đối giống danh sách link trên header, khác ở chỗ phần gNav này có thêm background hình và border bao ngoài, ta có thể code như sau:

CSS viết

div#gNav {
    clear: both;
}

div#gNav ul {
    background: url(../images/bg_gnav.gif) repeat-x;
    border: 1px solid #000;
}

div#gNav ul li {
    border-right: solid 1px #fff;
    display: inline;
    padding: 0 10px;
}

div#gNav ul li.last {
    border-right: none;
    padding-right: 0;
}

Click để xem trình duyệt hiển thị

Phân tích

global navigation

Ta thấy phần gNav đã tương đối giống với design, chúng ta cần phải thêm chiều cao, kết hợp với padding để đưa danh sách nằm canh giữa (theo chiều dọc), ta code như sau:

CSS viết

div#gNav ul {
    background: url(../images/bg_gnav.gif) repeat-x;
    border: 1px solid #000;
    height: 22px;
    padding: 12px 0;
}

div#gNav ul li {
    border-right: solid 1px #fff;
    display: inline;
    padding: 0 10px;
}

div#gNav ul li.last {
    border-right: none;
    padding-right: 0;
}

Click để xem trình duyệt hiển thị

Phân tích

global navigation

Vấn đề còn lại là định dạng màu text, định dạng text đậm và bỏ gạch dưới, chúng ta sẽ sử dụng các thuộc tính color, font-weight: bold;text-decoration: none; định dạng trực tiếp cho thẻ <a>:

CSS viết

div#gNav ul {
    background: url(../images/bg_gnav.gif) repeat-x;
    border: 1px solid #000;
    height: 22px;
    padding: 12px 0;
}

div#gNav ul li {
    border-right: solid 1px #fff;
    display: inline;
    padding: 0 10px;
}

div#gNav ul li.last {
    border-right: none;
    padding-right: 0;
}

div#gNav ul li a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

Click để xem trình duyệt hiển thị

Tới đây ta đã hoàn thành xong phần gNav, nếu bạn muốn thêm hiệu ứng cho gNav khi hover (di chuyển chuột đổi hiệu ứng), chúng ta có thể định dạng thêm cho thẻ <a>:

CSS viết

div#gNav ul {
    background: url(../images/bg_gnav.gif) repeat-x;
    border: 1px solid #000;
    height: 22px;
    padding: 12px 0;
}

div#gNav ul li {
    border-right: solid 1px #fff;
    display: inline;
    padding: 0 10px;
}

div#gNav ul li.last {
    border-right: none;
    padding-right: 0;
}

div#gNav ul li a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

div#gNav ul li a:hover {
    color: yellow;
}

Click để xem trình duyệt hiển thị

Bạn thử di chuyển con trỏ chuột vào từng thành phần gNav để xem hover như thế nào.