0
我做了一個導航欄在引導與一個按鈕，鏈接到另一個頁面，您可以登錄（我仍然在該登錄部分工作）但只要我把鏈接（HREF）按鈕之間的整個導航欄變得混亂。我可以顯示用例圖的引導搞砸了鏈接按鈕
- 這是正常的版本：http://prntscr.com/cq09nx
- 這是搞砸版本：http://prntscr.com/cq09io
我只是無法弄清楚如何便又得到它。 下面是HTML代碼：
body {
margin: 0;
padding: 0;
background-color: #42A2CE;
}
::selection {
background: white;
}
@font-face {
font-family: "Nexa Light";
src: url('../font/Nexa%20Light.otf');
}
@font-face {
font-family: "Lato-Bold";
src: url('../font/Lato-Bold.ttf');
}
.navbar-default {
position: relative;
font-family: "Lato-Bold";
background-color: white;
box-shadow: 20px;
padding: 15px;
border-radius: 0;
border: none;
font-size: 25px;
-webkit-box-shadow: 0 12px 8px -6px #999;
-moz-box-shadow: 0 12px 8px -6px #999;
box-shadow: 0 12px 8px -6px #999;
}
.navbar-header {
right: auto;
}
.navbar-nav > li {} .navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: black;
font-size: 30px;
}
.navbar-default .navbar-nav > li > a {
color: black;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: black;
opacity: 0.5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: black;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #FFF;
}
.navbar-default .navbar-toggle {
background-color: grey;
}
.icon-bar {} .navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: rgb(44, 44, 45);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #FFF;
}
.col-md-5 {
font-family: "Lato-Bold";
padding: 10px;
color: white;
font-size: 20px;
}
.col-md-12 {
font-family: "Lato-Bold";
height: 520px;
padding: 10px;
color: white;
}
.navbar-collapse {
border: 0px;
}
.navbar-default .navbar-collapse {
color: #e7e7e7;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}
.dropdown-menu {
background-color: transparent;
;
text-decoration-color: black;
}
.dropdown-toggle {
background-color: transparent;
color: black;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a,
.navbar-default .navbar-nav .open .dropdown-menu {
background-color: black;
color: white;
}
.dropdown-menu:hover {
color: rgb(44, 44, 45);
}
.img-responsive {
text-align: right;
max-width: 100%;
width: 200px;
height: 200px;
}
#footer {
height: 200px;
color: lightgrey;
}
.link {
text-decoration: none;
color: lightgrey;
}
.link:hover {
color: yellow;
text-decoration: none;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
padding: 10px 16px;
}
.btn-lg {
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-primary.raised {
box-shadow: 0 3px 0 0 #007299;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
background: #33a6cc;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}
.btn-primary {
background: #0099cc;
color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background: #33a6cc;
}
.btn-primary:active,
.btn-primary.active {
background: #007299;
box-shadow: none;
}
.btn-primary.raised:active,
.btn-primary.raised.active {
background: #33a6cc;
box-shadow: none;
margin-bottom: -3px;
margin-top: 3px;
}
.navbar-right {
padding-right: 100px;
}
.navbar-brand {
padding-left: 50px;
}
.img-responsive {
display: block;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Niet beschikbaar</title>
<link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
<!-- -->
<a class="navbar-brand" href="#">
Logo
</a>
<!-- Inklappbaar ding als je op mobiel zit-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- menu eitems linker kant-->
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="paginas/overmij/index.html">Over mij</a>
</li>
<li><a href="#">Contact</a>
</li>
<!-- Dropdown -->
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Profiel</a></li>
<li><a href="#">Instellingen</a></li>
</ul>
</li>
-->
<li>
<a href="paginas/login/index.html">
<button type="button" class="btn btn-primary btn-lg raised">Aanmelden</button>
</a>
</li>
</ul>
<!-- Aan de rechterkant -->
</nav>
<!-- EINDE NAVIAGTIE BALK-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-5 col-md-offset-2">
<h1 class="titel">Deze website is helaas nog niet beschikbaar</h1>
Er word momenteel gewerkt aan deze website. Probeer op een later moment terug te komen. Er wordt echt heel erg hard gewerkt aan deze website, zo hard zelfs dat het waarschijnelijk nooit af komt. Maar dat boeit niemand want niemand bezoekt deze website.
Deze website is alleen bekeken door mensen die ik ken. Want niemand is geintresseert in mijn website wat ik heel klote vindt. Wat ik ook niet begrijp is dat je nog door leest
<br>
<br>Rainier,
<img src="img/Maintance.png" class="img-responsive" alt="" style="float:right" />
<br>
<br>
<!--
</div>
</div>
</body>
</html>
我只是在引導，你可以告訴一個初學者。我希望你們能幫我解決這個問題。謝謝你在前進
雷尼爾，
您在導航欄中未關閉div標籤，以及在給定的代碼3未封閉的股利。 –
讓我知道下面的答案是否適合你。 –