如何使用CSS实现iphone的这种布局

Question

如何使用CSS实现iphone的这种布局

如果你正确点击 - 查看图像你会看到它更好

-编辑-

好吧,我会根据你的进展更新我的问题,你可以在这里看到:http://piscolabis.info/licht/job_single.html

我现在唯一的问题是在iphone中看不到背景图片!

HTML代码

<body class="job_single">

<div id="contenedor">
        <div id="head" class="section"><a href="index.html"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /></a><h3><a href="locations.html"></a>JOBS</a></h3></div>
        <div id="contenido">
            <div id="panel" class="left">
                <div id="heading">
                    <h1>PRODUCER FEIHER / PRODUCER</h1>
                </div>
                <div id="information">
                    <p>Duselheimer habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>

                </div>

            </div>
            <div id="panel" class="right">
                <ul class="right visible">
                    <li id="pink">
                                                <a href="#">
                                                    <span class="liLeft"></span>
                                                    <span class="liRight">
                                                        <h2>BENEDIKT / HOCKTE</h2>
                                                        <p>3D - Artist</p>
                                                    </span>
                                                </a>
                                            </li>
                                            <li id="orange">
                                                <a href="#">
                                                    <span class="liLeft"></span>
                                                    <span class="liRight">
                                                        <h2>BEN SIEGLER</h2>
                                                        <p>Creative Director</p>
                                                    </span>
                                                </a>
                                            </li>
                                            <li id="blue">
                                                <a href="#">
                                                    <span class="liLeft"></span>
                                                    <span class="liRight">
                                                        <h2>ANDREAS FUS </h2>
                                                        <p>Asaberquépone</p>
                                                    </span>
                                                </a>
                                            </li>
                </ul>
            </div>

        </div>
</div>  



</body>

Run Code Online (Sandbox Code Playgroud)

CSS代码

.visible{display:block !important;position:relative;}

.job_single #panel.left,
.job_single #panel.right{
    margin-top:50px;
}

#panel.left{
        float:left;width:50%;
}

#panel.left #heading{
    float:left;
    background:#000;
    padding:20px;

        font-size:40px;
        line-height:40px;

}
#panel.left #information{
    float:left;
    margin-top:20px;
        background:url(../img/bg_black_alpha.png);
        font-size: 30px; line-height:30px;
        padding:20px;
}
#panel.left #information, #panel.left #heading{
        padding-left:30px;
        color:#fff;
}




#panel.right{
    width:40%;
    clear:none;
        float:right;
}
.job_single #panel.right ul.visible{margin-top:50px}

#panel.right ul.visible li{
    margin-top:20px;
}
#panel.right ul.visible li,#panel.right ul.visible li a{width:95%;height:90px;float:right;}

#panel.right ul.visible li a{
         background:black;
         border-right:10px solid yellow;
}

#panel.right ul.visible li a span.liLeft{
         width:95px;
         float:left;height:100%;display:block;
         position:relative;
         right:40px;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
         z-index:10;
}



#panel.right ul.visible li a span.liRight{
         background:black !important;
         color:#fff;

}

#panel.right ul.visible li a span.liRight{
        z-index:9;
}

#panel.right ul.visible li#blue a{
        border-color:#0C7CC3;
}
#panel.right ul.visible li#pink a{
        border-color:#C21B7B;
}
#panel.right ul.visible li#orange a{
        border-color:#E83B35;
}


#panel.right ul.visible li#blue a span.liLeft{
        background-image:url(../img/azul.png);
}
#panel.right ul.visible li#pink  a span.liLeft{
        background-image:url(../img/rosa.png);
}
#panel.right ul.visible li#orange  a span.liLeft{
        background-image:url(../img/naranja.png);
}


#panel.right ul.visible li a span.liRight h2{
         font-size:30px;
        margin-top:10px;
}

#panel.right ul.visible li a span.liRight p{
         font-size:30px;
         margin-top:5px;
}

Run Code Online (Sandbox Code Playgroud)

关于图像的任何想法？

当我编辑完整的问题时,请注意这个文件只会在iphone中使用,我现在正在做横向视图我将在稍后进行描绘(仅编辑.visible的正确属性)

Answer 1

Ger*_*ben 2

使用媒体查询来检测方向

/* Portrait */
@media screen and (max-width: 320px)
{
    body {display: none;}
}

/* Landscape */
@media screen and (min-width: 321px)
{
    body {display: none;}
}

Run Code Online (Sandbox Code Playgroud)

结合

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年前
查看次数：	416 次
最近记录：	9 年，9 月前