Ссылка на домашнюю страницу направлена ​​на несколько иной вид, чем ссылка на панель навигации с тем же идентификатором - PullRequest
Новая
       0

Ссылка на домашнюю страницу направлена ​​на несколько иной вид, чем ссылка на панель навигации с тем же идентификатором

1 голос
/ 12 марта 2020

ЗДЕСЬ ПОДАРОК ​​ВЫПУСКА: https://drive.google.com/file/d/1FeolD7n7dVcenSd9KGS0CQqFgObT3DIW/view?usp=sharing

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* HOME */
.section1 {
  background: url(https://lh3.googleusercontent.com/hgveWXe-BA71HBB7f-uhYvrM3ajVU2nQ4ctdnThLx_APZA2KKm08VVtDp7Ye36S2SA89dXi1k-YXwqRJA0VE79DtfaeTUO10uNUxmzPyDptQnyierMtfLnFHapAeApHp_BhKUI1c3RfSVLb5JLblTp-u_J9MgyLYwlQsieLWg7qyrlEJXfq9PrMEAGpe_7TGLBanqexvVMznP2kRayt3D9KFjAC3sVriaCFMBjIXamXLyQuHkBV6iuv3vomn6eeUK0kU5fxovvOhMNmjfsQ8pw8q79Xl7b09o0Jm4ZRje9R7Bf4T6eNlTJ3moKW8omrJK_No7SDOOXdSKCQVmhK7KhFkQWvhV_cvbOWqqiIH8fBzunSjQQ1x_1Y-3nuCMh9Eo2OJLatMShAYfQYABPv-I7Fo4ydBJdc2YUXncZsPcuIEyXJ0IC-zCZp7Ti3KaLNK7_lsoc1-Vvqqnl1R72fyiMbftDi8SxJMTuRUPrb9-e8Iu0cyBdA4Lq0QfnOMGct-XX3b7tvbjh53LfvEBfNSTqqpTlbSlIWl0BRsqReniXo9Ug-sskzQ17uScMkfAd5eg1zJa-3HCgF0WemlWdiHGhIRRv7VAcKsHLd4Gal-FphKzQkOjE_iLn4Gce1ZTnze2-eng5W_dgPS0YHSyrapdHM3i4P2PITyNYVuMWKWxH7MR7WCQdGycg=w878-h560-no) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.section1 .container {
  background-color: rgb(0, 0, 0, 0.65);
  min-height: -webkit-fill-available;
  min-width: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-btn {
  background-color: transparent;
  font-weight: 500;
  border-color: #8e0000;
  border-radius: 3px;
  color: #8e0000;
  margin-top: 35px;
  font-size: 1.12em;
  transform:translate(-50%, -50%);
  position: absolute;
}

/* hover styling required !important */
.home-btn:hover {
  color: #8e0000 !important;
  border-color: #8e0000;
  font-size: 1.4em;
  border-width: 3px;
  font-weight: 600;
}

.intro {
  color: white;
  font-size: 2.74em;
}

.highlight {
  color: #8e0000;
}

/* NAVIGATION */
#navbar {
  background-color: #333;
  border-bottom: 6px solid #011936;
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
}


/* ABOUT */
.section2 {
  padding: 135px 0px 50px 0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
<!doctype html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Information meta tags -->
  <meta name="description" content="A portfolio page for Bernard Major">
  <meta http-equiv="author" content="King Major">
  <!--LOCAL-->
  <!-- <link rel="stylesheet" type="text/css" href="assets/css/reset.css"> -->
  <!-- Bootstrap CSS HOSTED-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!--LOCAL-->
  <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <!-- FAVICON -->
  <!-- <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
  <link rel="manifest" href="/site.webmanifest"/>
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
  <meta name="msapplication-TileColor" content="#da532c"/>
  <meta name="theme-color" content="#ffffff"/> -->
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <title>King Major</title>
</head>

<body>

<!-- HOME -->
  <section id="home" class="section1">
    <div class='container'>
      <div class="row justify-content-center">
        <div class="col-md-12 col-sm-12">
          <p class='intro'>
            Hello, I'm <span class="highlight animated fadeIn"
              style="animation-delay: 1s; animation-duration: 1.8s">Bernard</span>.
            <br>
            <div class="intro animated fadeInLeft" style="animation-delay: 3s; animation-                   duration: 2s">And I'm a full-stack web developer.</div>
            <a href="#about"><button type="button" class="home-btn btn btn-primary-outline                   btn-xs animated fadeIn" style="animation-delay: 5s; animation-duration: 2s">VIEW               MY WORK</button></a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- NAVIGATION -->
  <div id="navbar">
    <div class="navbar-text">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </div>
  </div>


  <!-- ABOUT -->
  <section id="about" class="section2">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-12 col-sm-12">
          <div class="card text-center">
            <div class="card-block">
              <div class="card-title">
                <h1>Welcome!</h1>
              </div>
              <div>
                <p>I started independent web development two years ago, and haven't looked back. One thing I love about
                  coding is that moment when a tough project is complete, or even when I find a solution to a difficult
                  problem. Take a look, and don't hesitate to click the contact me link above.
                  <span class="thanks">THANKS!</span>
                </p>
              </div>
              <a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print My Resume</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <!-- PROJECTS -->
  <section id="projects" class="section3">
    <div class="container">
      <div class="row justify-content-center">
        <h1>My Recent Projects</h1>
          <p class="works-description">These are all self-directed projects. You can find more              work on my
            <a href="https://github.com/KingdomB">Github</a>. Below are just some of my most
               recent works. <a href="http://www.fromgaming.com/contact.html">Let me know if                  you have any questions!</a>
          </p>
        <div class="row justify-content-center">
          <div class="col-md-5 col-sm-12">
            <div class="card text-center">
              <div class="card-block">
                <div class="card-title">
                  Title 1
                </div>
                <div class="card-text">
                  I am trying anything.I am trying anything.I am trying anything.I am trying                     anything.
                </div>
                <a href="#" class="btn btn-success">click here</a>
                <a href="#" class="btn btn-success">click here</a>
              </div>
            </div>
          </div>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktfadeIn"
        style="animation-delay: 5j0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
  <script src="assets/js/app.js"></script>
</body>

</html>

Я всегда начинаю с моего нового ie заявления об отказе от ответственности, я новичок в программировании, поэтому, пожалуйста, не обращайте на меня внимания.

Проблема заключается в том, что когда я нажимаю ссылку «Просмотр моей работы» в разделе «Мой домашний сайт», я получаю другое представление, чем при нажатии ссылки навигационной панели на тот же раздел «О программе» с использованием того же идентификатора в моем разметки.

Проведя некоторые исследования на моем последнем сайте, я узнал, что мне нужно было добавить верхнюю часть отступа к разделам, которые я хотел отображать, без липкой панели навигации, скрывающей представление контента, когда я использовал панель навигации с фиксированной вершиной из Bootstrap3. , Я думаю.

Я использую Bootstrap 4 на этот раз, или, по крайней мере, это то, что я пытаюсь сделать. С помощью липкой навигационной панели при прокрутке я добавил отступ, и он также помогает, просто не работает со ссылкой из моего домашнего просмотра.

вот сайт: Развертывание репозитория GitHub Pages

Ссылка репо: Репозиторий GitHub

Хорошо, надеюсь, я объяснил свое объяснение. Спасибо!

3/12 ОБНОВЛЕНИЕ: я заметил, что мой раздел "Home" не соответствует правильному синтаксису Bootstrap4, так что, возможно, это проблема, поскольку остальные разделы предположительно имеют синтаксис Bootstrap4. Я переработаю код и стиль, чтобы увидеть, что произойдет. ПРИМЕЧАНИЕ. Я обновил код раздела «Домашняя страница», настроил стиль и проблема не устранена. Последняя версия моего кода в списке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...