Question

我正在学习编码所以我对此很新。但是我很确定我能以比我更好的方式设置我的代码，有人能告诉我我能做得更好吗？要求的理由是更好。

HTML代码：

 <div class="infobox">
 <a href="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Suit+Jacket%22"><h3>Pinstripe Suit Jacket</h3></a>
      <div class="suggested">
          <div class="sug-text">
             <h4 class="opskinsug">OPSkins Suggested:</h4>
             <h4 class="survivorsug">Survivor's Suggested:</h4>
          </div>
          <div class="sug-price">
             <h4 class="opssug">$0.26</h4>
             <h4 class="survsug">$0.27</h4>
          </div>

     </div>


     <div class="cheap" id="pinstripe-jacket">
        <p> 44</p>
     </div>

 <img src="images/pinstripesuitjacket.png" width="300" >

 </div>

CSS代码：

.infobox {
    background-color: rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    border-style: solid;
    border-color: orange;
    border-width: 1px;
    border-radius: 25px;
    width: 250px;
    height: 300px;
    display: inline-block;
    margin-left: 20px;
}

.infobox a:link {
    color: #fff;
    text-decoration: none;
}



.infobox a:visited {
    color: #fff;
}

.infobox a:hover {
    color: black;
}

.infobox h3 {
    background-color: orange;
}

.infobox img {
      position: relative;
      top: -232px;
      left: 15px;
      z-index: 0;
}

.opskinsug {
    font-size: 13px;
    text-align: center;
    width: 100px;
    position: relative;
    left: -20px;
    z-index: 1;
    display: inline-block;
}

.survivorsug {
    position: relative;
    text-align: center;
    left: 20px;
    font-size: 13px;
    width: 100px;
    z-index: 1;
    display: inline-block;
}

.opssug {
    position: relative;
    text-align: center;
    width: 100px;
    left: -20px;
    font-size: 20px;
    color: #fff;
    top: -40px;
    z-index: 1;
    display: inline-block;
}

.survsug {
    text-align: center;
    position: relative;
    width: 100px;
    font-size: 20px;
    left: 20px;
    top: -40px;
    color: #fff;
    z-index: 1;
    display: inline-block;
}

.suggested {
    background-color: rgba(255, 165, 0, 0.4);
    height: 70px;
    position: relative;
    z-index: 1;

}

.sug-text {
    position: relative;
    top: -5px;
}

.sug-price {
    position: relative;
    top: -8px;
}

.cheap {
    position: relative;
    z-index: 1;
    font-size: 52px;
    display: inline-block;
    left: -70px;
    color: #fff;
}

在我的屏幕上看起来像这样： preview

Answer 1

这是一个更新的HTML。我已使用定义列表<div>替换了内部<dl>，这并不完全适用于此用途，但由于您与标题有1对1的关系和价格，它可以用于此。我还删除了最后<p>内的<div>，因为这不是一个段落，你可以将它放在<div>内（真的不需要包装器）。我没有做CSS，但重新格式化以适应新的HTML应该相当简单。

＆＃13;

<div class="infobox">
 <a href="https://opskins.com/?loc=shop_search&sort=lh&app=433850_1&search_item=%22Skin%3A+Pinstripe+Suit+Jacket%22"><h3>Pinstripe Suit Jacket</h3></a>
      <div class="suggested">
          <dl>
             <dt>OPSkins Suggested:</dt>
             <dd>$0.26</dd>
          </dl>
          <dl>
             <dt>Survivor's Suggested:</dt>
             <dd>$0.27</dd>
          </dl>
      </div>
      <div class="cheap" id="pinstripe-jacket">
        44
     </div>
     <img src="images/pinstripesuitjacket.png" width="300">
 </div>

＆＃13;

如何更好地组织我的HTML和CSS？

1 个答案: