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.：我是在 Photoshop 上做的 :)

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和section标签替换为 来解决此问题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 回答