主页 / user-478008

user9988899's questions

Martin Hope
user9988899
Asked: 2022-06-01 01:44:52 +0000 UTC
  • 0

我想在 HTML（通过复选框）和 CSS/SASS/SCSS 中制作一个简单的手风琴，但在某处我犯了一个错误，我认为在 CSS 中，因此，当您单击“标题”时（参见代码） ，该段落不可见。我在哪里做错了？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>#</title>
</head>
<body>
    <div>
        <input class="input" type="checkbox">
        <label class="label" for="input">Заголовок</label>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum hic 
            veniam illum delectus! Quisquam consequuntur aspernatur facilis quod fugiat, 
            quia odio alias illum temporibus suscipit! Neque possimus nemo ex!
        </p>
    </div>
</body>
</html>

CSS：

div {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
.input {
     position: absolute;
     opacity: 0;
     z-index: -1;
}
.label {
    text-align: left;
    font-family: sans-serif;
    background-color: red;
    display: block;
    padding: 5px;
    margin-bottom: 0px;
}
.label:hover {
    cursor: pointer;
}
p {
    text-align: justify;
    font-family: sans-serif;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    margin-top: 0px;
    display: none;
}
.input:checked ~ p {
    display: block;
}
html
Martin Hope
user9988899
Asked: 2022-05-30 22:31:20 +0000 UTC
  • 0

我想专门用 HTML 和 CSS/SCSS/SASS 创建一个全屏菜单。我理解原理，但在某个地方我在实现中犯了一个错误：调节全屏菜单块显示的复选框根本不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
      z-index: 1;
    }
    
    div {
      background-color: black;
      overflow: hidden;
      visibility: hidden;
      width: 100vw;
      height: 100vh;
      top: 0px;
      left: 0px;
      z-index: 2;
    }
    
    input {
      visibility: visible;
      z-index: 3;
    }
    
    input:checked~div {
      visibility: visible;
    }
  </style>
</head>

<body>
  <div>
    <!-- Полноэкранный блок -->
    <input type="checkbox">
    <!-- Добавляю кнопку для изменения отображения полноэкранного блока -->
  </div>
</body>

</html>

html