我已将边框颜色设置为button border，但当我单击它时，button不显示该颜色。它正呈现出另一种颜色。我该怎么修好它？
我需要另一个帮助。我如何设置按钮背景像下面的图像？（其实不知道叫什么）
我设计的按钮：
我要设计的按钮：
还有为什么副标题不在一行？为什么要转到另一条新线路？
null
* {
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>null
null
null
* {
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>
null
null
null
* {
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>