Podoba mi się, jak Facebook utrzymuje ten pasek narzędzi na dole strony.Jak Facebook utrzymuje ten pasek narzędzi na dole strony?
Czy to wymaga umiejętności ninja w przeglądarkach?
Ich pliki są bardzo duże, dlatego trudno jest zawęzić implementację (w celach edukacyjnych).
Możesz osiągnąć efekt with CSS.
Oto podstawowy przykład. Nie, nie wymaga ninja skillz z przeglądarką. =)
<!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>
jest to, w jaki sposób zostały one dokładnie wdrożone? (na wysokim poziomie) – mrblah
To ta sama koncepcja, tak. –
Najlepiej zainstalować Firebug i zobaczyć, jak to zrobili. Kiedy widzę ciekawe rzeczy w Internecie, Firebug jest najlepszym sposobem analizy jego struktury HTML, załączonego CSS i można nawet bezpośrednio modyfikować strukturę CSS/HTML, aby zobaczyć, jak się zmienia. Wszystko, co widzisz na stronie internetowej, można po prostu przeczytać. Pamiętaj, że źródło (HTML, CSS, JavaScript) zostanie dostarczone wraz z nim :)
To rozwiązanie nie działa dobrze na stronach, które mają zawartość rozciągającą się poza dolną krawędź okna przeglądarki.
Spróbuj coś takiego zamiast:
<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>
Wygląda na to, że Twój kod został zjedzony. Użyj przycisku "kod" (1010), aby go zawinąć, aby nie zniknął. –
Masz na myśli, jak one umieścić go w dolnej części okna, lub w jaki sposób oni sprawiają, że pobyt tam przez wiele żądań stron? –
w jaki sposób umieszczają go na dole strony. Nie zdawałem sobie sprawy, że nie ładuje się ponownie po przejściu na inną stronę? – mrblah
W większości przypadków nie. Używają sztuczek ajaxowych dla tej części. –