Как сделать панель инструментов, подобную объекту в HTML, которая следует за прокруткой пользователя, чтобы она всегда находилась в верхней части страницы с возможностью просмотра?Создать статическую панель инструментов на веб-странице, которая следует за прокруткой в HTML
Заранее благодарен!
CSS
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
HTML
<div class="selector">
... content for bar here ...
</div>
Вам это нужно, чтобы прокручивать (оживлять) или просто статический объект (например, панель инструментов)?
EDIT:
Ok так, чтобы добавить статический объект (панель инструментов, как), который имеет ширину, которая 100% страницы, а высота сказать 25px, вы могли бы сделать это.
HTML
<div id="toolbar">
<p>Some content...</p>
</div>
CSS
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
Пожалуйста, обратите внимание, что это может перекрываться любое содержание, которое вы имеете в верхней части страницы, поэтому используйте верхнее поле, чтобы подтолкнуть ее вниз под панелью инструментов или просто установить:
body {
margin-top: 35px;
}
static (панель инструментов) –
Я не видел другого ответа - извините за двойной пост. – Marko
Это нормально, ваш ответ действительно помогает мне с пометкой, хотя так спасибо за это! –
вот идея. но панель задач находится в нижней части поэтому убедитесь, что вы замените bottom: 100%; с position: fixed;
<html>
<head>
<title>
home - windows vista v 1.0
</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
bottom:100%;
}
</style>
<style>
#toolbar {
bottom: 100%;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
</style>
</head>
<body bgcolor="lime">
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="selector">
<div class="dropdown">
<span><img src="start button vista.png" width="50" height="50"></span>
<div class="dropdown-content">
<h1>Liam</h1>
<p>
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
</p>
</div>
</div>
</div>
</html>
</body>
</html>там пару недостающих изображений так заменить их, что вы хотите.
надеюсь, вам понравится код! (код для главной страницы моей программы windows vista в html, над которой я работаю.)
не будет содержать это содержимое блока под ним? –