固定標題與滾動內容？和小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問題

回答

相關問題