Phần liên kết toàn cục
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
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
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; và 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.