Question

如何在HTML中创建一个类似于HTML的对象工具栏，以便它始终位于可查看页面的顶部？

提前致谢！

Answer 1

CSS

.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

HTML

<div class="selector">
  ... content for bar here ...
</div>

Answer 2

你是否特别需要它来滚动（动画）或只是静态（像工具栏一样）对象？

编辑：

好的，为了添加一个宽度为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;
}

Answer 3

这是一个想法。但此任务栏位于底部，因此请务必将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>

有一些丢失的图像，所以用你想要的东西替换它们。

希望你喜欢这些代码！（该代码用于我正在处理的html中的windows vista程序主页。）

在HTML页面上滚动后的网页上创建静态工具栏

3 个答案: