Question

我认为这可能是一件很简单的事情，但是当我尝试这样做时，它会混淆我已经拥有的其他东西。

基本上我在codeigniter中使用php。我有一个for循环，显示许多产品项目（游览）给用户选择并输入与该产品相关的所有具体细节。这个页面在这里：

http://eternalcitytours.com/en/2/Catholic-Tours-Of-Rome-Italy

每个产品包装盒上都有一个蓝色环。

我想用黄色价格圈代替（见下面的例子）

http://eternalcitytours.com/en/22/Tours/Ancient-Coliseum-Roman-Forum-Rome-Tour

代替这个蓝色戒指。然而每次我这样做都会搞砸。

相关的代码位是：

    <ul id="filter-container" class="feature cf" itemscope itemtype="http://schema.org/EventReservation">
                    <?php 
                $tcount=count($tours);
                $tcount=$tcount-1;
                for($i=0; $i<=$tcount;$i++){
                 echo "
                    <li class=\"".$tours[$i]['location']."\">  
                            <a href=\"".$tours[$i]['nav_url']."\" class=\"thumb\">".$tours[$i]['img']."
                            <div class=\"date\"><div class=\"raf\"></div></div>
                            </a>
                            <h4 class=\"tour_title\" itemprop=\"name\">".$tours[$i]['title']."</h4>
                            <div class=\"caption\" itemprop=\"description\">".$tours[$i]['blurb']."</div>
                            <p><a href=\"".$tours[$i]['nav_url']."\" class=\"tours\" itemprop=\"url\"><button type=\"button\" class=\"btn btn-primary\">Read More...</button></a></p>
                    </li>
                    ";
                }?>
                </ul>

    .feature li .thumb .date {
  position: absolute;
  bottom: -25px;
  left: 110px;
  display: block;
  -moz-border-radius: 40px 40px 40px 40px;
  -webkit-border-radius: 40px 40px 40px 40px;
  border-radius: 40px 40px 40px 40px;
  height: 50px;
  width: 46px;
  background: #f3e4c8;
  float: left;
  font-family: mensch;
  padding-top: 10px;
}
.feature li .thumb .date span {
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
}
div .raf{
    width:16px;
    height:16px;
    border-radius:50%;
    background-color:#CE1126;
    background-clip:content-box;
    padding:8px;
    border:8px solid #00247D;
    margin-left:7px;
    margin-top:-5px;
}
.tour-price {
font-size: 2.2em;
font-weight: 300;
display: block;
margin-left:auto;
margin-right:auto;
width:60px;
height:60px;
border-radius:50%;
color:#483f34;
line-height:60px;
text-align:center;
background:#ffc55f;
align: center;
}

感谢

TC

Answer 1

更改此代码：

div .raf{
    width:16px;
    height:16px;
    border-radius:50%;
    background-color:#CE1126;
    background-clip:content-box;
    padding:8px;
    border:8px solid #00247D;
    margin-left:7px;
    margin-top:-5px;
}

到这一个：

div .raf{
    margin-top: -15px;
    font-size: 2.2em;
    font-weight: 300;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #483f34;
    text-align: center;
    background: #ffc55f;
}

我想你也想改变HTML，替换它：

<div class=\"date\"><div class=\"raf\"></div></div>

使用其他代码：

<div class=\"date\">
  <div class=\"raf\" itemprop=\"price\" content=\"43.00\">
     <span itemprop=\"priceCurrency\" content=\"EUR\">€</span>
  43</div>
</div>

其他建议：您可以通过正确格式化代码来提高代码的可读性，请参阅问题：questions questions

使用CSS在图像上定位价格圈

1 个答案: