Nội dung bài viết
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:
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ó
1 2 |
<div class="go-top" id="message"><a href="#">Scroll to top</a></div> <!--scroll--> |
1 |
#message a{display:block;display:none;z-index:999;opacity:.8;position:fixed;top:100%;margin-top:-75px;left:50%;margin-left:-90px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:8px 40px 10px;background-color:#000;font-size:18px;text-align:center;color:#fff} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(function () { var scroll_timer; var displayed = false; var $message = $('#message a'); var $window = $(window); var top = $(document.body).children(0).position().top; $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { if($window.scrollTop() <= top) { displayed = false; $message.fadeOut(500); } else if(displayed == false) { displayed = true; $message.stop(true, true).show().click(function () { $message.fadeOut(500); }); } }, 100); }); }); |
footer là nơi chứa các thông tin như địa chỉ, số điện thoại, email…
1 2 3 4 5 |
<div class="footer"> <p style="text-align: center;">© 2012-<a href="http:https://fcwordpress.net">Theme wordpress viet-Một sản phẩm của fcwordpress.net</a> | Liên hệ:<a href="mailto:nguyentantung@gmail.com?Subject=Chủ đề của bạn"> nguyentantung@gmail.com</a></p> <p style="text-align: center;">Xem tốt nhất bằng firefox, ở chế độ phân giải (1024x768)</p> </div> |
1 2 3 4 |
.footer{ margin:20px auto;width:980px; background:#FFF; } |
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.
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
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Theme wordpress viet <link href="style.css" rel="stylesheet" media="screen" /> </head> <body> Nội dung ở đây </body> Nên đặt mã js ở đây </html> |
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
1 |
<link href="style.css" rel="stylesheet" media="screen" /> |
Tất cả mã lệnh css sẽ được chứa trong file style.css
1 2 |
<div class="header"></div> <!--end header--> |
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
1 2 3 |
<div class="bar_search_social"> </div> <!--end bar_search_social--> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="wrapper_topmenu_banner_body"> <div class="topmenu"> <div class="body"> <div class="body-left"> <div class="body-right"></div> <!--end body-right--> <div class="clear"><!--nothing--></div> <!--end clear--> </div> <!--end body--> <div class="clear"><!--nothing--></div> <!--end clear--> </div> <!--end wrapper_topmenu_banner_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 …
1 2 |
<div class='clear'><!--nothing--> </div><!--end 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
1 |
<div class="footer"></div><!--end footer--> |
1 2 |
<div class="go-top" id="message"><a href="#">Scroll to top</a></div> <!--scroll--> |
1 2 3 4 5 |
<script src='js/jquery1.8.3.js'></script> <script src='js/topmenu.js'></script> <script src='js/tab.js'></script> <script src='js/fade.js'></script> <script src='js/scroll.js'></script> |
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
Bình luận
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