1

参考：http ://www.stephenkelzer.com/design.html 目前
仅针对 firefox 进行了优化（如果在其他浏览器中查看可能会发现额外的错误）

--第一次发帖的人，我真的可以在这里得到一些帮助，谢谢！

我在这里构建了一个非常简单的投资组合页面，我计划稍后对其进行扩展。

我想像 Chris Coyier 在他的网站上所做的那样为每个模块添加分层效果：http: //css-tricks.com/

我将图层设为绿色和黄色以帮助它们脱颖而出

HTML 标记：

<div id="mh-com" class="abc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3>
            <p>...</p>
        </div>
    </div>
<div id="business-template" class="zxc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="" rel="nofollow">Business Template</a></h3>
            <p>...</p>
        </div>
    </div>

CSS 标记：

.portmodule {
margin-top: 25px;
height:300px;
overflow: hidden;
width:969px;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
}
.portmodule:after, .portmodule:before {
content:"";
position: absolute;
top:6px;
left:6px;
background-color: green;
width:100%;
height:100%;
z-index: -1;
}
.portmodule:before {
top:12px;
left:12px;
background-color: yellow;
}

我想让它使每个单独的模块都具有分层效果。我希望你们能帮助我！谢谢！

4

1 回答 1

0

http://www.codepen.io/thestevekelzer/pen/ibmta

我找到了一个“次要解决方案”......我的意思是我不认为这是一种首选方法。

:before & :after 伪元素的绝对定位似乎都是基于父元素，而不是我想的子元素。您会在我的分叉代码笔中注意到，我增加了“业务模板”元素的顶部调整，以适应它在页面上的较低位置。

如果有人知道更简单的解决方案，我仍然会喜欢它。谢谢！！！

于 2013-03-05T15:33:34.810 回答