html - 使用带有/CSS 的图像构建产品框

Question

我在 Photoshop 中设计了一个非常基本的盒子，我想用它来显示里面的产品信息。它基本上由 Header、Body 和 Button(每个单独的图像)组成，如下图所示。

如何使用 CSS/HTML 将它们拼凑在一起？我只需要在顶部框中显示标题文本并在正文区域显示元素符号点，但不确定如何从图像文件中实际构建它。

我知道 HTML 看起来是这样的，我只是对如何实际构建框感到困惑，例如堆叠图像并将按钮覆盖在正文的那个位置。

<div id="product_box">
    <div id="header">Title Here</div>

    <div id="body">
        <ul>
            <li>Point here</li>
            <li>Point here</li>
            <li>Point here</li>
        </ul>
    </div>

    <div id="button></div>
</div>

Answer 1

好吧，看看:

http://jsfiddle.net/2A2Fn/4/

您不必更改 html 标记，只需使用 css:

这是相关的 CSS:

#product_box{
    border:2px solid #bbc;
    border-radius:15px;
    display:block;
    width:50%;
    height:100%;
    position:relative;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    padding:0px; !important
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

   }
#header{
    background:#aaf;
    width:100%;
    height:50px;
    border:0px;
    border-bottom:1px solid #99b;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:5px;
    background: #b5bdc8; /* Old browsers */
    /* gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */

  }
#body{
 padding-bottom:15px;   
}
#button{
    background:#756;
    border:1px solid #645;
    display:block;
    width:150px;
    height:50px;
    border-radius:5px;
    position:absolute;
    bottom:-25px;
    right:33%;
    color:#fff;
    box-shadow:5px 5px 5px rgba(0,0,0,0.4);
    text-align:center;
    font-weight:bolder;
    font-size:15px;
    background: #b5bdc8; /* Old browsers */
    /* Gradient */
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
     text-align:center;
     color:#fff;
     font-weight:bold;
}

这是它的输出:

---

编辑

根据您的评论，这里更新了代码:

http://jsfiddle.net/2A2Fn/5/

及其输出:

---

希望对您有所帮助。