固定标题与滚动内容？和小css问题

我怎样才能使头部固定和内容滚动“标题下”？另外我怎样才能让CSS Play按钮在线以上看起来像样呢？固定标题与滚动内容？和小css问题

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>lingo records</title> 

    <meta charset="utf-8"> 
    <link rel="icon" href="/favicon.png"> 
    <link rel="author" href="http://forksforoatmeal.com"> 
    <link rel="stylesheet" href="/assets/css/lingo.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="/assets/js/jquery.jplayer.min.js"></script> 
    <script src="/assets/js/lingo.js"></script> 
</head> 
<body> 
    <div id="header"> 
     <h1 class="header">lingo records</h1> 
     <ul id="navigation"> 
      <li><a href="#home">home</a></li> 
      <li><a href="#about">about</a></li> 
      <li><a href="#samples">samples</a></li> 
      <li><a href="#contact">contact</a></li> 
     </ul> 
     <div id="music_player"> 
      <span id="pp"></span> 
      <span id="song"></span> 
     </div> 
    </div> 
    <div id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="clear">&nbsp;</div> 
    <div id="footer"> 
     &copy; 2010 lingo records. <a href="http://forksforoatmeal.com">Josh Brown</a> 
    </div> 
    </body> 
    </html>

lingo.css：提前

/* Yahoo Style Reset Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */ 
html{color:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;} 


body { 
/* background-color: #63B7D4;*/ 
    background-color: #fff; 
    margin: 30px; 
    font-family: 'Philosopher', sans-serif; 
    font-size: 14px; 
    color: #4F5155; 
} 

a { 
    color: #475152; 
    background-color: transparent; 
    font-weight: normal; 
} 


h1.header { 
    font-family: 'Philosopher', sans-serif; 
    font-size: 70px; 
    letter-spacing: -4px; 
} 

#header { 
    position: static; 
    border-bottom: 1px solid #D0D0D0; 
} 

#header #navigation a { 
    font-family: 'Philosopher', sans-serif; 
    font-size: 22px; 
    text-decoration: none; 
} 
ul#navigation > li { 
    display: inline; 
    list-style-type: none; 
    margin-right: 15px; 
} 

#header #navigation a:hover { 
    text-decoration: underline; 
} 

#header #navigation a:last-child { 
    margin-right: 0px; 
} 

#content { 
    margin-top: 60px; 
    font-size: 20px; 
} 


#footer { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    margin-bottom: 20px; 
    margin-right: 20px; 
    font-size: 12px; 
} 


/* Music Player */ 
#music_player { 
    float:right; 
    margin-right: 30px; 
    margin-bottom: 5px; 
    width: 250px; 
} 

.play { 
    display:block; 
    width:0; 
    height:0; 
    border-style:solid; 
    border-width: 8px 0px 8px 16px; 
    border-color:transparent transparent transparent #4F5155; 

} 
.pause{ 
    display:block; 
    width:16px; 
    height:16px; 
    border-left:32px double #4F5155; 
} 

@font-face { 
    font-family: Philosopher; 
    src: url(/assets/fonts/Philosopher.otf); 
    font-weight:400; 
}

感谢您的帮助！ -Josh

来源

2010-08-25 Josh Brown

您可以使用position: fixed使其在用户滚动时保持原位，尽管您可能需要应用（半透明）背景才能在用户滚动时看到标题内容。您需要添加的风格是：

#header { 
    position: fixed; 
    width: 100%; /* Or whatever width you need it to be */ 
    background-color: rgba(255, 255, 255, 0.7); /* Use semi-transparent png for IE support */ 
    top: 10px; 
} 

#content { 
    margin-top: 160px; /* To push content off the top of the page */ 
}

至于这首歌的球员，你需要提供或者链接到页面您正在使用，或某种样品，因为没有的JavaScript是不可能的看看产生了什么样的标记，以及它看起来像样的需要什么风格。

编辑：关于该音乐播放器按钮...您使用的方法在我看来有点破解。我的意思是，你必须是真的拼命需要使用border来创建play三角形吧？你可能更好使用background-image代替

#pp { 
    background: url('path/to/image.png') no-repeat scroll left top; 
    padding-left: 10px; 
}

用于播放按钮。

来源

2010-08-25 08:05:08

当我这样做时，虽然#content和#header混杂在一起。有什么建议么？ – 2010-08-25 08:09:20

这是一个模型，歌曲播放器只会在#pp中显示一个css生成的播放/暂停（.play/.pause），而javascript会将当前歌曲放到#song中。 – 2010-08-25 08:10:52

用你提供的这个结果是：http://grab.by/64cR – 2010-08-25 08:12:50

固定标题与滚动内容？和小css问题

回答

相关问题