如何让我的导航栏导向另一个页面?

时间:2017-04-06 15:56:42

标签: html css navbar brackets

所以我真的不熟悉HTML和括号,但是我有一个小导航栏。这就是它。我想问的是,当我按下栏中的一个按钮时,我该如何制作,那个按钮会导致另一个页面?这是代码:

的index.html:

    <DOCTYPE Html>
<html>
<head>
  <title>Navigation Bar</title> 
  <link rel="stylesheet" type="text/css" href="style.css">
</head>  
<body>
<div id="Maindiv">
   <div id="navdiv">

        <u1>
            <h1>The Turtle House</h1>
             <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Information</a></li>
            <li><a href="#">Care Guide</a></li>
       </u1>
    </div>    
</div>   
</body>
</html>

的style.css:

body{
    font-family: arial, sans-serif;

}
*{
    padding: 0px;
    margin: 0px;
}
#maindiv{
    width: 100%;
    height: 1000px;
    background: url(img/RiverRock.jpg) repeat;
    background-size: cover;
}
#navdiv u1{
    width: 100%;
    height: 80px;
    background: #648DA0;
    line-height: 80px;
    color: white;
    float: right;
}
#navdiv u1 a{
    text-decoration: none;
    color: white;
    padding: 20px;
}
#navdiv u1 li {
    list-style-type: none;
    display: inline-block;
    float: right;
}
#navdiv u1 li:hover{
    background: #8FB0BF;
    transition:all 0.40s;
}
#navdiv h1{
    width: 300px;
    float: left;
    cursor: pointer;
    margin-left: 15px;
}

感谢。

1 个答案:

答案 0 :(得分:1)

将页面名称放在锚点链接href:

<li><a href="Contact.html">Contact</a></li>