Question

您好我正在尝试在我的主页上制作与http://www.adventurelink.com/Gallery/Destination.com相同的第二个导航栏。

我有第一个（顶部导航栏和文本），但第二个文本（链接）只位于下面，我不知道为什么我复制并粘贴更改“id”名称的代码。目前我只是在添加真实内容之前设置布局，但需要先对其进行排序。任何帮助将不胜感激。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>website</title>

            <link href="file:///C|/Users/Deniz/Desktop/Website/css/2nd.css" rel="stylesheet" type="text/css"/>
    </head>

        <body>
<!--TOP NAVIGATION BAR AND LOGO-->
            <div id="topnavbar">
            <div id="logo"></div>
                <nav id="topnavlinks">
                    <ul>
                        <li><a href="about.html">About</a></li>
                        <li><a href="#.html">Profile</a></li>
                        <li><a href="signup.html">Sign Up</a></li>
                        <li><a href="login.html">Login</a></li>

                    </ul>
                </nav>
            </div>
<!--SPACE FOR CHANGING PICTURES-->
            <div id="picspace"></div>
<!--BOTTOM NAVIGATION BAR-->
            <div id="botnavbar"></div>
                <nav id="botnavlinks">
                    <ul>
                        <li><a href="destinations.html">Destinations</a></li>
                        <li><a href="#.html">Activities</a></li>
                        <li><a href="#.html">Things to do</a></li>
                        <li><a href="#.html">Accomodation</a></li>
                        <li><a href="#.html">Transport</a></li>

                    </ul>
                </nav>
<!--CONTENT---->
            <div id="content"></div>
<!--FOOTER-->
            <div id="footer"></div>
        </body>
</html>

CSS：

 * {
margin:0px;
}
#topnavbar{
height:50px;
margin:0 auto;
background: -webkit-linear-gradient(#e78869, #ad4e2f); /* For Safari */
background: -o-linear-gradient(#e78869, #ad4e2f); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e78869, #ad4e2f); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e78869, #ad4e2f); /* Standard syntax (must be last) */
}
#topnavlinks{
    width:500px;
float:right;
margin: 0 auto;
}
#topnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#topnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#topnavlinks li a:link, a:visited{
display:block;
color:#fff;
padding:10px;
text-decoration:none;
}
#topnavlinks li a:hover{
background-color:#6880af;
}
#logo{
}
#picspace{
height:400px;
background-color:grey;
}
#botnavbar{
height:50px;
background: -webkit-linear-gradient(#6880af, #314a79); /* For Safari */
background: -o-linear-gradient(#6880af, #314a79); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#6880af, #314a79); /* For Firefox 3.6 to 15 */
background: linear-gradient(#6880af, #314a79); /* Standard syntax (must be last) */
}
#botnavlinks{
width:500px;
float:right;
margin: 0 auto;
}
#botnavlinks ul{
margin: 0 auto;
list-style:none;
height:35px;
}
#botnavlinks li{
margin: 0 auto;
height:35px;
float:left;
}
#botnavlinks li a:link, a:visited{
display:block;
color:black;
padding:10px;
text-decoration:none;
}
#botnavlinks li a:hover{
background-color:#e78869;
}
#content{
height:500px;
background-color:grey;
}
#footer{
}

Answer 1

它仍然需要更多样式，但原因是因为在botnavbar中，在将链接放入其中之前关闭了div。

<!--BOTTOM NAVIGATION BAR-->
        <div id="botnavbar"></div>  <!-- here, this shouldn't be closed yet -->
            <nav id="botnavlinks">
                <ul>
                    <li><a href="destinations.html">Destinations</a></li>
                    <li><a href="#.html">Activities</a></li>
                    <li><a href="#.html">Things to do</a></li>
                    <li><a href="#.html">Accomodation</a></li>
                    <li><a href="#.html">Transport</a></li>

                </ul>
            </nav>

您创建了“botnavbar”并立即关闭了该div，因此链接不会在该栏内。只需向下移动</div>。

<!--BOTTOM NAVIGATION BAR-->
        <div id="botnavbar">
            <nav id="botnavlinks">
                <ul>
                    <li><a href="destinations.html">Destinations</a></li>
                    <li><a href="#.html">Activities</a></li>
                    <li><a href="#.html">Things to do</a></li>
                    <li><a href="#.html">Accomodation</a></li>
                    <li><a href="#.html">Transport</a></li>
                </ul>
            </nav>
         </div>

文本不会在第二个导航栏上对齐

1 个答案: