html - このCSS表示を実現する方法は?

Question

Web検索中にこの画像を見つけ、この表示を自分で実装しようとしました。これは私がこれまでに持っているものです:

私の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 を使用します。これは、説明ブロックで達成しようとしていることがわかります。

Price と AppName については、評価とダウンロード数と同じレベルの Div コンテナー内にそれらをラップし、そのコンテナーの表示スタイルをインライン ブロックにしてから、Price と AppName の両方の幅を調整することをお勧めします。

こんな感じだろう

<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さまざまな星評価に使用する は次のとおりです。

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

簡単にするためにクラスを追加しました。0つ星から5つ星に使用rating-0します。rating-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;
}