html
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div id="clock"></div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Css
@import url('https://fonts.googleapis.com/css?family=Roboto');
body{
background-color: #141516;
}
#clock {
font-family: 'Roboto', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
font-weight: bold;
text-align: center;
color: rgb(168, 11, 134);
}
@media (max-width: 600px) {
#clock {
font-size: 40px;
}
}
@media (max-width: 400px) {
#clock {
font-size: 30px;
}
}
我希望整个页面变成正文的css 中提到的特定背景颜色
我想指出的是,#clock和其他css的东西正在工作,但不是主体的css
如果发布问题的方式不专业,我想提前道歉。这是我第一次在堆栈溢出上发布内容
background-color
被此导入覆盖:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- 将
!important
设置为背景 - 或者尝试其他引导导入
我试过你的代码,你需要放!important
,因为引导导入覆盖了样式:
body{
background-color: #141516!important;
}