时间戳

首页 > 解决方案 > 我无法编辑 html 和 css 上的链接

html - 我无法编辑 html 和 css 上的链接

问题描述

body {
  background-color: black;
  margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;
}

.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode: multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin: 0;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }
  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1), -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7), -2px -2px 4px rgba(255, 255, 255, .7);
  }
  ul li {
    float: left;
    list-style: none;
    margin-right: 1em;
  }
  li a {
    color: #544738;
    text-decoration: none;
    float: left;
    font-size: 25px;
    padding: 12px;
  }
  li a:hover {
    color: #7eb9be;
  }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Julian Mancera- Final Project</title>
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>



<body>
  <div id="container">
    <div class="backdrop">
      <p class="text">Julian Mancera</p>
    </div>

    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
</body>

</html>

我正在为学校制作我的第一个网站，但我有点卡住了，因为我是初学者。我想用这个方法来创建一个导航栏，但是没有用。

https://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css/

我什至尝试编辑链接，但它们甚至没有改变颜色...在此处输入图像描述

这是带有链接的图片。

标签： htmlcss

解决方案

我认为您}在关闭@keyframes glow {. 下面的代码有效（我没有导入自定义字体）。

body{
    background-color: black;
    margin-top: 45px;
}

.backdrop {
  background: url(../images/header.JPG) center;
  background-size: contain;
  margin: auto;
  margin-top: 185px;
  width: 85vw;  
}
    

ul li {
 float: left;
 list-style: none;
 margin-right: 1em; 
}
 
li a {
 color: #544738;
 text-decoration: none;
 float: left;
 font-size: 25px;
 padding: 12px;
}
 
li a:hover {
 color: #7eb9be;
}
    

.text {
  text-shadow: 0 0 9px white;
  color: white;
  border: 4px solid;
  background: rgb(59, 2, 6);
  mix-blend-mode: multiply;
  font: bolder 10vw 'arial';
  text-align: center;
  margin:0;
  animation: glow 3s infinite;
}


li a:hover {
 -webkit-transform: rotate(-10deg) scale(1.2);
 -moz-transform: rotate(-10deg) scale(1.2);
 -o-transform: rotate(-10deg) scale(1.2);
}

.left a:hover {
 -webkit-transform: rotate(-10deg) scale(1.2);
 -moz-transform: rotate(-10deg) scale(1.2);
 -o-transform: rotate(-10deg) scale(1.2);
}
 
.right a:hover {
 -webkit-transform: rotate(10deg) scale(1.2);
 -moz-transform: rotate(10deg) scale(1.2);
 -o-transform: rotate(10deg) scale(1.2);
}


.left a:hover {
 
 /*Transition*/ 
 -webkit-transition:All .5s ease;
 -moz-transition:All .5s ease;
 -o-transition:All .5s ease;
 
 /*Transform*/ 
 -webkit-transform: rotate(-10deg) scale(1.2);
 -moz-transform: rotate(-10deg) scale(1.2);
 -o-transform: rotate(-10deg) scale(1.2);
}
 
.right a:hover {
 
 /*Transition*/ 
 -webkit-transition:All .5s ease;
 -moz-transition:All .5s ease;
 -o-transition:All .5s ease;
 
 /*Transform*/ 
 -webkit-transform: rotate(10deg) scale(1.2);
 -moz-transform: rotate(10deg) scale(1.2);
 -o-transform: rotate(10deg) scale(1.2);
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px white;
    }
    15% {
        text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                   -2px -2px 10px rgba(255, 255, 255, 1);
    }
    30% {
        text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                   -2px -2px 4px rgba(255, 255, 255, .7);
    }
}
<html>
<head>
<meta charset="UTF-8" />
<title>Julian Mancera- Final Project</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
  

    
<body>
  <div id="container">
  <div class="backdrop">
  <p class="text">Julian Mancera</p>
  </div>

      
      
<ul id="nav">
 <li class="left"><a href="#">Home</a></li>
 <li class="right"><a href="#">About</a></li>
 <li class="left"><a href="#">Work</a></li>
 <li class="right"><a href="#">Contact</a></li>
</ul>
    
    
    
    
</div>
</body>

推荐阅读