Блог

Главная - Вопросы по программированию - существует родинка, которую я не сделал

существует родинка, которую я не сделал

#html #css #navigation #styles

Вопрос:

Я оставил вопрос, потому что увидел странный текст(родинку) во время кодирования.

Вышеуказанная проблема возникла при написании кода для меню навигации и подменю. Если вы посмотрите на часть магазина в навигационном меню, там есть родинка, и я хотел бы, чтобы вы помогли мне понять, какая часть кода вызвала родинку.

И поскольку положение прямоугольника подменю смещено вправо, какую часть кода следует изменить, чтобы выровнять верхнее меню и середину, как показано на рисунке ниже?

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

заранее благодарю вас !

 $(window).load(function() {
  $(document).ready(function() {
    var a = 3;
    $('.random').draggable({
      start: function(event, ui) {
        $(this).css("z-index", a  );
      }
    });
    $('body div').click(function() {
      $(this).addClass('top').removeClass('bottom');
      $(this).siblings().removeClass('top').addClass('bottom');
      $(this).css("z-index", a  );

    });
  });
});

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    const top = Math.floor(Math.random() * (height - 30)   1)   "px";
    const right = Math.floor(Math.random() * (width - 30)   1)   "px";

    box.style.top = top;
    box.style.right = right;
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i  ) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

//draggable

function mouseDown(downEvent) {
  var box = downEvent.srcElement;
  var offX = box.getBoundingClientRect().left - downEvent.x;
  var offY = box.getBoundingClientRect().top - downEvent.y;
  document.onmousemove = e => {
    box.style.top = Math.min(Math.max(e.y   offY, 0), height)   "px";
    box.style.left = Math.min(Math.max(e.x   offX, 0), width)   "px";
  }
  document.onmouseup = e => {
    document.onmousemove = document.onmouseup = null;
  }
  return false;
}

Array.from(boxes).forEach(box => {
  box.onmousedown = mouseDown;
})


//호버 혹은 클릭 시, div 컬러 변화

$(".music").hover(
  function() {
    $(this).addClass("hover");
  },
  function() {
    $(this).removeClass("hover");
  }
);

$(".music").click(function() {
  $('#result').load('album_list_index.php');
  $(".music").removeClass("active");
  $(this).removeClass("hover").addClass("active");
}); 
 body {
  margin: 0px;
}

button {
  position: relative;
  width: 30px;
  height: 30px;
  background: #edd6bc;
  border: none;
}

.random {
  position: absolute;
  width: 30px;
  height: 30px;
  cursor: move;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

header {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr 1.2fr;
  grid-template-areas: "logo nav" "logo notice";
}

.logo {
  border: 1px solid black;
  grid-area: logo;
}

nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: nav;
}

.notice {
  grid-area: notice;
  border: 1px solid black;
  padding: 10px;
  margin-top: -1px;
  margin-left: -1px;
}

nav a {
  padding: 37px;
  text-align: center;
}

nav a:nth-child(n 2) {
  margin-left: -1px;
}

li {
  margin-bottom: ;
  padding: 37px;
  text-align: center;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav li>ul {
  display: none;
  background-color: #bbb;
}

nav li>ul li {
  display: block;
}

nav li>ul li a {
  color: #111;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav li:hover {
  background-color: ;
}

nav li:hover>ul {
  position: absolute;
  display: block;
}

main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

main>div {
  padding: 10px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
}

.active {
  background: #edd6bc
}

.hover {
  background: #edd6bc
} 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<div class="container">
  <header>

    <div class="logo" style="display: flex;">
      <img style="width: 70%; margin: auto;" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">
    </div>

    <nav>

      <a href="#" style="margin-left: -1px; border: 1px solid black;" class="music">About</a>

      <a href="#" style="border: 1px solid black;" class="music">Exibition</a>

      <li style="border: 1px solid black; margin-left: -1px;" class="music">
        <a href="#">Shop</a>
        <ul>
          <li a href="#">리플랫</li>
          <li a href="#">작품</li>
          <li a href="#">MD</li>
        </ul>
      </li>


      <a></a>

      <a></a>

      <div style="display: flex; border: 1px solid black;">
        <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></div>

      <a href="#" style="border: 1px solid black;" class="music">En</a>

    </nav>

    <div class="notice">( Current Exhibition | 2021.06.11-07.03 ) 젤다 킨
      <미끈한 반쪽> 전</div>

  </header>


  <div style="display: none; background: #6d97b4;" class="random"></div>

  <div style="display: none; background: #c9656f;" class="random"></div>

  <div style="display: none; background: #f1eb40;" class="random"></div>

  <div style="display: none; background: #00825c;" class="random"></div>

  <div style="display: none; background: #009ce0;" class="random"></div>

  <div style="display: none; background: #cee4a6;" class="random"></div>



</div>

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

1. Что вы имеете в виду под «кротом»? Насколько я знаю, крот-это маленькое животное, которое живет под поверхностью и роется в земле.

2. Я хочу написать точку (.) вокруг текста «магазин». извините за мой перевод

Ответ №1:

Если вы хотите удалить точку из ссылки на магазин, вы можете определить list-style: none или опустить внешнюю <li> , что было бы лучше, потому что вокруг нее нет списка, подобного <ul> :

 li.music {
  list-style: none;
}

Рабочий пример:

 $(window).load(function() {
  $(document).ready(function() {
    var a = 3;
    $('.random').draggable({
      start: function(event, ui) {
        $(this).css("z-index", a  );
      }
    });
    $('body div').click(function() {
      $(this).addClass('top').removeClass('bottom');
      $(this).siblings().removeClass('top').addClass('bottom');
      $(this).css("z-index", a  );

    });
  });
});

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    const top = Math.floor(Math.random() * (height - 30)   1)   "px";
    const right = Math.floor(Math.random() * (width - 30)   1)   "px";

    box.style.top = top;
    box.style.right = right;
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i  ) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

