英文:
Django for Everybody CSS Autograder assignment stuck on trying to make replica page
问题
I have been trying to complete this assignment. I have completed the majority of it but I am stuck of the DJ4E sign. If you use the link below you will see what it is meant to look like.
我一直在尝试完成这项任务。我已经完成了大部分工作，但我卡在了DJ4E标志上。如果您使用下面的链接，您将看到它应该是什么样子的。
Specifics I am stuck on:
- How to remove the purple from from DJ4E text ( it is a link ) so now purple since the link has been visited.
- DJ4E should be just above the boxes ( see link for pic)
我卡住的具体问题是：
- 如何去掉DJ4E文本中的紫色（它是一个链接），因为链接已被访问而变成了紫色。
- DJ4E应该位于方框的正上方（请参见图片链接）。
Here is the link to the assignment: https://www.dj4e.com/assn/css/index.php
这是任务的链接：https://www.dj4e.com/assn/css/index.php
HTML code (not meant to change):
HTML代码（不应更改）：
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.dj4e.com/" target="_blank">
DJ4E
</a>
</p>
</body>
</html>
My CSS code that I have developed and can be edited:
我开发的可以编辑的CSS代码如下：
#one {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid blue;
}
#two {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid green;
}
#three {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid orange;
}
#four {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid yellow;
}
#link {
position: absolute;
top: 0;
left: 50%;
font-size: 1.64rem;
background-color: #0A4B33;
box-sizing: border-box;
font-family: 'Roboto', Corbel, Avenir, 'Lucida Grande', 'Lucida Sans', sans-serif;
color: white;
height: 50px;
padding: 15px 15px;
line-height: 20px;
margin: -15 ;
text-decoration: none;
text-decoration-line: none;
text-decoration-thickness: initial;
text-decoration-style: initial;
text-decoration-color: initial;
}
My progress as a picture:
我的进度如下图片所示：
英文:
I have been trying to complete this assignment. I have completed the majority of it but I am stuck of the DJ4E sign. If you use the link below you will see what it is meant to look like.
Specifics I am stuck on:
- How to remove the purple from from DJ4E text ( it is a link ) so now purple since the link has been visited.
- DJ4E should be just above the boxes ( see link for pic)
Here is the link to the assignment: https://www.dj4e.com/assn/css/index.php
HTML code (not meant to change):
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="blocks.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.dj4e.com/" target="_blank">
DJ4E
</a>
</p>
</body>
</html>
My CSS code that I have developed and can be edited:
#one {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid blue;
}
#two {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
right: 5px;
padding: 5px;
margin: 5px;
border: 5px solid green;
}
#three {
/*correct*/
position: fixed;
width: 25%;
top: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid orange;
}
#four {
/*correct*/
position: fixed;
width: 25%;
bottom: 5px;
left: 5px;
padding: 5px;
margin: 5px;
border: 5px solid yellow;
}
#link {
position: absolute;
top: 0;
left: 50%;
font-size: 1.64rem;
background-color: #0A4B33;
box-sizing: border-box;
font-family: 'Roboto', Corbel, Avenir, 'Lucida Grande', 'Lucida Sans', sans-serif;
color: white;
height: 50px;
padding: 15px 15px;
line-height: 20px;
margin: -15 ;
text-decoration: none;
text-decoration-line: none;
text-decoration-thickness: initial;
text-decoration-style: initial;
text-decoration-color: initial;
}
My progress as a picture:
答案1
得分: 1
对于链接颜色，你确实想要影响<a>标签而不是周围的div，所以创建一个新的样式链接：
#link a, #link a:visited {
color:white;
text-decoration:none;
}
同时使用a和a:visited，这样颜色在第一次点击链接后会变为白色。您可以从#link设置中删除颜色样式，因为它现在是多余的。
要将顶部框放置在链接以下位置，只需将它们的top值设置为50px，而不是5px，例如：
#two {
/*正确*/
position: fixed;
width: 25%;
top: 50px;
}
英文:
For the link colour, you are really wanting to affect the <a> tag rather than the surrounding div, so make a new style link:
#link a, #link a:visited {
color:white;
text-decoration:none;
}
Use both a and a:visited so the color is white the first time and after you have clicked the link. You can remove the color style from the #link set as it is now redundant.
To place the top boxes lower than the link, simply make their top values 50px rather than 5, eg
#two {
/*correct*/
position: fixed;
width: 25%;
top: 50px;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论