1

知りたいのですが、純粋なCSSでこのレイアウトを作成するのに最適な構造は何ですか。矢印は画像にすることができます。

http://www.labonedesign.com.br/layout_2012.png

流動的なレイアウトが必要ですが、これを作成する方法がわかりません。

ピンクはメニューコンテナで、茶色は私のコンテンツコンテナです。

私はこれを試しましたが、小さな解像度ではこれは機能しません：

 <body>

    <div class="glob">
    <div class="main">
        <div class="wrap_lateral">
            <div class="lateral">

            </div>
        </div>
        <div class="conteudo">

        </div>
    </div>
    </div>  


 </body>

CSS：

body {position:absolute; min-width:100%; min-height:700px; width:100%; height:100%; overflow:hidden;}
.glob {position:absolute; width:100%; height:100%; overflow:hidden;}
.main {margin:0px auto 0 auto; width:100% z-index:2; height:100%;}


.wrap_lateral{
    width:20%;
    height:100%;
    float:left;
    background:#FFCC00 url(../img/seta.png) 330px center no-repeat;
}

.lateral{
    position:relative;
    left:0;
    top:0;
    width:330px;
    height:100%;
    float:left;
    background:#ff0066;
}

.conteudo{
    width:80%;
    height:100%;
    float: left;
    background:#CC0000;
}

PS：私はフォトショップでこれをしました:)

4

2 に答える 2

2

あなたが提供した画像と説明に合うように見える簡単な例を作成しました。これはあなたが探しているものですか？

HTML

<nav></nav>
<div></div>
<section></section>

CSS

nav { /* left bar */
    position: absolute;
    height: 100%;
    width: 200px;
    background: red;
}
div { /* CSS triangle */
    position: absolute;
    top: 50%;
    left: 200px;
    height: 0;
    width: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
section { /* box */
    position: absolute;
    height: 200px;
    width: 100%;
    width: calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: -moz-calc(100% - 220px);
    top: 50%;
    top: calc(50% - 80px);
    top: -webkit-calc(50% - 80px);
    top: -moz-calc(50% - 80px);
    left: 220px;
    background: brown;
}

jsFiddleデモ

画像の代わりにCSSの三角形を使用します。あなたが今持っているものには何の内容もないように見えるので、あなたはそれがあなたの特定のケースに合うようにいくつかの調整をする必要があるかもしれません。

編集：

上記で使用されているタグは新しいHTML5仕様のものであり、古いブラウザでは機能しません。navこれは、 andsectionタグを。に置き換えることで修正できますdiv。

IEまたは特定のバージョンのIEのみを対象とする個別のスタイルシートを作成することもできます。

IEのみ：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE 7のみ：

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

IEバージョン9未満：

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ielt9.css" />
<![endif]-->
于 2012-08-02T03:44:32.143 に答える
0

このCSSを作業に使用します。

.lateral img {position: absolute; top: 42.5%; right: -50px; width: 100px;}

そして、このフィドルをチェックしてください：http : //jsfiddle.net/QhUVA/

于 2012-08-02T03:28:37.710 に答える