个人中心
gpt4 book ai didi

html - 无法在 上放置背景颜色

转载 作者：行者123 更新时间：2023-11-28 02:58:22 25 4
gpt4 key购买 nike

我为一个学校元素做了一点。但我有一些问题。

如您所见，有 3 个报价，每个报价在方框内都有一个价格。现在我试图让价格有一个带圆 Angular 的绿色框(就像“meme_packs_offers”div 一样)。我还想让“white_box”div 的底部位于页面底部，就像顶部一样。

这是html代码:

/* 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>

最佳答案

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

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 拆分为两个仅针对链接。

25 4 0
文章推荐： c++ - 向单链表添加值
文章推荐： c++ - 使用 get() 从复制文件中获取垃圾值
文章推荐： c++ - WinAPI 在销毁前一个窗口后创建另一个窗口
文章推荐： angularjs - 不是预期的日期格式 - ng 和日期输入类型之间的区别
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com