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

11/01/2013 03:12 4011

Nội dung bài viết

1.Scroll to top:
2.Phần footer:
- Phần html:
- Phần css
Phần luận:
Phần tổng kết trang index.html

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

<div class="go-top" id="message"><a href="#">Scroll to top</a></div>
<!--scroll-->

1 2	<div class="go-top" id="message"><a href="#">Scroll to top</a></div> <!--scroll-->

Phần css

#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	#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}

Phần jquery

$(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() &lt;= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});

$(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);

});

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:

<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>

<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>

Phần css

.footer{
margin:20px auto;width:980px;
background:#FFF;
}

.footer{

margin:20px auto;width:980px;

background:#FFF;

}

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

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

<!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>

<!DOCTYPE html>

<html>

<head>

Theme wordpress viet

</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

	<link href="style.css" rel="stylesheet" media="screen" />

1	<link href="style.css" rel="stylesheet" media="screen" />

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

<div class="header"></div>
<!--end header-->

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

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

<div class="bar_search_social">
</div>
<!--end bar_search_social-->

</div>

Phần body

<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-->

</div>

</div>

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

<div class='clear'><!--nothing-->
</div><!--end clear-->

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

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

<div class="footer"></div><!--end footer-->

1	<div class="footer"></div><!--end footer-->

Nút go top

<div class="go-top" id="message"><a href="#">Scroll to top</a></div>
<!--scroll-->

1 2	<div class="go-top" id="message"><a href="#">Scroll to top</a></div> <!--scroll-->

Mã js:

<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

5/5 (9 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Giới thiệu và hướng dẫn sử dụng code xem video haivl [ 13/03/2019 06:15 ]
Giới thiệu khóa học làm chủ công nghệ Responsive Design [ 07/01/2015 03:05 ]
Thiết kế theme wordpress phần 8 [ 05/01/2014 09:02 ]
Thiết kế theme wordpress phần 7 [ 28/12/2013 16:02 ]
Thiết kế theme wordpress phần 6 [ 26/12/2013 15:26 ]
Thiết kế theme wordpress phần 5 [ 23/12/2013 13:25 ]
Thiết kế theme wordpress-phần 4 [ 21/12/2013 14:50 ]
Thiết kế theme wordpress-Phần 3 [ 05/03/2013 03:17 ]
Thiết kế theme wordpress-phần 2 [ 01/03/2013 07:28 ]
Thiết kế theme wordpress-phần 1 [ 27/02/2013 04:22 ]

Bình luận

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

1.Scroll to top:

Phần html

Phần css

Phần jquery

2.Phần footer:

Phần html:

Phần css

Phần luận:

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

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

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

Phần body

div clear

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

Nút go top

Mã js:

có thể bạn cần xem:

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

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)

Custom header và custom background- tạo tùy biến logo nền banner của header và tùy biến nền body

Import mã css, js vào head của admin bằng wp_enqueue_style và wp_enqueue_script

Tìm hiểu function add_action trong wordpress