Question

enter image description here

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

enter image description here

我的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/

注意：

“avatar”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，因为它的默认显示样式已经是块，我看到你试图在描述块上实现它。

关于Price和AppName，我建议您将它们包含在Div容器中与评级和下载次数相同的级别上，并使该容器显示样式为inline-block，然后调整Price和AppName的宽度。 / p>

就像这样

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

~~它只需要一个app徽标和星形精灵图像。~~

我制作了一张星形精灵图片，并在Paint.NET快速制作了一个假徽标。

有关精灵的信息：

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

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

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

我添加了类以使其更容易，使用rating-0到rating-5获取0星到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;
}

如何实现这个css显示？

4 个答案:

HTML

CSS