Html <；a>；不在内部设置样式<；李>；标记，在检查元素的CSS值时显示无效的属性值_Html_Css

Html <；a>；不在内部设置样式<；李>；标记，在检查元素的CSS值时显示无效的属性值

html css

Html <；a>；不在内部设置样式<；李>；标记，在检查元素的CSS值时显示无效的属性值,html,css,Html,Css,不知道我做错了什么。但我的样式根本不显示，而是为所有指定的值显示“无效属性值” 以下是HTML和CSS: <div> <img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg"> <div> <h2>Digital Assets For Creative Professionals</h2> </div> <div>

不知道我做错了什么。但我的样式根本不显示，而是为所有指定的值显示“无效属性值”

以下是HTML和CSS:

<div>
  <img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">
  <div>
    <h2>Digital Assets For Creative Professionals</h2>
  </div>
  <div>
    <ul>
      <li>
        <a href="" class="btn1">Photo</a>
      </li>
      <li>
        <a href="" class="btn1">Video</a>
      </li>
      <li>
        <a href="" class="btn1">Motion</a>
      </li>    
    </ul>
  </div>
</div>

h2 {
  position: absolute;
  z-index: 1;
  top: 140px;
  color: #FFF;
  padding-left: 4%;
}

ul { 
    position: absolute; 
    z-index: 1;
    top: 290px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: 10em;
}

li {
  float: left;
  padding-right: 40px
}

a.btn1 {
 display: inline-block;
 padding: 0.3em 1.2em;
 margin: 0 0.3em 0.3em 0;
 border-radius: 2em;
 box-sizing: border-box;
 text-decoration: none;
 font-weight: 300;
 color: #FFFFFF;
 background-color: #4eb5f1;
 text-align: center;
 transition: all 0.2s;
}
a.btn1:hover{
 background-color: #4095c6;
}

HTML:

<div>
  <img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">
  <div>
    <h2>Digital Assets For Creative Professionals</h2>
  </div>
  <div>
    <ul>
      <li>
        <a href="" class="btn1">Photo</a>
      </li>
      <li>
        <a href="" class="btn1">Video</a>
      </li>
      <li>
        <a href="" class="btn1">Motion</a>
      </li>    
    </ul>
  </div>
</div>

h2 {
  position: absolute;
  z-index: 1;
  top: 140px;
  color: #FFF;
  padding-left: 4%;
}

ul { 
    position: absolute; 
    z-index: 1;
    top: 290px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-left: 10em;
}

li {
  float: left;
  padding-right: 40px
}

a.btn1 {
 display: inline-block;
 padding: 0.3em 1.2em;
 margin: 0 0.3em 0.3em 0;
 border-radius: 2em;
 box-sizing: border-box;
 text-decoration: none;
 font-weight: 300;
 color: #FFFFFF;
 background-color: #4eb5f1;
 text-align: center;
 transition: all 0.2s;
}
a.btn1:hover{
 background-color: #4095c6;
}

我感谢这里的任何帮助或见解

我最初认为这可能是一个浏览器问题，但我没看到有什么奇怪的事情发生。并且在Firefox等其他浏览器上也尝试过这段代码。还是一样的问题

非常感谢

如果文件css代码位于另一个文件中，请确保链接没有语法错误，并确保在加载页面之前保存了该文件。我使用html文件上的样式标记尝试了您的代码，运行正常。

如果文件css代码位于另一个文件上，请确保您的链接没有语法错误，并确保在加载页面之前保存了该文件。我使用html文件上的样式标记尝试了您的代码，效果很好。

您的css在

a.btn

和

a.btn:hover

我用空格替换了前面的字符

h2{
位置：绝对位置；
z指数：1；
顶部：140px；
颜色：#FFF；
左：4%；
}
ul{
位置：绝对位置；
z指数：1；
顶部：290px；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
左边距：10em；
}
李{
浮动：左；
右键：40px
}
a、 btn1{
显示：内联块；
填充：0.3em 1.2em；
保证金：0.3em 0.3em 0；
边界半径：2米；
框大小：边框框；
文字装饰：无；
字体大小：300；
颜色：#FFFFFF；
背景色：#4eb5f1；
文本对齐：居中；
过渡：均为0.2s；
}
a、 btn1：悬停{
背景色：#4095c6；
}


创意专业人士的数字资产

您的css在

a.btn

和

a.btn:hover中有未知的unicode
我用空格替换了前面的字符


h2{
位置：绝对位置；
z指数：1；
顶部：140px；
颜色：#FFF；
左：4%；
}
ul{
位置：绝对位置；
z指数：1；
顶部：290px；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
左边距：10em；
}
李{
浮动：左；
右键：40px
}
a、 btn1{
显示：内联块；
填充：0.3em 1.2em；
保证金：0.3em 0.3em 0；
边界半径：2米；
框大小：边框框；
文字装饰：无；
字体大小：300；
颜色：#FFFFFF；
背景色：#4eb5f1；
文本对齐：居中；
过渡：均为0.2s；
}
a、 btn1：悬停{
背景色：#4095c6；
}

创意专业人士的数字资产








在“右键填充：40px；”之后缺少分号在您的li CSS选择器中。不确定这会产生多大的差异。很遗憾，已纠正，没有产生任何差异。在“padding right:40px；”之后缺少分号在您的li CSS选择器中。不确定这会有多大的不同。不幸的是，修正后的没有任何不同。难以置信。这解决了问题！我想我需要读更多关于独角兽的书！难以置信的这解决了问题！我想我需要读更多关于独角兽的书！