1. Trang chủ
  2. Câu hỏi và trả lời
  3. Tạo thanh công cụ tĩnh trên trang web theo sau cuộn trong HTML

Tạo thanh công cụ tĩnh trên trang web theo sau cuộn trong HTML

2010-05-12 71 views

Trả lời

16

css

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

html

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

Nguồn

2010-05-12 02:19:32 Gabriel

+0

sẽ không chặn nội dung này bên dưới nó? –

10

Bạn có cần nó để cuộn (animate) hoặc chỉ một đối tượng tĩnh (thanh công cụ)?

EDIT:

Ok như vậy để thêm một tĩnh (thanh công cụ tương tự) đối tượng đó có chiều rộng là 100% of the page, và chiều cao nói 25px, bạn sẽ làm điều này.

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 */ 
}

Xin lưu ý rằng điều này có thể chồng chéo bất kỳ nội dung mà bạn có ở phía trên cùng của trang, vì vậy sử dụng một lề trên để đẩy nó xuống dưới thanh công cụ hoặc chỉ cần đặt:

body { 
    margin-top: 35px; 
}

Nguồn

2010-05-12 02:16:23 Marko

+0

tĩnh (thanh công cụ như) –

+0

Tôi không thấy câu trả lời khác - xin lỗi vì bài đăng kép. – Marko

+0

Đó là ok, câu trả lời của bạn sẽ giúp tôi với lợi nhuận mặc dù vậy cảm ơn vì điều đó! –

0

đây là một ý tưởng. nhưng thanh công cụ này là ở phía dưới do đó hãy chắc chắn rằng bạn thay thế bottom: 100%; với 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>

có một vài thiếu hình ảnh để thay thế chúng với những gì bạn muốn.

hy vọng bạn thích mã! (mã dành cho trang chủ trên chương trình windows vista của tôi trong html tôi đang làm việc.)

Nguồn

2016-02-15 16:03:42 Minegamer5570

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

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