Tìm hiểu phần Scroll to top, footer và tổng kết trang index.html

loading...

Chào mừng bạn đã quay trở lại dự án ebook hướng dẫn thiết kế theme wordpress, hôm nay chúng ta sẽ đi nghiên cứu nút scroll to top, footer và tổng kết lại trang index.html của chúng ta:

1.Scroll to top:

nút này nhằm giúp cho người xem web chuyển lên đầu trang một cách nhanh chóng.
Sau đây là code của nó

Phần html

Phần css

Phần jquery

2.Phần footer:

footer là nơi chứa các thông tin như địa chỉ, số điện thoại, email…

Phần html:

Phần css

Phần luận:

Hôm nay chúng ta sẽ đi tìm hiểu về sự khác nhau giữa id và class trong css
ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Phần tổng kết trang index.html

Tổng kết trang index

Bạn nhìn vào hình trên là toàn bộ code được tôi thu gọn để bạn dễ hình dung, bất cứ một trang html cũng phải có các thành phần sau

Như vậy trang chủ của chúng có thành phần:
Đầu tiên để gọi thư viện css của chúng ta dùng lệnh

Tất cả mã lệnh css sẽ được chứa trong file style.css

Header:Chứa logo, slogan và banner quảng cáo

logo

bạn nên tập thói quen end ở mỗi div lớn để dễ theo dỏi sau này, để sau này chúng ta có nâng cấp nó thì dễ kiểm soát hơn

Thanh menu page:Chứa menu các trang page trong wordpress(các trang ít thay đổi, sau này khi đi viết mã theme thì chúng ta sẽ nói rõ hơn), nút social network, và form tìm kiếm

menu page

Phần body

wrapper_topmenu_banner_body: anh này có vai tro để bao giữ các div topmenu, body
topmenu: chứa menu top
body: sẽ phân ra thành hai phần phần bên trái chứa các bài viết giới thiệu và phần bên trái chứa các thành phần như, tab các loại bài viết, đăng ký nhận tin, plugin facebook …

div clear

Đây là một kỹ thuật phổ biến được dùng trong css giúp cho div chứa các thành phần bao lấy các div con của nó, nếu không có div clear này nó sẽ đứng đập lập mà không bao lấy

Footer: Chứa thông tin về bản quyền, các thông tin liên lạc

phan footer

Nút go top

Mã js:

Các mã js nên đặt ở cuối trang, bạn cũng có thể đặt ở đầu trang nhưng sẽ không tối ưu
Như vây chúng ta đã hoàn thành trang index, với những gì đã cùng nhau đi tìm hiểu tôi hi vọng sẽ giúp được phần nhỏ cho bạn trong việc học html, css, jquery
Xin tạm dừng tại đây, hẹn gặp bạn ở bài tiếp theo của dự án

Cập nhật bài viết mới qua Email


Theo dõi tôi
Đăng ký nhận tin mới
đăng ký nhận tin mới

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

Các functions thường dùng

  • Hotline: 0912 889 416

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