html - 如何实现这个css显示？

Question

我在网上搜索时发现了这张图片，我尝试自己实现这个显示。这是我到目前为止所拥有的：

我的 HTML 代码在这里：

<ul>
<li>
<span style="display:block;"><a href="">
<span><img src="../creation/images/samps/unnamed4.png" width="48" align="absmiddle"/></span>
<span class="price" >Freeep</span>
<span class="appname">Name of the apps that is so long</span>
<span class="developer">by scamexdotexe</span>
</a>
</span>
</li>
</ul>

这是我的 CSS 样式：

<style type="text/css">
li{
list-style: none;
width:200px;
border:1px solid #00CCFF;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
 padding: 0px;

}
li:hover{
border:1px solid red;
}
li a{
 margin: 0px; 
 display: block; 
 width: 100%; 
 height: 100%;
 white-space:nowrap;
 text-overflow:ellipsis;
 overflow:hidden;
 text-decoration:none;
 padding:2px; 
}
li a span img{
padding: 5px;
}

.price{
position:absolute;
margin-top:4px;
margin-bottom:4px;
color:#0099FF;
font-size:12px;

}
.appname{

}
.developer{
font-size:12px;
color:#666666;
margin:0;
position:inherit;
display:inline;
white-space:nowrap;

}

</style>

我花了几个小时克隆第一张图片上的显示，但似乎我没有运气。你能指出我在这里做错了什么吗？我真正想做的是将应用名称和价格水平对齐，并将应用名称、评级、总下载量垂直对齐。

Answer 1

对于初学者，我将边框半径更改为 5px，并添加阴影：

li {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px; 
  -moz-box-shadow: 0px 0px 5px #333;
  -webkit-box-shadow: 0px 0px 5px #333;
  box-shadow: 0px 0px 5px #333;
}

你也想使用相同的颜色吗？

Answer 2

这是你的开始：http: //jsfiddle.net/k8ejp/4/

笔记：

• “头像”div当然可以是图像
• 如果您想要更复杂的布局（或发现使用位置更容易），可以使用绝对定位而不是浮动
• 我的示例使用了 CSS 的一些新功能（例如text-overflow），但它们应该在不改变布局的情况下降级。

HTML

<div class="box">
    <div class="avatar">foo</div>
    <div class="price">Free!</div>
    <div class="name">A long app name A long app name A long app name A long app name</div>
    <div class="info">Other info about the app goes here.</div>
</div>​

CSS

.box{ 
    font: 11px/1.5 sans-serif; 
    padding: 8px; 
    background-color: #ccddcc; 
    width: 400px; 
    border-radius: 4px; 
    border: 1px solid silver; 
    box-shadow: 2px 2px 2px #ddd; 
}

.avatar { 
    width: 32px; 
    height: 32px; 
    background-color: #555; 
    float: left; 
    margin-right: 12px; 
}

.price { 
    float: right; 
    color: green; 
}

.name { 
    width: 200px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}

Answer 3

我不太确定你应该使用 span，我个人会使用 div 代替，因为它的默认显示样式已经是块，我看到这是你试图在描述块上实现的。

关于价格和应用名称，我建议您将它们包装在与评级和下载计数相同级别的 Div 容器中，并使该容器显示样式内联块，然后调整价格和应用名称的宽度。

会是这样

<div class="main-container">
    <div class="image"> Image Goes Here </div>
    <div class="description">
         <div class="description-top">
               <div class"description-top-title"> Title Goes Here</div>
               <div class"description-top-price"> Price Goes Here</div>
         </div>
         <div class="description-middle"> Rating Goes Here</div>
         <div class="description-bottom"> Download Count Goes Here</div>
    </div>
</div>

.main-container{
    display: inline-block;
}
.image{
    width: 30%;
}
.description{
    display: block;
    width: 70%;
}
.description-top{
    display: inline-block;
}
.description-top-title{
    width: 60%;
}
.description-top-price{
    width: 40%;
}

Answer 4

我在这里创建了一个示例：http: //jsfiddle.net/D26Hj/1/。

它只需要一个应用程序徽标和星形精灵图像。

我已经绘制了一个星形精灵图像并很快在Paint.NET中制作了一个假徽标。

精灵的相关资料：

• 每颗星星都很9px宽。
• 评分中有 5 颗星，因此每个评分都很45px宽。
• 因此，要更改评级，请background-position按以下方式更改。

以下是background-position用于不同星级的 s：

-0px     0 Stars
-45px    1 Star
-90px    2 Stars
-135px   3 Stars
-180px   4 Stars
-225px   5 Stars

我添加了类以使其更容易，rating-0用于rating-50 星到 5 星。

HTML：

<div class="app">
    <div class="image"></div>
    <div class="title">
        <a href="#">App title</a>
    </div>
    <div class="price">$0.00</div>
    <div class="rating rating-3">3 stars</div>
    <div class="info">1024 downloads</div>
</div>

CSS：

body {
    padding: 20px;
}
.app {
    position: relative;
    width: 225px;
    height: 50px;
    padding: 5px;
    background: #8f8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    border: 1px solid #484;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 2px #484;
    -moz-box-shadow: 0 0 3px #888;
    -webkit-box-shadow: 0 0 3px #888;
}
.app a {
    text-decoration: none
}
.app .image, .app .title, .app .price, .app .rating, .app .info {
    position: absolute;
}
.app .image {
    left: 5px;
    top: 5px;
    width: 48px;
    height: 48px;
    background-image: url('http://i.imgur.com/JAgto.png');
}
.app .title {
    left: 60px;
    top: 7px;
}
.app .price {
    right: 5px;
    top: 7px;
    color: #262;
}
.app .rating {
    left: 65px;
    top: 25px;
    width: 45px;
    height: 10px;
    text-indent: -999px;
    background-image: url('http://i.imgur.com/giWyQ.png');
    background-position: -135px 0;
}
.app .info {
    left: 60px;
    top: 40px;
    font-size: 11px;
    color: #666;
}
.rating-0 {
    background-position: 0 0;
}
.rating-1 {
    background-position: -45px 0;
}
.rating-2 {
    background-position: -90px 0;
}
.rating-3 {
    background-position: -135px 0;
}
.rating-4 {
    background-position: -180px 0;
}
.rating-5 {
    background-position: -225px 0;
}