我正在尝试用我的代码实现图像 1，但我如何获得图像 2。虽然我的段落有单独的类，但颜色和字体大小没有改变。有人知道为什么会这样吗？
index.html 文件:
<!DOCTYPE html>
<html>
<!-- Link HTML to stylesheet-->
<link href="taniaWebsite.css" type="text/css" rel="Stylesheet" />
<body class="mainpage">
<h1 class="title">Project 180 Websites</h1>
<p class="intro">
Hey my name is Tania and I suck at web development so I am going to make 180 websites until I am better... <br>
<br>
This is the first one. I will list the other ones below this one.
<br>
<br>
You can follow the project here and on the <a href="http://project180websites.tumblr.com" target="_blank">blog.</a>
</p>
<!-- Line decoration -->
<hr class="line">
<li><a href="website2.html"> <p class="days"> Website 2 - </p></a> </li>
<li><a href="index.html"> <p class="days">Website 1 - Homepage</p></a></li>
CSS。文件:
.eyes{
position: absolute;
top: 50%;
transform: translate(-50);
width: 100%;
text-align: center;
}
.eye{
width:240px;
height: 120px;
background: #fff;
display: inline-block;
margin: 40px;
border-radius: 50%;
position: relative;
overflow:hidden;
}
.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border:15px solid #333;
}
body.mainpage {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
background-color:white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.website2{
background-color:rosybrown;
}
.container{
text-align: center;
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
.container span{
text-transform:uppercase;
display:block;
}
.text1{
color:white;
font-size:60px;
font-weight:700;
letter-spacing: 8px;
margin-bottom:20px;
position:relative;
animation: text 3s 1;
}
.text2{
font-size:30px;
color:indianred;
}
@keyframes text{
0% {
color:darkgray;
margin-bottom: -40px;
}
20%{
letter-spacing:25px;
margin-bottom:-40px;
}
75%{
letter-spacing:8px;
margin-bottom: -40px;
}
.line {
margin-top: 1vw;
}
h1{
color: rgb(45);
text-align: left;
font-weight: 500;
font-size: 2em;
}
p.intro {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16.5px;
line-height: 1.5;
}
p.days {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color:darksalmon;
}
li {
list-style-type: none;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none; }
我有两个用于该元素的 html 文档，但 index.html 页面存在问题。我的样式表中的某些内容没有响应 html 文档。我正在尝试进行 180 网站挑战，非常感谢一些指导或帮助!!
最佳答案
给 A 标签一个类，像这样的 'a-days'...
<li><a href="website2.html" class="a-days"><p class="days">Website 2 - </p></a></li>
然后像这样定义它们的颜色
a.a-days:hover, a.a-days:visited, a.a-days:link, a.a-days:active {
color:darksalmon;
}
您还应该将 LI 标签包含在 UL(无序列表)或 OL(有序列表)标签内。为了隐藏元素符号，列表样式类型适用于 OL 而不是 LI
ul {
list-style-type: none;
}
最后...您的@keyframe 样式缺少右括号，这就是为什么无论您在它之后做什么都不起作用。
这是一个有效的 JSfiddle example
关于javascript - 我在使用 Brackets 尝试实现 css、html 时遇到问题 无法实现图像 1？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53698882/