2009-07-31 23 views
7

Tôi thích cách Facebook giữ thanh công cụ đó ở cuối trang.Facebook giữ thanh công cụ đó ở cuối trang như thế nào?

Điều đó có yêu cầu kỹ năng ninja trình duyệt chéo không?

Các tệp JavaScript/CSS của chúng rất lớn nên tôi gặp khó khăn trong việc thu hẹp quá trình triển khai (cho mục đích học tập).

+0

Bạn có nghĩa là, làm thế nào để họ vị trí của nó để dưới cùng của cửa sổ, hoặc làm thế nào để họ làm cho nó ở lại đó qua nhiều yêu cầu trang? –

+0

cách đặt vị trí ở cuối trang. Tôi đã không nhận ra nó không tải lại khi bạn đi đến một trang khác? – mrblah

+0

Nó không, đối với hầu hết các phần. Họ sử dụng thủ thuật ajax cho phần đó của nó. –

Trả lời

8

Bạn có thể đạt được hiệu lực with CSS.

4

Đây là ví dụ cơ bản. Không, nó không yêu cầu skillz ninja trên trình duyệt. =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Facebook Bar</title> 
<style type="text/css"> 
body { 
margin: 0px; 
padding: 0px; 
overflow: hidden; 
} 
#page { 
margin: 10px; 
overflow: auto; 
height: 93%; 
} 
#bottom { 
width: 100%; 
background: #18f8f8; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div id="page"> 
    Other stuff on page 
</div> 
<div id="bottom">Bottom stuff goes here</div> 
</body> 
</html> 
+0

là cách chúng triển khai chính xác? (ở cấp độ cao) – mrblah

+0

Đó là cùng một khái niệm, vâng. –

1

Cách tốt nhất là cài đặt Firebug và xem chúng hoạt động như thế nào. Khi tôi thấy những điều thú vị trên web, Firebug là cách tốt nhất để phân tích cấu trúc HTML, CSS đính kèm và thậm chí bạn có thể sửa đổi trực tiếp cấu trúc CSS/HTML để xem nó thay đổi như thế nào. Mọi thứ bạn thấy trên một trang web có thể được đọc một cách đơn giản. Hãy nhớ rằng, nguồn (HTML, CSS, JavaScript) được phân phối cùng với nó :)

0

Giải pháp đó không hoạt động tốt cho các trang có nội dung mở rộng ra ngoài phần dưới cùng của cửa sổ trình duyệt.

Hãy thử một cái gì đó giống như thay vì điều này:

<div style="display: block; 
position: fixed; 
text-align: center; 
    z-index:1000; 
bottom: 0; 
left: 0; 
width: 100%; 
color: #999999; 
clear: both; 
height: 15px; 
border-top-style: solid; 
border-top-width: 1px; 
border-top-color: #b5b6b5; 
background-repeat: repeat-x; 
border-right-style: solid; 
border-left-style: solid; 
border-right-width: 1px; 
border-left-width: 1px; 
border-right-color: #b5b6b5; 
border-left-color: #b5b6b5; 
background-color: #e7e7e7;"></div> 
+0

Có vẻ như mã của bạn đã bị ăn. Sử dụng nút "mã" (1010) để bọc nó để nó không biến mất. –

Các vấn đề liên quan