需要一些导航栏和我的登录按钮（html，css，js）的建议

时间：2018-01-31 16:18:09

标签： javascript html css

我正在制作一个小项目，所以我可以学习网页开发，但我现在有点困难。我做了一个导航栏（还没有工作），并且有一个名为“home，play，login，donate”的按钮，所以我有一个用户名和密码等登录按钮的表单。我想这样做的时候我按下登录按钮，表单显示在一个小框中，你可以输入它，它不需要工作，我的意思是PHP等。是否有任何地方我可以阅读更多关于这一点并学习或者是否有人可以给我一个例子并告诉我如何制作它。谢谢你会很感激！

html {
  box-sizing: border-box;
  font-family: sans-serif;
}

ul {
  position: :fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

form {
  border: 2px solid #111;
}

input[type=text],
input[type=password] {
  width: 90%;
  padding: 10px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid gray;
}

button {
  background-color: gray;
  color: white;
  padding: 7px 10px;
  margin: 8px 0;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}
<html lang="en">

<head>
  <title>Game project</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/project001.css">
  <link rel="stylesheet" href="css/normalize.min.css">

</head>

<body>

  <nav>
    <ul>
      <li><a id="home" href="#">Home</a></li>
      <li><a id="play" href="#">Play</a></li>
      <li style="float:right"><a id="login" href="#">Login</a></li>
      <li style="float:right"><a id="donate" href="#">Donate</a></li>
  </nav>

  <form>
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required><br>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required><br>

    <button type="submit">Login</button>
    <button type="button">Cancel</button>
  </form>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="project.js"></script>

</body>

</html>

1 个答案:

答案 0 :(得分：0)

尝试以下代码段。我使用过bootstrap导航栏，你可以在他们的文档中引用

https://getbootstrap.com/docs/4.0/components/navbar/

并在导航栏中附加了一个模态登录按钮。

https://getbootstrap.com/docs/4.0/components/modal/

我在代码中进一步评论了更好的理解。

＆＃13;
＆＃13; 
<!--Insert bootstrap cdn to your html-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<!--Navigation bar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
    <!--Navigation items-->
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Play</a>
      <!--Insert a modal into login-->
      <a class="nav-item nav-link" href="#" data-toggle="modal" data-target="#exampleModal">Login</a>
      <a class="nav-item nav-link" href="#">Donate</a>
    </div>
  </div>
</nav>

<!--Modal-->
<!--Refering the data-target "exampleModal" in the nav bar-->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <label>Username:</label>
        <input type="text" placeholder="Username"><br><br>

        <label>Password:</label>
        <input type="password" placeholder="password">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Login</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<!--Bootstrap 4 scripts-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

没有引导程序

＆＃13;
＆＃13; 
/* This script supports IE9+ */
(function() {
  /* Opening modal window function */
  function openModal() {
    /* Get trigger element */
    var modalTrigger = document.getElementsByClassName('jsModalTrigger');

    /* Set onclick event handler for all trigger elements */
    for (var i = 0; i < modalTrigger.length; i++) {
      modalTrigger[i].onclick = function() {
        var target = this.getAttribute('href').substr(1);
        var modalWindow = document.getElementById(target);

        modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';
      }
    }
  }

  function closeModal() {
    /* Get close button */
    var closeButton = document.getElementsByClassName('jsModalClose');
    var closeOverlay = document.getElementsByClassName('jsOverlay');

    /* Set onclick event handler for close buttons */
    for (var i = 0; i < closeButton.length; i++) {
      closeButton[i].onclick = function() {
        var modalWindow = this.parentNode.parentNode;

        modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }

    /* Set onclick event handler for modal overlay */
    for (var i = 0; i < closeOverlay.length; i++) {
      closeOverlay[i].onclick = function() {
        var modalWindow = this.parentNode;

        modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }

  }

  /* Handling domready event IE9+ */
  function ready(fn) {
    if (document.readyState != 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }

  /* Triggering modal window function after dom ready */
  ready(openModal);
  ready(closeModal);
}());
＆＃13; 
html {
  box-sizing: border-box;
  font-family: sans-serif;
}

ul {
  position: :fixed;
  width: 100%;
  top: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

form {
  border: 2px solid #111;
}

input[type=text],
input[type=password] {
  width: 90%;
  padding: 10px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid gray;
}

button {
  background-color: gray;
  color: white;
  padding: 7px 10px;
  margin: 8px 0;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 30px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s linear 0.1s, opacity 0.3s ease;
  transition: visibility 0s linear 0.1s, opacity 0.3s ease;
}

.modal.open {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 21;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  outline: none;
  background: none;
  font-size: 24px;
  color: #747474;
  font-weight: bold;
}

.modal__close:hover {
  color: #000;
}

.modal__container {
  position: relative;
  z-index: 22;
  width: 400px;
  height: 200px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-box-shadow: 0 0 10px #fff;
  box-shadow: 0 0 10px #fff;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
  text-align: center;
}
＆＃13; 
<html lang="en">

<head>
  <title>Game project</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/project001.css">
  <link rel="stylesheet" href="css/normalize.min.css">

</head>

<body>

  <nav>
    <ul>
      <li><a id="home" href="#">Home</a></li>
      <li><a id="play" href="#">Play</a></li>
      <li style="float:right">
        <a id="popup" class="jsModalTrigger" href="#jsModal">Login</a></li>
      <li style="float:right"><a id="donate" href="#">Donate</a></li>
    </ul>
  </nav>

  <div id="jsModal" class="modal">
    <div class="modal__overlay jsOverlay"></div>
    <div class="modal__container">
      <form>
        <label><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required><br>

        <label><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required><br>

        <button type="submit">Login</button>
        <button type="button">Cancel</button>
      </form>

      <button class="modal__close jsModalClose">&#10005;</button>
    </div>
  </div>





  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="project.js"></script>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题