Twitter像固定标头 [英] Twitter like fixed header
本文介绍了Twitter像固定标头的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何创建一个固定的标题,例如页面顶部的Twitter / Facebook?
How to create a fixed header like Twitter/Facebook on the top of the page ?
我正在测试这个,但是当我调整浏览器大小时,完成设计扭曲
I am testing with this but when I am resizing my browser, complete design distorted
<div id="head">
<div id="logo">
<a href="#"></a>
</div>
<div style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</div>
<ul>
<li>
<a href="#" title="Home">Home</a>
<li>
<li>
<a href="#" title="Profile">Profile</a>
</li>
<li>
<a href="#" title="Profile">Actions</a>
</li>
<li>
<a href="#" title="Profile">Invite Friends</a>
</li>
</ul>
</div>
<div id="content">
</div>
样式
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
min-width:960px;
overflow:hidden;
padding:0;
margin:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("2.gif") no-repeat scroll 6px 2px transparent;
color: #FFFFFF;
display: block;
height: 100%;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 5px 4px 26px;
width: 215px;
float:right;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:660px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:10px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }
编辑
http://jsfiddle.net/zerotoinfinite2006/tTmSH/embedded/result/
推荐答案
您的 #head
元素需要具有固定的位置使它浮在顶部。这将使它保持在顶部所有的时间。尝试使用此
Your #head
element needs to have fixed positioning to make it float at the top. This will make it stay at the top all of the time. Try using this
#head {
position:fixed;
margin:0px;
top:0px;
left:0px;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
这篇关于Twitter像固定标头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文