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 疑似要素の絶対配置は、私が思っていたような子要素ではなく、すべて親要素に基づいているようです。分岐したコードペンを見ると、'business-template' 要素の上部の調整を増やして、ページの下部に配置できるようになっていることがわかります。

誰かがもっと簡単な解決策を知っていれば、私はそれが大好きです。ありがとうございました！！！

于 2013-03-05T15:33:34.810 に答える