html - 为什么按钮边框没有显示我设置的颜色？
问题描述
我已将边框颜色设置为按钮边框，但单击按钮时按钮未显示颜色。它显示出另一种颜色。我该如何解决？
我需要另一个帮助。如何设置按钮背景，如下图所示？（其实我也不知道叫什么）
我设计的按钮：
我要设计的按钮：
还有为什么副标题不在一行？为什么要换新线？
* {
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>解决方案
更改： 添加：
背景颜色：透明；
在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>
推荐阅读
- c# - 从 LINQ 查询的一部分中获取值并将其添加到结果中
- python - 从 django 表单在 mysql 中存储多个复选框
- docker - 无法解析 docker 端点
- python - GitPython 中当前日期和前一段时间之间的 git diff
- node.js - 如何使用expressJS在url中添加可变数量的参数？
- java - 如何将Xml转换为Json格式并放入RabbitMQ
- qr-code - ZPL - 如何将 GS1 应用程序标识符嵌入到 GS1 二维码中
- assembly - LC3 程序集：如何将字符串添加到内存行，而不是字符
- react-native - JPush-react-native 本地通知横幅未在 Android 上显示
- amazon-web-services - 使用 aws mturk cli 使用多个条件列出 HIT