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>

enter image description here

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;
}

以下是输出：

Output

<小时/> 的修改

根据您的评论，此处更新了代码：

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

及其输出：

Updated Output

<小时/> 希望它有所帮助。

Answer 2

只能使用HTML / CSS。

使用CSS渐变。

以下是DEMO

Answer 3

查看CSS代码会有所帮助。这就是我如何实现你想要的：

将div元素设置为所需的框高度。根据需要应用border和border-radius属性，可能是2 px边框，半径是10-15 px。

获取标题图像，并将其裁剪为1像素宽（用于保存内存）。然后设置一个div元素并使用这个1像素宽的图像作为背景，重复x，但不是y。将标题的高度设置为渐变图像的高度。

然后，在容器div中创建另一个div。拍摄第二个渐变图像并再次将其缩小为1像素宽度。使用repeat-x将其设置为此div的背景。您必须将标题div的高度设置为标题高度与容器高度的差异。

然后您的按钮可以作为链接放置，可能在另一个div元素中。

所有这些都可以编码如下：

CSS：

div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}

div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}

div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}

HTML：

<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>

这应该做你想要的。您还需要指定按钮CSS，我现在还没有像手机那样做。

希望这能帮到你！

使用带有/ CSS的图像构建产品盒

3 个答案: