gpt4 book ai didi

html - 需要帮助在 HTML/CSS 中复制这个相当简单的盒子效果

转载 作者:太空宇宙 更新时间:2023-11-04 15:55:31 26 4
gpt4 key购买 nike

我正在尝试复制 Verge 使用的评级框的基本效果(您可以在这里看到它:http://www.theverge.com/2012/5/9/3002183/airplay-speaker-review-iphone 在底部)但是我的文本对齐一直有问题。现在我有这个:

            <div class="product-score-box">
<div class="score">
<span class="totalscore">
<?php echo aff_the_rating();?>
</span>
<span class="ourscore">Our Score</span>
</div>
<a href="#" class="product-score-cta">Leave Review</a>
</div>

CSS:

            .product-score-cta { right:0; left: 0; bottom:5px; color:white;}
.ourscore {bottom:8px;}
.totalscore {top:10px; font-size:70px; line-height:70px;}
.ourscore,.totalscore,.product-score-cta {position:absolute; }
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}

.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
}

在 Firefox 上,.score 中的文本不与中心对齐,而在 Chrome 中,它的对齐方式很奇怪(好像是合理的?或其他)。我的绝对定位绝对烂透了!如果有人能帮助我获得类似的效果,我将永远感激不已。

编辑:http://jsfiddle.net/wQrZr/

最佳答案

因此,根据您的标记和标准字体选择,我已经尽可能地复制了它,但布局应该是正确的。

为框内的元素设置绝对宽度并给它们 left: 0; 似乎是直接做的,并且在 leave review 元素中添加了一些额外的样式使其更接近边缘'

CSS:

* { font-family: Tahoma; }   

.product-score-cta { right:0; left: 0; bottom:5px; font-size: 14px; text-decoration: none; color: #EEE;}
.ourscore {bottom:12px; font-size: 18px; font-style: italic;}
.totalscore {top:10px; font-size:70px; line-height:70px;width:130px; position: absolute;}
.ourscore,.totalscore,.product-score-cta {position:absolute; width: 130px; left: 0px;}
.score {
height:115px;
color:white;
background:#f48b1b;
position:relative;
}

.product-score-box {
display: block;
position: absolute;
top:20px;
right:10px;
color: white;
font-family: 'DINCond-MediumRegular';
background: black;
text-align: center;
z-index: 20;
overflow: hidden;
font-size: 16px;
line-height: 100%;
width:130px;
height:140px;
} ​

引用:

关于html - 需要帮助在 HTML/CSS 中复制这个相当简单的盒子效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10543813/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com