HTML/CSS 文本格式：分配 h1“MyCloud”但“我的”是白色和“云”是蓝色的

发布于 2025-01-09 08:55:31 字数 1106 浏览 1 评论 0原文

本质上，我需要弄清楚如何创建一个大黑框，然后在其顶部添加文本“MyCloud”，其中“My”为白色，“Cloud”为另一种颜色。我终于让文本变成了不同的颜色，但现在黑框已经消失了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>
        <div myCloud>
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
        </div>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>

*{
    background-color: rgb(255, 255, 255);
}
.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

原文

Essentially I need to figure out how to Create a large black box and then on top of it I want to have the text "MyCloud" with the "My" being white and the "Cloud" being another color. I got the text to finally be different colors but now the black box has disappeared.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1>
        <div myCloud>
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
        </div>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>

*{
    background-color: rgb(255, 255, 255);
}
.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪是无色的血 2025-01-16 08:55:31

您忘记了 HTML 代码中的某些内容。

尝试在 myCloud 之前添加类
像这样：

class="myCloud"

回复收藏 0 原文

丘比特射中我 2025-01-16 08:55:31

您当前拥有：

<h1>
    <div myCloud>
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

看起来您在 myCloud 之前忘记了 class=。

试试这个：

<h1>
    <div class="myCloud">
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

编辑：您将所有背景颜色设置为白色，并在样式表顶部使用 * 样式。

.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1 class="myCloud">
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>

You currently have:

<h1>
    <div myCloud>
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

Looks like you forgot class= before myCloud.

Try this:

<h1>
    <div class="myCloud">
        <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </div>
</h1>

EDIT: You were setting all background colors to be white with the * style at the top of your stylesheet.

.myCloud{
    background-color: black;
}
h2{
    background-color: #6331a8;
    text-align: center;
    color: white;
}
h3{
    color: black;
    background-color: #599ed4;
    text-align: right;
    text-decoration: underline;
    padding-right: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCloud</title>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
    <h1 class="myCloud">
            <span style="color: red">My</span><span style="color: blue;">Cloud</span>
    </h1>
    <h2>Completed Projects:</h2>
    <h3>Contact Us</h3>
</body>
</html>

回复收藏 0 原文

~没有更多了~