所以我不熟悉HTML＆amp; CSS。我试图使顶部按钮（Get It Now）与底部的按钮不同（立即注册）。我参加了不同的课程并尝试了id，但它似乎没有用。任何建议将不胜感激。谢谢！
* {
-moz-box-sizing: border-box;
/* Firexfox */
-webkit-box-sizing: border-box;
/* Safari/Chrome/iOS/Android */
box-sizing: border-box;
/* IE */
}
body {
font-family: 'Open Sans', Arial, sans-serif;
}
.header {
background-image: url("../images/header_bg.jpg");
background-size: cover;
width: 100%;
height: 700px;
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
.header a:link,
a:visited,
a:hover,
a:active {
color: #033048;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #f9e42e;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
.benefits {
padding-left: 120px;
padding-top: 60px;
padding-bottom: 60px;
background-color: #f0efef;
}
h1 {
font-weight: 800;
font-size: 48px;
color: #fff;
text-align: left;
padding-left: 120px;
}
h2 {
font-size: 48px;
font-weight: 600;
padding-top: 128px;
padding-bottom: 90px;
text-align: center;
color: #fff;
}
h3 {
font-size: 40px;
font-weight: 600;
color: #033048;
}
h4 {
font-weight: 800;
font-size: 48px;
color: #f9e42e;
margin: 0px;
padding-bottom: 40px;
}
p {
font-size: 26px;
font-weight: 300;
color: #606161;
line-height: 38px;
}
ul {
font-size: 26px;
font-weight: 300;
color: #606161;
line-height: 38px;
}
.benefits p {
width: 640px;
}
.benefits ul {
width: 640px;
}
.quote {
background-image: url("../images/testimonial_bg.jpg");
background-size: cover;
width: 100%;
text-align: center;
padding: 60px 300px 60px 300px;
line-height: 36px;
}
.quote p {
color: #fff;
font-size: 18px;
font-weight: 300;
font-style: italic;
}
#attribution {
font-size: 36px;
font-weight: 600;
font-style: normal;
margin: 6px;
}
.bar {
background-color: #f9e42e;
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
margin: 0 auto;
}
.bar a:link,
a:visited,
a:hover,
a:active {
color: #fff;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #033048;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
.footer {
text-align: center;
background-color: #121212;
padding-top: 60px;
padding-bottom: 60px;
margin: 0 auto;
}
.footer p {
color: #fff;
font-size: 18px;
font-weight: 600;
padding-left: 25px;
padding-right: 25px;
padding-top: 40px;
}
.footer a {
padding-left: 25px;
padding-right: 25px;
}<div class="header">
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
<a target="_blank" href="https://www.blissworld.com/spa-landing">Get it Now</a>
<!-- I just selected a random link that was "relaxing" for now-->
</div>
<div class="benefits">
<h3>Benefits</h3>
<p>The perfect personal assistant. Relaxr does your job for you so you can enjoy life as it is meant to be.</p>
<ul>
<li>• Schedule meetings for you</li>
<li>• Excel automation to complete work for you</li>
<li>• Responds to emails on your behalf</li>
<li>• Does all your work for you with our revolutionary AI technology</li>
</ul>
</div>
<div class="quote">
<p>“Relaxr changed my life. I’ve been able to travel the world, spend limited time working and my boss keeps thanking me for crushing work.”</p>
<p id="attribution">- Amanda, Intuit</p>
</div>
<div class="bar">
<a target="_blank" href="https://www.blissworld.com/spa-landing">Sign Up Now!</a>
<!-- I just selected a random link that was "relaxing" for now-->
</div>
<div class="footer">
<h4>Relaxr</h4>
<br />
<a href="https://twitter.com/" class="social"> <img src="images/twitter.png" alt="Twitter Icon"></a>
<a href="https://facebook.com/" class="social"> <img src="images/facebook.png" alt="Facebook Icon"></a>
<br />
<p>Copyright 2015. Relaxr.</p>
</div>
答案 0 :(得分：2)
ID和类应该有效... 如果您犯了一个简单的错误，请记住使用＃调用ID，如#foo，使用句点（。）调用类，如.bar。除此之外，我不确定。
答案 1 :(得分：0)
您应该直接向按钮添加类。这比使用所有那些复杂的选择器更容易维护。
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a target="_blank" class="btn btn-primary" href="https://www.blissworld.com/spa-landing">Get it Now</a>
<a target="_blank" class="btn btn-success" href="https://www.blissworld.com/spa-landing">Sign Up Now!</a>
答案 2 :(得分：0)
按钮的风格不同。
* {
-moz-box-sizing: border-box;
/* Firexfox */
-webkit-box-sizing: border-box;
/* Safari/Chrome/iOS/Android */
box-sizing: border-box;
/* IE */
}
body {
font-family: 'Open Sans', Arial, sans-serif;
background: #000;
}
.header {
margin: 0 auto;
padding-top: 20px;
text-align: center;
}
.header a:link,
a:visited,
a:hover,
a:active {
color: #033048;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #f9e42e;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
.bar {
padding-top: 60px;
padding-bottom: 60px;
text-align: center;
margin: 0 auto;
}
.bar a:link,
a:visited,
a:hover,
a:active {
color: #fff;
background: blue;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
border-radius: 5px;
text-decoration: none;
text-align: center;
}<div class="header">
<a target="_blank" href="https://www.blissworld.com/spa-landing">Get it Now</a>
</div>
<div class="bar">
<a target="_blank" href="https://www.blissworld.com/spa-landing">Sign Up Now!</a>
</div>
然而，这并不是你认为的那样：
.header a:link, a:visited, a:hover, a:active {
color: #033048;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #f9e42e;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
它应该是：
.header a:link,
.header a:visited,
.header a:hover,
.header a:active {
color: #033048;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
background: #f9e42e;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
同样适用于bar链接样式。
bar a:link,
.bar a:link,
.bar a:visited,
.bar a:hover,
.bar a:active {
color: #fff;
background: blue;
font-size: 28px;
font-weight: 800;
padding: 11px 56px 11px 56px;
border-radius: 5px;
text-decoration: none;
text-align: center;
}
答案 3 :(得分：0)
你只需要添加一个这样的类
<a target="_blank" href="https://www.blissworld.com/spa-landing" class="TopButton">Get it Now</a>
然后为班级添加CSS
.TopButton {
background-color:lightgray;
border:solid;
padding:3px;
}