-1

我已将边框颜色设置为按钮边框，但单击按钮时按钮未显示颜色。它显示出另一种颜色。我该如何解决？

我需要另一个帮助。如何设置按钮背景，如下图所示？（其实我也不知道叫什么）

我设计的按钮：

在此处输入图像描述

我要设计的按钮：

在此处输入图像描述

还有为什么副标题不在一行？为什么要换新线？

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    color: #926239;
    line-height: 1.6;
}
.first-div {
    background: url(./pexels-miguel-á-padriñán-1591060.jpg);
    height: 100vh;
    width: 100%;
    background-attachment: scroll;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}
.homepage-text {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headline {
    color: #926239;
    font-size: 50px;
    line-height: 1.2;
}
.subheadline {
    color: #926239;
}
button {
    font-size: 18px;
    text-decoration: none;
    color: #926239;
    border: 1px solid #926239;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
}
button:hover {
    border: 1px solid #926239;
    background: #926239;
    color: white;
}
.second-div {
    color: white;
    background: #926239;
    padding: 20px;
    text-align: center;
}
.third-div {
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}
.section {
    display: flex;
    width: auto;
    height: auto;
    text-align: left;
}
.box-01, .box-03 {
    padding: 20px;
    color: white;
    background: #926239;
}
.box-02 {
    padding: 20px;
}
<!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>Project 07 (Landing page)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="first-div">
            <div class="homepage-text">
                <h1 class="headline">Welcome To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

4

3 回答 3

1

更改： 添加：

背景颜色：透明；

在CSS文件中的按钮中

CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    color: #926239;
    line-height: 1.6;
}
.first-div {
    background: url(./pexels-miguel-á-padriñán-1591060.jpg);
    height: 100vh;
    width: 100%;
    background-attachment: scroll;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}
.homepage-text {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headline {
    color: #926239;
    font-size: 50px;
    line-height: 1.2;
}
.subheadline {
    color: #926239;
}
button {
    font-size: 18px;
    text-decoration: none;
    color: #926239;
    background-color: transparent;
    border: 1px solid #926239;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
}
button:hover {
    border: 1px solid #926239;
    background: #926239;
    color: white;
}
.second-div {
    color: white;
    background: #926239;
    padding: 20px;
    text-align: center;
}
.third-div {
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}
.section {
    display: flex;
    width: auto;
    height: auto;
    text-align: left;
}
.box-01, .box-03 {
    padding: 20px;
    color: white;
    background: #926239;
}
.box-02 {
    padding: 20px;
}

HTML：

<!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>Project 07 (Landing page)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="first-div">
            <div class="homepage-text">
                <h1 class="headline">Welcome To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>
于 2021-03-15T15:09:02.110 回答
1

您必须background:transparent为此使用：

“我需要另一个帮助。如何设置如下图的按钮背景？（我实际上不知道它叫什么）”

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    color: #926239;
    line-height: 1.6;
}
.first-div {
    background: url(https://img.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg?size=626&ext=jpg);
    height: 100vh;
    width: 100%;
    background-attachment: scroll;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}
.homepage-text {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headline {
    color: #926239;
    font-size: 50px;
    line-height: 1.2;
}
.subheadline {
    color: #926239;
}
button {
    font-size: 18px;
    text-decoration: none;
    color: #926239;
    border: 1px solid #926239;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
    outline:none;
    background:transparent;
}
button:hover {
    border: 1px solid #926239;
    background: #926239;
    color: white;
}
.second-div {
    color: white;
    background: #926239;
    padding: 20px;
    text-align: center;
}
.third-div {
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}
.section {
    display: flex;
    width: auto;
    height: auto;
    text-align: left;
}
.box-01, .box-03 {
    padding: 20px;
    color: white;
    background: #926239;
}
.box-02 {
    padding: 20px;
}
<!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>Project 07 (Landing page)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="first-div">
            <div class="homepage-text">
                <h1 class="headline">Welcome To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

于 2021-03-15T15:00:42.840 回答
1

我想你正在寻找这个。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 17px;
    color: #926239;
    line-height: 1.6;
}
.first-div {
    background: url(./pexels-miguel-á-padriñán-1591060.jpg);
    height: 100vh;
    width: 100%;
    background-attachment: scroll;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
}
.homepage-text {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headline {
    color: #926239;
    font-size: 50px;
    line-height: 1.2;
}
.subheadline {
    color: #926239;
    white-space: nowrap;
}
button {
    font-size: 18px;
    text-decoration: none;
    color: #926239;
    border: 1px solid #926239;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: 20px;
    outline: none;
}
button:hover {
    border: 1px solid #926239;
    background: #926239;
    color: white;
}
.second-div {
    color: white;
    background: #926239;
    padding: 20px;
    text-align: center;
}
.third-div {
    background: #f4f4f4;
    padding: 20px;
    text-align: center;
}
.section {
    display: flex;
    width: auto;
    height: auto;
    text-align: left;
}
.box-01, .box-03 {
    padding: 20px;
    color: white;
    background: #926239;
}
.box-02 {
    padding: 20px;
}
<!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>Project 07 (Landing page)</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="first-div">
            <div class="homepage-text">
                <h1 class="headline">Welcome To The Beach</h1>
                <p class="subheadline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi officiis ipsum officia numquam expedita ullam.</p>
            <button>Read More</button>
            </div>
        </div>
        <div class="second-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <div class="third-div"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore? Tempore reprehenderit ab ipsam perspiciatis ut, provident perferendis sapiente in numquam blanditiis, enim, illo error nulla incidunt quos quidem ratione repellat ipsa molestias veritatis? Mollitia, fugit dolore commodi porro repudiandae atque, eos, ipsum quam culpa fuga deleniti quae.</p></div>
        <section class="section">
            <div class="box-01">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-02">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
            <div class="box-03">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa dolorum est, molestias dolores quis sunt nobis temporibus veritatis libero odio!</p>
            </div>
        </section>
    </div>
</body>
</html>

于 2021-03-15T14:52:58.283 回答