分类导航
程序笔记程序问答

为什么我的 css 不起作用？这个css的目的是制作一个剪切路径

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么我的 css 不起作用？这个css的目的是制作一个剪切路径，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决为什么我的 css 不起作用？这个css的目的是制作一个剪切路径？

开发过程中遇到为什么我的 css 不起作用？这个css的目的是制作一个剪切路径的问题如何解决？下面主要结合日常开发的经验，给出你关于为什么我的 css 不起作用？这个css的目的是制作一个剪切路径的解决方法建议，希望对你解决为什么我的 css 不起作用？这个css的目的是制作一个剪切路径有所启发或帮助；

这是主页代码

    <!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <title>HZ Everything Business</title>
    <link rel="stylesheet" href="home.CSS" />
    <style>
    
    
.menu {
  height: 70px;
  wIDth: 70px;
  right: 70px;
  top: 20px;
  text-align: center;
  position: absolute;
  BACkground: #fff;
  overflow: hIDden;
  Transition: all 0.2s ease;
  z-index: 999;
}
.menu.active {
  wIDth: calc(100% - 140pX);
}
.menu.active .menuContent * {
  opacity: 1;
}
.menu.active span i:nth-child(1) {
  transform: rotate(-45deg) translate(-50%,-50%);
  top: 50%;
}
.menu.active span i:nth-child(2) {
  transform: translateX(-100pX);
  opacity: 0;
}
.menu.active span i:nth-child(3) {
  transform: rotate(45deg) translate(-50%,-50%);
  top: 50%;
}
.menu span {
  wIDth: 70px;
  height: 70px;
  position: absolute;
  right: 0;
  cursor: pointer;
  BACkground: #fff;
  z-index: 1;
}
.menu span i {
  position: absolute;
  transform-origin: 50% 50%;
  wIDth: 45%;
  height: 2px;
  left: 0;
  right: 0;
  margin: auto;
  BACkground-color: #ccc;
  Transition: transform 0.3s ease,opacity 0.1s ease 0.1s;
}
.menu span i:nth-child(1) {
  top: 40%;
}
.menu span i:nth-child(2) {
  top: 50%;
}
.menu span i:nth-child(3) {
  top: 60%;
}
.menu .menuContent {
  position: absolute;
  wIDth: 100%;
  height: 100%;
  line-height: 40px;
  right: 0px;
  text-align: center;
}
.menu .menuContent * {
  opacity: 0;
}
.menu .menuContent ul li {
  display: inline-block;
  margin-left: 50px;
  margin-right: 50px;
  color: #2d3235;
  Transition: opacity 0.3s ease 0.3s;
  cursor: pointer;
  position: relative;
}
.menu .menuContent ul li:hover:before {
  opacity: 0.8;
  top: 13px;
  left: 20px;
}
.menu .menuContent ul li:hover:after {
  opacity: 0.8;
  bottom: 13px;
  left: -20px;
}
.menu .menuContent ul li:before,.menu .menuContent ul li:after {
  content: "";
  position: absolute;
  wIDth: 20px;
  height: 2px;
  BACkground: #ccc;
  Transition: all 0.3s ease;
}
.menu .menuContent ul li:before {
  transform: rotate(-55deg);
  left: 60px;
  top: -30px;
  opacity: 0;
  right: 0;
  margin: auto;
}
.menu .menuContent ul li:after {
  transform: rotate(-55deg);
  left: -60px;
  bottom: -30px;
  opacity: 0;
  right: 0;
  margin: auto;
}
  
 
    
    
    </style>
</head>
<body>
    <div class='menu'>
  <span class='toggle'>
    <i></i>
    <i></i>
    <i></i>
  </span>
  <div class='menuContent'>
    <ul>
      <li>HZ Social Media Agency</li>
      <li>HZ WEBSITE & APP DEV</li>
      <li>HZ PHOTO & VIDEO EDITinG</li>
      <li>OUR WORK</li>
    </ul>
  </div>
</div>
 
<script
  src="https://code.jquery.com/jquery-3.3.1.Js"
   ></script>
<script>
    $('.toggle').on('click',function() {
    $('.menu').toggleClass('active');
});
    
</script>

<div class="bg"></div>
</body>
</HTML>

CSS

bg {
    height: 100%;
    wIDth: 100%;
    BACkground-color: blue;
    clip-path: polygon(100% 0,100% 25%,0 90%,0 61%,0 0);
    position: absolute;
    z-index: -1;
}

我已经尝试了所有我能做的但它不起作用，我尝试更改 CSS 文件的名称，但它仍然不起作用，知道如何解决这个问题吗？我也试过把它放在“样式标签作为 bg {} 但仍然没有用，这可能与我输入链接的位置有关吗？在标题标签下？

解决方法

您需要将 . 添加到 bg 中，因为它是一个类。此外，link 是一个空标签。

.bg {
  height: 100%;
  width: 100%;
  BACkground-color: blue;
  clip-path: polygon(100% 0,100% 25%,0 90%,0 61%,0 0);
  position: absolute;
  z-index: -1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HZ Everything Business</title>
  <link rel="stylesheet" href="home.css">
  <style>
    .menu {
      height: 70px;
      width: 70px;
      right: 70px;
      top: 20px;
      text-align: center;
      position: absolute;
      BACkground: #fff;
      overflow: hidden;
      transition: all 0.2s ease;
      z-index: 999;
    }
    
    .menu.active {
      width: calc(100% - 140pX);
    }
    
    .menu.active .menuContent * {
      opacity: 1;
    }
    
    .menu.active span i:nth-child(1) {
      transform: rotate(-45deg) translate(-50%,-50%);
      top: 50%;
    }
    
    .menu.active span i:nth-child(2) {
      transform: translateX(-100pX);
      opacity: 0;
    }
    
    .menu.active span i:nth-child(3) {
      transform: rotate(45deg) translate(-50%,-50%);
      top: 50%;
    }
    
    .menu span {
      width: 70px;
      height: 70px;
      position: absolute;
      right: 0;
      cursor: pointer;
      BACkground: #fff;
      z-index: 1;
    }
    
    .menu span i {
      position: absolute;
      transform-origin: 50% 50%;
      width: 45%;
      height: 2px;
      left: 0;
      right: 0;
      margin: auto;
      BACkground-color: #ccc;
      transition: transform 0.3s ease,opacity 0.1s ease 0.1s;
    }
    
    .menu span i:nth-child(1) {
      top: 40%;
    }
    
    .menu span i:nth-child(2) {
      top: 50%;
    }
    
    .menu span i:nth-child(3) {
      top: 60%;
    }
    
    .menu .menuContent {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 40px;
      right: 0px;
      text-align: center;
    }
    
    .menu .menuContent * {
      opacity: 0;
    }
    
    .menu .menuContent ul li {
      display: inline-block;
      margin-left: 50px;
      margin-right: 50px;
      color: #2d3235;
      transition: opacity 0.3s ease 0.3s;
      cursor: pointer;
      position: relative;
    }
    
    .menu .menuContent ul li:hover:before {
      opacity: 0.8;
      top: 13px;
      left: 20px;
    }
    
    .menu .menuContent ul li:hover:after {
      opacity: 0.8;
      bottom: 13px;
      left: -20px;
    }
    
    .menu .menuContent ul li:before,.menu .menuContent ul li:after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2px;
      BACkground: #ccc;
      transition: all 0.3s ease;
    }
    
    .menu .menuContent ul li:before {
      transform: rotate(-55deg);
      left: 60px;
      top: -30px;
      opacity: 0;
      right: 0;
      margin: auto;
    }
    
    .menu .menuContent ul li:after {
      transform: rotate(-55deg);
      left: -60px;
      bottom: -30px;
      opacity: 0;
      right: 0;
      margin: auto;
    }
  </style>
</head>

<body>
  <div class='menu'>
    <span class='toggle'>
    <i></i>
    <i></i>
    <i></i>
  </span>
    <div class='menuContent'>
      <ul>
        <li>HZ Social Media Agency</li>
        <li>HZ WEBSITE & APP DEV</li>
        <li>HZ PHOTO & VIDEO EDITinG</li>
        <li>OUR WORK</li>
      </ul>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>
    $('.toggle').on('click',function() {
      $('.menu').toggleClass('active');
    });
  </script>

  <div class="bg"></div>
</body>

</html>

,

在文件夹中创建 css 文件。

在 head 部分添加指向该 css 的链接。

将版本添加到 css，以便它重新加载浏览器的更改/清除缓存。

（更多信息 - Why adding version number to CSS file path?）

例如

 <!DOCTYPE html>
  <html lang="en">
   <head>
     <meta charset="UTF-8">
      <title>HZ Everything Business</title>
       <link rel="stylesheet" type="text/css" href="./Folder_Name/home.css?v=1.1" />
      // U can change 1.1 to other numbers before refreshing page. so changes made in home.css will be reflected.
   </head>

大佬总结

以上是大佬教程为你收集整理的为什么我的 css 不起作用？这个css的目的是制作一个剪切路径全部内容，希望文章能够帮你解决为什么我的 css 不起作用？这个css的目的是制作一个剪切路径所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：css不起作用？这个css的目的是制作一个剪切路径为什么我的
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap