Как Facebook сохраняет ту панель инструментов внизу страницы?

Я столкнулся с подобной проблемой, но я просто поднял очень короткое консольное приложение на C++, чтобы сделать то же самое. Просто выполненный MySleep.exe 1000 - возможно, легче, чем загрузка/установка целого набора ресурса.

#include <tchar.h>
#include <stdio.h>
#include "Windows.h"

int _tmain(int argc, _TCHAR* argv[])
{
    if (argc == 2)
    {
        _tprintf(_T("Sleeping for %s ms\n"), argv[1]);
        Sleep(_tstoi(argv[1]));
    }
    else
    {
        _tprintf(_T("Wrong number of arguments.\n"));
    }
    return 0;
}
7
задан Peter Mortensen 29 December 2009 в 09:38
поделиться

4 ответа

Вы можете добиться эффекта с помощью CSS .

8
ответ дан 6 December 2019 в 19:40
поделиться

Лучшее - установить Firebug и посмотреть, как они это сделали. Когда я вижу интересные вещи в Интернете, Firebug - лучший способ проанализировать его структуру HTML, прикрепленный CSS, и вы даже можете напрямую изменить структуру CSS / HTML, чтобы увидеть, как она меняется. Все, что вы видите на веб-сайте, можно просто прочитать. Помните, что исходный код (HTML, CSS, JavaScript) доставляется вместе с ним :)

1
ответ дан 6 December 2019 в 19:40
поделиться

Вот простой пример. Нет, это не требует навыков кросс-браузерного ниндзя. =)

<!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>
4
ответ дан 6 December 2019 в 19:40
поделиться

Это решение не работает для страниц, содержание которых выходит за пределы нижней части окна браузера.

Попробуйте вместо этого что-нибудь вроде этого:

<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
ответ дан 6 December 2019 в 19:40
поделиться
Другие вопросы по тегам:

Похожие вопросы: