Блог

Главная - Вопросы по программированию - Почему мои элементы привязки оформлены неправильно?

Почему мои элементы привязки оформлены неправильно?

#html #css

#HTML #css

Вопрос:

У меня проблема с кодом гиперссылки. Я использовал a для создания гиперссылки, но она подключается к css панели навигации, и кнопка теперь такая же, как кнопки панели навигации.

введите описание изображения здесь

Обведенные красным — это гиперссылки, которые я хочу изменить, но они подключаются к css панели навигации и теперь остаются такими же. Я попытался присвоить ему класс, но он не работал.

 a {
  margin: 0;
  border: 1vw;
  padding: 0.5vw;
  text-decoration: none;
  color: black;
  font-family: Kanit;
  outline: solid;
  outline-color: #00b7ff;
  outline-width: 1px;
  border-radius: 4px;
  transition: background-color 0.3s ease-out;
}

a:hover {
  background-color: #00b7ff;
}

li {
  text-align: center;
  align-content: center;
  margin: 0.75vw;
  font-size: 1.5vh;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav {
  position: relative;
  top: 10px;
  display: flex;
  height: min-content;
  width: max-content;
  background-color: transparent;
}

body {
  margin: 0;
}

@media only screen and (max-width: 500px) {
  ul {
    flex-direction: column;
  }
  li {
    margin: 0;
  }
  a {
    display: block;
  }
  button {
    display: block;
    padding: 1vw;
    font-size: 1.5vh;
    border: none;
    outline: none;
    cursor: pointer;
    align-self: flex-start;
  }
}

button {
  display: none;
} 
 <head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title> QuadroStudios </title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='./css/home.css'>
  <!-- <script src='main.js'></script> -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="home.html"> QuadroStudios </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="home.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="update.html"> Updates </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="leaks.html"> Leaks </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="about.html"> About </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <style>
    body {
      background-color: #212529;
      overflow-x: hidden;
    }
    
    .about {
      position: relative;
      top: 25px;
      left: 10px;
      color: white;
    }
    
    .title {
      color: white;
      font-size: 25px;
      font-family: Inconsolata;
    }
    
    .storehauled {
      position: relative;
      top: 100px;
      left: 30px;
      color: white;
      ;
      font-size: 20px;
      font-family: Inconsolata;
    }
  </style>

  <div class="about">
    <h1 class="title"> Here you can find info about our games and what QuadroStudios is about! </h1>

  </div>

  <div class="storehauled">
    <p> Storehauled <br> On Roblox: <a class="robloxgame" href="https://www.roblox.com/games/6258825725"> Roblox Game </a> <br> Released: 1/18/2021 <br>
      <br> Current status: Remaking [in Beta] <br>
      <br> Progress: <br> UI - Completed <br> Map - Mostly completed [70%] <br> Users: Brony#0445 Babushka_OP#6118 <br> Trello board: <a class="trello" href="https://trello.com/b/WzuH9IK3"> Trello of the Game</a> <br> Early access release: Late Q4 2021
      - Beta is the last part of closed development. We'll let you know when you can access the game freely. <br>
      <br> Teasers of the game: <br>
      <br> The park is the most chilling place in here... <br>
      <br>
      <img src="teaser1.png">

    </p>
  </div>


</body>

Комментарии:

1. Я не понимаю вашего вопроса. CSS, который вы показали, не предназначен для панели навигации. Это для всех элементов привязки. Пожалуйста, пересмотрите, чтобы было более ясно, чего вы ожидаете и почему.

2. Если вы хотите стилизовать только те якоря внутри панели навигации, вам нужно будет использовать селектор-потомок , например .navbar a .

Ответ №1:

поехали :

ДЕМОНСТРАЦИЯ

HTML :

         <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>QuadroStudios</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" media="screen" href="about.css" />
  <!-- <script src='main.js'></script> -->
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
  />
</head>

<style>
  body {
    background-color: #212529;
    overflow-x: hidden;
  }
  .about {
    position: relative;
    top: 25px;
    left: 10px;
    color: white;
  }

  .title {
    color: white;
    font-size: 25px;
    font-family: Inconsolata;
  }

  .storehauled {
    position: relative;
    top: 100px;
    left: 30px;
    color: white;
    font-size: 20px;
    font-family: Inconsolata;
  }
</style>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="home.html"> QuadroStudios </a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="home.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="update.html"> Updates </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="leaks.html"> Leaks </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="about.html">
              About
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="about">
    <h1 class="title">
      Here you can find info about our games and what QuadroStudios is about!
    </h1>
  </div>

  <div class="storehauled">
    <p>
      Storehauled <br />
      On Roblox:
      <a class="robloxgame" href="https://www.roblox.com/games/6258825725">
        Roblox Game
      </a>
      <br />
      Released: 1/18/2021 <br />
      <br />
      Current status: Remaking [in Beta] <br />
      <br />
      Progress: <br />
      UI - Completed <br />
      Map - Mostly completed [70%] <br />
      Users: Brony#0445 Babushka_OP#6118 <br />
      Trello board:
      <a class="trello" href="https://trello.com/b/WzuH9IK3">
        Trello of the Game</a
      >
      <br />
      Early access release: Late Q4 2021 - Beta is the last part of closed
      development. We'll let you know when you can access the game freely.
      <br />
      <br />
      Teasers of the game: <br />
      <br />
      The park is the most chilling place in here... <br />
      <br />
      <img src="teaser1.png" />
    </p>
  </div>
</body>

css

     .storehauled a {
  position: relative;
  text-decoration: none;
  color: white;
}

.storehauled a:hover {
  color: #00b7ff;
}

li {
  text-align: center;
  align-content: center;
  margin: 0.75vw;
  font-size: 1.5vh;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav {
  position: relative;
  top: 10px;
  display: flex;
  height: min-content;
  width: max-content;
  background-color: transparent;
}

@media only screen and (max-width: 500px) {
  ul {
    flex-direction: column;
  }
  li {
    margin: 0;
  }
  a {
    display: block;
  }
  button {
    display: block;
    padding: 1vw;
    font-size: 1.5vh;
    border: none;
    outline: none;
    cursor: pointer;
    align-self: flex-start;
  }
}

button {
  display: none;
}

Комментарии:

1. Я сделал, но это все то же самое. Гиперссылка по-прежнему соединяется с css панели навигации.

2. что вы подразумеваете под подключенным?

3. У вас есть discord или что-нибудь еще для общения?

4. уверен: shahemm #3253

Метки: