DJ4E CSS自动评分作业问题：DJ4E链接样式与位置调整

问题说明 #

我正在完成DJ4E的CSS复刻页面自动评分作业，大部分内容已完成，但在DJ4E链接处遇到两个问题：

• 已访问状态下的DJ4E链接文本显示紫色，需要去除该紫色样式；
• 需要将DJ4E链接调整至四个文本框的正上方（可参考作业示例效果）。

作业地址：https://www.dj4e.com/assn/css/index.php

不可修改的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>

当前可编辑的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;

}

解决方案 #

1. 去除已访问链接的紫色样式 #

浏览器默认会给已访问链接设置紫色，需要直接给链接元素指定visited状态的颜色，覆盖默认样式：

#link a, #link a:visited {
  color: white;
  text-decoration: none; /* 可选：去掉链接默认下划线，保持样式统一 */
}

2. 将链接定位到四个文本框正上方 #

当前left: 50%仅让元素左边缘居中，需用transform: translateX(-50%)实现元素自身水平居中，同时修正margin的语法错误，调整top值避免和上方文本框重叠：
修改#link的CSS为：

#link {
  position: absolute;
  top: 10px; /* 调整此值确保在上方文本框正上方 */
  left: 50%;
  transform: translateX(-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: 0; /* 修正无效的margin值 */
}

内容的提问来源于stack exchange，提问作者dingoyum