shaidullin2h's questions

大家好。对不起，如果这是一个愚蠢的问题，但我无法弄清楚标题

需要将文本在屏幕宽度上拉伸 100%，当我根据布局设置 line-height 时，它会超出边缘，如果你查看元素代码，那么最后会有一个边距标题，下划线在屏幕上可见，没有空格。

<header class="header">
        <div class="title">
            <h1>PORTFOLIO</h1>
        </div>
    </header>

CSS下面

.wrap {
    margin-left: 100px;
    margin-right: 100px;
    font-family: 'Bebas Neue', cursive;
    border: 1px solid black;
}

.header {
    max-width: 100%;
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    
    
}

.title {
    width: 100%;
    display: flex;
}

.title h1 {
    letter-spacing: 154px;
    font-size: 128px;
    text-decoration: underline;
    
    
}

我问这个问题。。有一个选设备的小网站，大概有2页，客户根据标准选择他的产品，然后收到一份制定的文件。该页面是用 PHP Laravel 编写的，并且已经托管，连接到数据库。问题是是否可以关闭对站点的访问并显示具有授权/注册的页面，即 在客户登录之前，他将无法访问选择页面。我没有找到这个问题的答案，也许有人遇到过，能告诉我可以使用什么工具吗？

有一个带有导航菜单的标题，当您将鼠标悬停在项目上时，带有子项目的块会退出，在悬停的帮助下退出。

您需要将此下拉块拉伸到全宽，如果将宽度设置为 100%，则此块超出页面边界。只有在负值 left 的帮助下才能定位，但也许有不同的选择来实现这一点？我正在寻找以下结果：

<header class="header">
        <div class="logo">
        </div>

        
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 2</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 3</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 4</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 5</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
          </ul>
        </nav>  
        <!-- HAMBURGER MENU BEGIN -->
          <div class="burger-menu">
            <a href="#" class="burger-menu__button">
              <span class="burger-menu__lines"></span>
            </a>
            <nav class="burger-menu__nav"> <!--menu-->
              <ul>
                <input type="radio" name="menu" id="one" checked>
                <li>
                  <label for="one" class="title"><i class="fa fa-folder"></i>Пункт 1</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="two">
                <li>
                  <label for="two" class="title"><i class="fa fa-edit"></i>Пункт 2</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="three">
                <li>
                  <label for="three" class="title"><i class="fa fa-gavel"></i>Пункт 3</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="four">
                <li>
                  <label for="four" class="title"><i class="fa fa-gears"></i>Пункт 4</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="five">
                <li>
                  <label for="five" class="title"><i class="fa fa-gears"></i>Пункт 5</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
              </ul>
            </nav>
              
              
              <!-- <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asda</a>
              <a href="" class="burger-menu__link">a</a>
              <a href="" class="burger-menu__link">aa</a> -->
            </nav>

            <div class="burger-menu__overlay">

            </div>
          </div>
        <!-- HAMBURGER MENU END -->

      </header>

CSS 代码

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
  }
  .list__links {
    display: flex;
    width: 362px;
    height: 159px;
    
    flex-wrap: wrap;
    flex-direction: column;
  }
  .logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
  }
  
  .menu a {
    text-decoration: none;
  }
  
  .menu li {
    list-style: none;
    position: relative;
    margin-bottom: 30px;
    margin-right: 142px;
  }
  
  .menu__list {
    display: flex;
  }
  
  .menu__list>li {
    margin: 0 5px;
  }
  
  .menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  
  .menu__link {
    font-size: 1.6vw;
    color: #fff;
  }
  
  .menu__link:hover + .sub-menu__list,
  .sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    margin-top: 3px;
  }
  
  .sub-menu__list {
    
    height: 288px;
    display: none;
    
    position: absolute;
    left: 0;
    top: 16px;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    width: calc(100vw - 550px); 
    justify-content: space-between;
  }
  

  
  .sub-menu__link {
    color: white;
    transition: .4s;
    &:hover {
        color:#75FF72;
        transition: .4s;
        ;
    }
  }


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

向所有人致敬，有这样一个标题，在它下面有一个猫头鹰旋转木马滑块

当您单击任何项​​目时，应该可以使用多级菜单。页面变暗，菜单显示为带有子项的附加块。

（以红色突出显示出现的块）尝试通过列表中的列表和添加悬停来实现，但在出现时无法定位块。手风琴位置不正确。有人面临这样的工作，你能告诉我如何实现这样的菜单吗？什么可以更好地使用？

<!-- HEADER BEGIN -->
    <header class="header">
        <div class="logo">
        </div>
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
          </ul>
          
        </nav>
        

        
    </header>
    <!-- HEADER END -->

scss

.header {
font-weight: 500;
width: 100%;
min-height: 198px;
max-height: 288px;
color: white;



display: flex;
flex-direction: row;
align-items: center;
background-color: #000000;
font-size: 16px;
font-family: 'M PLUS 1p', sans-serif;


.logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
}

.menu {
    a {
        text-decoration: none;
    }
    li {
        list-style: none;
        position: relative;
    }
}

.menu__list {
    display: flex;
    >li {
        margin: 0px 10px 0px 0px;
        &:hover .sub-menu__list {
            
            display: flex;
            height: 90px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: column;
        }
    }
}

.menu__link {
    color: #fff;
}

.sub-menu__list {
    display: none;
    position: absolute;
    left: 0;
    top: 15px;
    min-width: 400px;
    padding: 20px 0px 0px 0px;
    .sub-menu__list >li {
        background-color: #fff;
        margin: 142px;
    }
}

.sub-menu__link {
    
    color: #c91616;
}

}

//

我起身解决一个问题，似乎没有那么复杂，但我找不到解决方案。

页面有产品卡片 1 行 4 张卡片，宽度为 1600px，第一张和最后一张卡片应该没有侧面缩进。尝试使用 display:flex 和 justify-content space-between。但是在添加产品卡片时（假设总共会有 6 张卡片（4-第一行，2-第二行））。因为卡片之间的空间没有对齐。

<div className="projects">
    <h1>Проекты</h1>
    <div className="projects-container">
      <div className="card"> 
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      
    </div>
    <span>Все проекты →</span>

  </div>

CSS 代码：

.projects-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-flow: wrap;
  .card {
    width: 360px;
    height: 675px;
    background-color: bisque;
    margin-top: 30px;
    p{
      color:#FFF;
      font-size: 24px;
    }
    span{
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px;
    }
  }
}

朋友们。遇到这样的问题，解决不了，只有position:fixed，但不需要fixed header。我不知道如何正确地提出这个问题，所以我将说明：它对我来说是如何变成的，下面，根据需要。

标题必须位于带有信息的块的背景上。

HTML 标题：

<header className="header">
    <span className="logo">LOGO</span>
    <nav className="nav-items">
      <ul className="ul-items">
        <li>О нас</li>
        <li>Услуги</li>
        <li>Портфолио</li>
        <li>Награды</li>
      </ul>
    </nav>
    <span className="phone">+800 000 0000</span>      
  </header>


.header {
  color:#FFF;
  padding-top: 32px;  
  max-width: 1600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
    .logo{
      margin-left: 95px;
      font-size: 36px;
    }
    .phone{
      margin-right: 95px;
      font-size: 24px;
    }
    
    z-index: 999;
  }




.ul-items {
  li{
    list-style-type: none;
    font-size: 20px;
    display: inline;
    padding: 50px;
  }
}