Question

Ive made a little for a school project. But I've got some questions.

As you can see, there are 3 offers with each having a price inside the box. Now I'm trying to make the prices have a green box with rounded corners around it (just like with the "meme_packs_offers" div). I'd also like to make the bottom of the "white_box" div go to the bottom of the page, just like the top.

Here's the html code:

/* MAIN */

html {
  background-image: url('background.gif');
  background-size: cover;
 }

.header {
  border-bottom: 5px solid #878787;
  margin-left: -30px;
  margin-right: -30px;
}

.white_box {
  width: 79.5%;
  background-color: white;
  padding: 1.5%;
  border: 5px solid #878787;
}

h1 {
  font-size: 485%;
  text-align: center;
  font-family: 'Pacifico', cursive;
  margin: auto;
  margin-bottom: -30px;
  margin-top: -20px;
}

h2 {
  font-size: 210%;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

h3 {
  font-size: 200%;
  text-align: left;
  margin-top: 50px;
  margin-bottom: -7px;
  font-family: 'Open Sans', sans-serif;
}

p {
  font-size: 115%;
  font-family: 'Play', sans-serif;
}

a:link, a:visited {
  text-decoration: none;
  font-size: 150%;
  color: black;
  font-family: 'Open Sans', sans-serif;
}


/* INDEX */

.library {
  font-family: 'Play', sans-serif;
  font-size: 50%;
}

.buy_icon {
  width: 10%;
  height: auto;
  margin-bottom: -4px;
}

.meme_packs_offers {
  display: flex;
  justify-content: space-around;
}

.meme_packs, .monthly_meme_packs, .private_meme_packs {
  background-color: #FFF8E7;
  width: 320px;
  height: 470px;
  margin-top: 25px;
  border: 3px solid black;
  border-radius: 12px;
  padding: auto;
}

.packs {
  margin-top: 25px;
  text-align: center;
  margin-bottom: 0%;
  padding-right: 10px;
  padding-left: 10px;
}

.price1, .price2, .price3 {
  text-align: center;
  font-size: 140%;
  color: black;
  font-family: 'Open Sans';
  font-weight: 700;
  background-color: green;
  border: 3px solid #336600;
  border-radius: 12px;
}

<!DOCTYPE html>
<html>
<div class="white_box">
  <head>
    <title>MEME-STORE</title>
    <link rel="stylesheet" type="text/css" href="data/style.css">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <div class="header">
      <h1>WELCOME TO THE MEME STORE</h1>
      <h2>THE store to buy some carefully picked memes for the ultimate dankness!</h2>
    </div>
  </head>
  <body class="body">
    <h3>ABOUT:</h3>
    <p>This online store is the only professional site that will sell you carefully picked memes of high quality you'll never forget.  Three different options: Meme packs, monthly meme packs and private meme packs. Click <a target="_blank" class="library" href="data/library.html">HERE </a>to see a small fraction our library so you'll have an idea of the quality of our memes!</p><br>
    <h3>PACKS:</h3>
    <div class="meme_packs_offers">
      <div class="meme_packs">
        <h3 class="packs">MEME PACKS</h3>
        <p class="packs">A one-time purchase in which you get 30 quality dank memes.</p><br><br><br><br><br><br><br><br><br><br><br><br>
        <p class="price1"><a class="price1" href="">€9,99 <img class="buy_icon" src="data/buy.png"></a></p>
      </div>
      <div class="monthly_meme_packs">
        <h3 class="packs">MONTHLY MEME PACKS</h3>
        <p class="packs">The same as meme pack, but you get one pack every month.</p><br><br><br><br><br><br><br><br><br><br>
        <p class="price2"><a class="price2" href="">€8,99/month <img class="buy_icon" src="data/buy.png"></a></p>
      </div>
      <div class="private_meme_packs">
        <h3 class="packs">PRIVATE MEME PACKS</h3>
        <p class="packs">Within 2 days, one of our employees will contact you to help you get memes which will suit your personal taste.</p><br><br><br><br><br><br><br><br><br>
        <p class="price3"><a class="price3" href="">€19,99 <img class="buy_icon" src="data/buy.png"></a></p>
      </div>
    </div>
  </body>
</div>
</html>

Answer 1

我对您的代码进行了一些更改，因此按钮现在可以正常工作。

HTML：

            <div class="meme_packs">
                <h3 class="packs">MEME PACKS</h3>
                <p class="packs">A one-time purchase in which you get 30 quality dank memes.</p><br><br><br><br><br><br><br><br><br><br><br><br>
                <p class="price"><a class="price1" href="">€9,99 <img class="buy_icon" src="data/buy.png"></a></p>
            </div>
            <div class="monthly_meme_packs">
                <h3 class="packs">MONTHLY MEME PACKS</h3>
                <p class="packs">The same as meme pack, but you get one pack every month.</p><br><br><br><br><br><br><br><br><br><br>
                <p class="price"><a class="price2" href="">€8,99/month <img class="buy_icon" src="data/buy.png"></a></p>
            </div>
            <div class="private_meme_packs">
                <h3 class="packs">PRIVATE MEME PACKS</h3>
                <p class="packs">Within 2 days, one of our employees will contact you to help you get memes which will suit your personal taste.</p><br><br><br><br><br><br><br><br><br>
                <p class="price"><a class="price3" href="">€19,99 <img class="buy_icon" src="data/buy.png"></a></p>
            </div>

CSS：

.price{
   text-align: center;
    font-size: 140%;
    color: black;
    font-family: 'Open Sans';
    font-weight: 700;
}

a.price1, a.price2, a.price3 {
    background-color: green;
    border: 3px solid #336600;
    border-radius: 12px;
}

我已将p标签更改为“价格”类，并将css拆分为两个仅定位链接。

无法将背景颜色放在<a href="https://docs.angularjs.org/api/ng/directive/ngKeydown" rel="nofollow noreferrer">ng-keydown</a>上<p> <a>

1 个答案: