我对整个HTML和CSS还是陌生的,但是到目前为止一切都还不错。

现在,我需要将标题保持在顶部,因此当向下滚动时,它将停留在顶部,而其他内容将一直滚动通过。

我一直在谷歌搜索和搜索很多,但找不到最佳解决方案,希望您能为我提供帮助!

仅供参考,我正在使用960网格。

这是代码:

    <div class="container_12">
    <header class="fixed">
        <img src="img/logolangt.jpg" alt="MB it logo" class="grid_12"/>
        <nav class="grid_12" id="mainnav">
            <ul>
                <li><a href="index.html" class="selected">Services</a></li>
                <li><a href="career.html">Career</a></li>
                <li><a href="clients.html">Clients</a></li>
                <li><a href="about us.html">About</a></li>
            </ul>
        </nav>
        <nav class="grid_12" id="servicesnav">
            <ul>
                <li><a href="#">HCM</a></li>
                <li><a href="#">SAP</a></li>
                <li><a href="#">SuccessFactors</a></li>
                <li><a href="#">Support</a></li>
            </ul>
        </nav>
    </header>


这是CSS代码:

    .container_12 {
background: white;
}

/*
**************
* =header
**************
*/

header img {
padding: 20px 0 20px 20px;
}

/*
**************
* =mainnav
**************
*/

#mainnav {
top: -3px;
background-color: #26719b;
font-size: 1.8em;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
position:relative;
height:40px;
font-family: "Segoe UI";
padding: 0 0 0 20px;
text-align: center;
border-radius: 10px;
}


#mainnav ul li {
margin-right: 50px;
text-align: center;
display: inline;
}

#mainnav li a {
color: white;
text-decoration: none;
text-align: center;
padding: 1px 16px 8px 16px;
}
nav li {
display: inline;
}

#mainnav li a:hover, .selected {
background: #f7a634;
border-radius: 5px;
}


/*
**************
* =subnavs
**************
*/

#servicesnav, #careernav, #clientsnav, #aboutnav  {
font-size: 1.3em;
font-weight: bold;
background-color: #f7a634;
width: 430px;
height: 31px;
display: inline-block;
padding-top: 4px;
margin-top: -3px;
border-radius: 10px;
}

#servicesnav li a {
color: white;
text-decoration: none;
}

#servicesnav ul li {
padding-top: 20px;
}

#careernav {
margin-left: 180px;
}

#careernav li a {
color: white;
text-decoration: none;
}

#careernav ul li {
padding-top: 20px;
margin-left: 80px;
}

#clientsnav {
margin-left: 360px;
}

#clientsnav li a {
color: white;
text-decoration: none;
}

#clientsnav ul li {
padding-top: 20px;
margin-left: 90px;
}

#aboutnav {
margin-left: 520px;
}

#aboutnav li a {
color: white;
text-decoration: none;
}

#aboutnav ul li {
padding-top: 20px;
margin-left: 54px;
}

/*
**************
* =general
**************
*/

p, h1, h2, h3 {
font-family: "Segoe UI", sans-serif;
}

.sections h2 {
text-align: center;
font-weight: bold;
font-size: 1.6em
}

/*
**************
* =main
**************
*/
.main .grid_8 {
margin-top: 20px;
}


/*
**************
* =services-->
**************
*/

#hcm, #sap, #successfactors, #support {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#sap {
background-color: #f7a634;
}


 #successfactors {
background-color: #26719b;
}


#support {
background-color: #f7a634;
}

/*
**************
* =career-->
**************
*/

#workingat, #jobs {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#jobs {
background-color: #f7a634;
}

/*
**************
* =clients-->
**************
*/

#clients, #testimonials {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
 }


#testimonials {
background-color: #f7a634;
}

/*
**************
* =aboutus-->
**************
*/

#values, #partnerships, #contact {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}


#partnerships {
background-color: #f7a634;
}


 #contact {
background-color: #26719b;


非常感谢你!

-编辑以包含更多CSS代码-

最佳答案

您只需要将其放入CSS中即可。

#mainnav {
    position:fixed;
}


看一下http://jsfiddle.net/qxXXw/,您可能还想看一下http://www.w3schools.com/css/css_positioning.asp以便对css的位置有更好的了解,我知道一开始我花了一段时间才弄清楚。

关于html - 如何在内部导航中获取固定的标题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20115491/

10-10 23:34
查看更多