怎样修改成如下图的字体颜色并且数字居中
原图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Page with Four Boxes</title>
<style>
/* 设置外层大 div 样式 */
#redDiv {
width: 461px;
/* 设置宽度为自适应 */
height: auto;
/* 设置高度为自适应 */
background-color: red;
display: flex;
/* 设置为 Flex 布局 */
flex-direction: column;
/* 设置为垂直方向排列 */
margin: auto;
}
/* 盒子1 */
#box1 {
width: 461px;
/* 设置宽度为461像素 */
height: 95px;
/* 设置高度为95像素 */
background-image: url('head.png');
/* 使用图片填充背景 */
}
/* 盒子2、盒子3、盒子4 */
#box2,
#box3,
#box4 {
width: 461px;
/* 设置宽度为461像素 */
height: 135px;
/* 设置高度为135像素 */
background-image: url('bg.png');
/* 使用图片填充背景 */
position: relative;
/* 设置定位方式 */
}
/* 移除无序列表的黑点 */
ul {
list-style-type: none;
/* 移除列表样式 */
padding: 0;
/* 移除内边距 */
}
/* 文字1的样式，使其居中显示 */
#text1 {
text-align: center;
/* 文本居中 */
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
/* 超链接的样式 */
.hyperlink {
text-decoration: none;
/* 去除下划线 */
}
/* 鼠标移动到超链接上的效果 */
.hyperlink:hover {
color: blue;
/* 鼠标悬停时的颜色 */
}
/* 点击超链接之后的文字颜色变化效果 */
.hyperlink:active {
color: green;
/* 点击时的颜色 */
}
/* 盒子2的鼠标悬停效果 */
#box2:hover {
background-image: url('bg1.png');
/* 当鼠标悬停时切换背景图片 */
}
/* 盒子3的鼠标悬停效果 */
#box3:hover {
background-image: url('bg1.png');
/* 当鼠标悬停时切换背景图片 */
}
/* 盒子4的鼠标悬停效果 */
#box4:hover {
background-image: url('bg1.png');
/* 当鼠标悬停时切换背景图片 */
}
.clicked {
color: green;
/* 点击后的颜色 */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var links = document.querySelectorAll('a'); // 获取所有超链接
links.forEach(function (link) {
link.addEventListener('click', function () {
link.classList.add('clicked'); // 被点击后添加 'clicked' 类
});
});
});
</script>
</head>
<body>
<!-- 网页内容 -->
<div id="redDiv">
<!-- 盒子1 -->
<div class="smallBox" id="box1">盒子1</div>
<!-- 盒子2 -->
<div id="box2" class="b">
<ul> <br>
<li> 印刷流程</li>
<li> 广告设计
1
<a href="#" class="hyperlink">平面设计</a>
</li>
<li> 企业形象设计</li>
</ul>
</div>
<!-- 盒子3 -->
<div id="box3" class="b">
<ul> <br>
<li> 印刷流程</li>
<li> 广告设计
2
<a href="#" class="hyperlink">网页设计</a>
</li>
<li> 企业形象设计</li>
</ul>
</div>
<!-- 盒子4 -->
<div id="box4" class="b">
<ul> <br>
<li> 印刷流程</li>
<li> 广告设计
3
<a href="#" class="hyperlink">UI设计</a>
</li>
<li> 企业形象设计</li>
</ul>
</div>
</div>
</body>
</html>
运行结果：