//draggable

function mouseDown(downEvent) {
  var box = downEvent.srcElement;
  var offX = box.getBoundingClientRect().left - downEvent.x;
  var offY = box.getBoundingClientRect().top - downEvent.y;
  document.onmousemove = e => {
    box.style.top = Math.min(Math.max(e.y   offY, 0), height)   "px";
    box.style.left = Math.min(Math.max(e.x   offX, 0), width)   "px";
  }
  document.onmouseup = e => {
    document.onmousemove = document.onmouseup = null;
  }
  return false;
}

Array.from(boxes).forEach(box => {
  box.onmousedown = mouseDown;
})


//호버 혹은 클릭 시, div 컬러 변화

$(".music").hover(
  function() {
    $(this).addClass("hover");
  },
  function() {
    $(this).removeClass("hover");
  }
);

$(".music").click(function() {
  $('#result').load('album_list_index.php');
  $(".music").removeClass("active");
  $(this).removeClass("hover").addClass("active");
}); 
 body {
  margin: 0px;
}

button {
  position: relative;
  width: 30px;
  height: 30px;
  background: #edd6bc;
  border: none;
}

.random {
  position: absolute;
  width: 30px;
  height: 30px;
  cursor: move;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

header {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr 1.2fr;
  grid-template-areas: "logo nav" "logo notice";
}

.logo {
  border: 1px solid black;
  grid-area: logo;
}

nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: nav;
}

.notice {
  grid-area: notice;
  border: 1px solid black;
  padding: 10px;
  margin-top: -1px;
  margin-left: -1px;
}

nav a {
  padding: 37px;
  text-align: center;
}

nav a:nth-child(n 2) {
  margin-left: -1px;
}

li {
  margin-bottom: ;
  padding: 37px;
  text-align: center;
}

li.music, 
nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav li>ul {
  display: none;
  background-color: #bbb;
}

nav li>ul li {
  display: block;
}

nav li>ul li a {
  color: #111;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav li:hover {
  background-color: ;
}

nav li:hover>ul {
  position: absolute;
  display: block;
}

main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

main>div {
  padding: 10px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
}

.active {
  background: #edd6bc
}

.hover {
  background: #edd6bc
} 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<div class="container">
  <header>

    <div class="logo" style="display: flex;">
      <img style="width: 70%; margin: auto;" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">
    </div>

    <nav>

      <a href="#" style="margin-left: -1px; border: 1px solid black;" class="music">About</a>

      <a href="#" style="border: 1px solid black;" class="music">Exibition</a>

      <li style="border: 1px solid black; margin-left: -1px;" class="music">
        <a href="#">Shop</a>
        <ul>
          <li a href="#">리플랫</li>
          <li a href="#">작품</li>
          <li a href="#">MD</li>
        </ul>
      </li>


      <a></a>

      <a></a>

      <div style="display: flex; border: 1px solid black;">
        <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></div>

      <a href="#" style="border: 1px solid black;" class="music">En</a>

    </nav>

    <div class="notice">( Current Exhibition | 2021.06.11-07.03 ) 젤다 킨
      <미끈한 반쪽> 전</div>

  </header>


  <div style="display: none; background: #6d97b4;" class="random"></div>

  <div style="display: none; background: #c9656f;" class="random"></div>

  <div style="display: none; background: #f1eb40;" class="random"></div>

  <div style="display: none; background: #00825c;" class="random"></div>

  <div style="display: none; background: #009ce0;" class="random"></div>

  <div style="display: none; background: #cee4a6;" class="random"></div>



</div>
Метки: ,