Question

如何修复标题并将内容滚动到标题下？另外，我如何让CSS Play按钮位于线上并看起来不错？

的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

Answer 1

当用户滚动时，您可以使用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创建游戏三角形，对吧？你可能最好只使用background-image，比如

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

播放按钮。

修复了滚动内容的标题？而小css问题

1 个答案: