Phần : sidebar

Phần : sidebar

sidebar

Phân tích ta sẽ thấy <h2> có dạng giống như phần content, do đó ta có thể sử dụng lại code của phần content, ta code như sau:

CSS viết

div#sidebar {
    float: right;
    width: 240px;
}

div#sidebar h2 {
    border-bottom: 1px solid #666666;
    font-size: 120%;
    margin-bottom: 10px;
}

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

Phân tích

sidebar

Phần linkList có cấu trúc danh sách với icon bên trái, ta có thể sử dụng thuộc tính background để định dạng:

CSS viết

div#sidebar {
    float: right;
    width: 240px;
}

div#sidebar h2 {
    border-bottom: 1px solid #666666;
    font-size: 120%;
    margin-bottom: 10px;
}

div#sidebar ul.linkList li {
    background: url(../images/ico_arrow.gif) no-repeat; /* Background khong lap */
}

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

Phân tích

sidebar

Ta thấy icon arrow đã xuất hiện, tuy nhiên icon không nằm giữa text (theo chiều dọc) và hiện nó nằm lẫn lộn với text, ta sẽ điều khiển background-positionpadding-left để giải quyết vấn đề này:

CSS viết

div#sidebar {
    float: right;
    width: 240px;
}

div#sidebar ul.linkList li {
    background: url(../images/ico_arrow.gif) no-repeat left center;
    padding-left: 15px;
}

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

Phần còn lại của sidebar là sử dụng padding và margin để điều chỉnh các khoảng cách cho đúng với design:

CSS viết

div#sidebar {
    float: right;
    width: 240px;
}

div#sidebar h2 {
    border-bottom: 1px solid #666666;
    font-size: 120%;
    margin-bottom: 10px;
}

div#sidebar ul.linkList {
    padding: 0 0 30px 10px;
}

div#sidebar ul.linkList li {
    background: url(images/ico_arrow.gif) no-repeat left center;
    padding-left: 15px;
    margin-bottom: 3px;
}

div#sidebar ul.bannerList {
    padding-top: 10px;
}

div#sidebar ul.bannerList li {
    padding-bottom: 5px;
}

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

Vậy là ta đã hoàn thành xong phần sidebar