Question

我们已经尝试制作一个很酷的按钮，但我们无法做到。我们尝试了2个小时，我们不能让它工作。我们看了很多不同的指南，没有任何工作。现在我们来这里寻求帮助

＆＃13;

	<style>
	  .button {
    background-color: darkcyan;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	font-family: hacked;
	
	
}

  .sub {
  position: relative;
}
.itmHolder {
  position: relative;
}

  
  
  .itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}
.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}



	</style>

＆＃13;

<!DOCTYPE html>
<html>
	<head>
    <title>Our Future</title>
	</head>
	<!--Baggrunds farve-->
	<body bgcolor="#212f3c">
	
	<!--Hovedskriften-->
     <font size=40><center><h1 style="font-family:blowbrush;">Future</font></center></h1><form action="side2.html">
	 
	 
	  <div class="og">
  <div class="itmHolder">

    <div class="sub">
      <button type="button" class="Button">About us</button>
      <button type="button" class="Button">Buy now</button>
    </div>
</div>

＆＃13;

Answer 1

代码的第二行，更改＆＃39; .button＆＃39;到了＆＃39; .Button＆＃39;

Answer 2

CSS区分大小写，将.button更改为.Button或更改按钮上的班级名称。

btw，center，font size已弃用，请改用css：

.your-class-font {
    font-size: 20px;
}

.your-class-center {
    margin: 0 auto;
}

.Button {
  background-color: darkcyan;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: hacked;
}

h1 {
font-size: 40px;
text-align: center;
}

.sub {
  position: relative;
}

.itmHolder {
  position: relative;
}

.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}

.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Our Future</title>
</head>
<!--Baggrunds farve-->

<body bgcolor="#212f3c">

  <!--Hovedskriften-->


  <h1 style="font-family:blowbrush;">Future </h1>


  <form action="side2.html">


    <div class="og">
      <div class="itmHolder">

        <div class="sub">
          <button type="button" class="Button">About us</button>
          <button type="button" class="Button">Buy now</button>
        </div>
      </div>

无法改变按钮的外观

2 个答案: