Tìm hiểu trang single phần 2

Chào mừng bạn đã quay trở lại với dự an ebook hướng dẫn thiết kế theme wordpress của fcwordpress.net

Hôm nay chúng ta sẽ tiếp tục phần 2 của bài tìm hiểu về trang single

Nôi dung của bài hôm nay:

1.Thanh tag: thanh này là nơi chứa các tag của các bài viết

2.Bài xem nhiều nhất: hiển thị top 3 bài viết được độc giả xem nhiều nhất cho tới thời điểm hiện tại

3.Bài viết cùng chuyên mục và banner quảng cáo: hiển thị các bài viết có cùng chuyên mục với bài viết hiện tại người dùng đang xem

Bạn xem hình dưới đây( là phần mà chúng ta cùng nhau đi tìm hiểu)

Tìm hiểu về trang single

1.Thanh tag

Mã html:

[php]


[/php]

Mã css:

[php]
tags_bar{float:left; width:100%; margin:10px 0;}
[/php]

2.Bài xem nhiều nhất:
Mã html:

[php]


[/php]

Mã css:

[php]
/*Feature post*/
.feature{ float:left; margin-bottom:20px;}
.feature a{color:#fff}
.feature ul{list-style:none;padding:0}
.feature ul li{padding:0 0 0 2px;float:left;clear:none;width:205px}
.feature .item-content{background:transparent}
.feature .item-thumbnail{background:transparent}
.feature .item-content img{width:205px;height:180px}
.feature .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
.feature ul li:first-child{height:180px!important;width:205px!important;padding:0px 0 0!important}
.feature ul li:first-child img{height:180px!important;width:205px!important}
[/php]

3.Bài viết cùng chuyên mục và banner quảng cáo

Phần html:

[php]


[/php]

Phần css:

[php]
post_in_a_category{float:left; width:100%; margin-top:10px;}
.post_in_a_category h3{float:left; width:100%; color:#005fa6; margin-bottom:10px; font-size:16px;}
.feature h3{float:left; width:100%; color:#005fa6; margin-bottom:10px; font-size:16px;}
.post_in_a_category .post_in_a_category_left{float:left; width:50%}
.post_in_a_category .post_in_a_category_right{float:left; width:50%;}
.post_in_a_category .post_in_a_category_left ul{}
.post_in_a_category .post_in_a_category_left li{ list-style:none; background:url(images/bullet-xanh.png) no-repeat 0px 5px; padding-left:10px; margin-bottom:7px;}
.post_in_a_category .post_in_a_category_left ul li:hover{ list-style:none; background:url(images/bullet-nau.png) no-repeat 0px 5px; padding-left:10px; margin-bottom:7px;}
.post_in_a_category .post_in_a_category_left ul li a{}
[/php]

Phần luận: Hôm nay tôi sẽ không nói về css, phần code trên theo nghĩ thì bạn có thể hiểu được, mà tôi sẽ nói về layout một webiste, vâng layout là bước đầu tiên mà người lập trình html phải suy nghĩ.

 Layout có quan trọng không?

Nó rất là quan trọng vì nếu bạn layout không tốt sẽ dẫn đến vỡ trang, điều này thì không tốt, Người ta dùng kỹ thuật css nào đây layout?

Để layout thành công bạn cần nắm rõ  float và width, margin, padding, clear. Đây là vấn đề then chót trong layout website bằng css.

Float và clear thì đã có bài tôi đã nói, bạn đọc lại bài cũ nhé. Trong một trình duyệt kích thước của trang sẽ bằng width+margin+padding+boder cái này bạn cần nắm vững để tránh vỡ

Đó là những kỹ thuật cơ bản mà bạn cần nắm để layout thành công một trang

Đến đây tôi xin tạm dừng tại đậy và hẹn gặp lại bạn ở bài tiếp theo

 

4.8/5 (16 Đánh giá)

Gửi Phản Hồi
Chọn đánh giá của bạn
0 Bình Luận
Thông tin người gửi
Anh Chị


Form đăng ký nhận bài mới

Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Super-flatsome

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

  • Fcwordpress trên facebook Fcwordpress trên Twitter Fcwordpress trên youtube

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress

0912889416