Question

很抱歉出现noob问题，但是我正在尝试为我的第一个网站编写代码。您可以找到“成品” here，基本上，我正在尝试从头开始编写用Wix制作的这个网站，以供学习。我的标记很多，但目前在样式方面遇到麻烦。

问题是我应该如何设置标题的样式，使其为一整块紫色，并且标题仍然有断点？目前，我的标题如下：

<header><mark style="background-color: #edc5f6">Art + Feminism 
for<br>Medical Learners</mark></header>

我想要一整个紫色，高光不间断。您将如何解决这个问题？

Answer 1

我认为，阅读一些html和css教程并使用浏览器的开发人员工具检查一些网站是个好主意（还有那些不是用wix制作的网站！）。

您可以这样编辑代码：

<style>
.content--upper-border {
    height: 5px;
    background: purple;
}

.content--wrapper {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.header--headline {
    display: inline-block;
    background-color: #edc5f6;
    padding-right: 3rem;
    font-size: 74px;
    font-family: helvetica, sans-serif;
    font-weight: 1000;
}

.header--seperator {
    height: 74px;
    border-bottom: 5px solid black;
}

.is--lifted {
    transform: translate(0, -1px);
}

.has--no-margin {
    margin: 0;
}
</style>

<div class="content--upper-border"></div>
<div class="content--wrapper">
<article>
    <header>
        <h1 class="has--no-margin">
            <div>
<span class="header--headline">
    Art + Feminism
</span>
            </div>
            <div class="is--lifted">
<span class="header--headline">
    for Medical Learners
</span>
            </div>
        </h1>
        <div class="header--seperator">
        </div>
    </header>
</article>
</div>

造型我的第一个网站

1 个答案: