个人中心
gpt4 book ai didi

iphone - 如何使用 CSS 为 iphone 实现此布局

转载 作者：技术小花猫 更新时间：2023-10-29 11:12:52 32 4
gpt4 key购买 nike

IF YOU RIGHT CLICK - VIEW IMAGE you will see it better

-编辑-

好吧，我会根据我的进度更新我的问题，您可以在这里看到: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>

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;
}

对这些图像有什么想法吗？？

因为我编辑了完整的问题，请注意这个文件只会在 iphone 中使用，我现在正在做横向 View ，稍后我会做纵向 View (只编辑 .visible 的正确属性)

最佳答案

使用媒体查询检测方向

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

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

结合

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

关于iphone - 如何使用 CSS 为 iphone 实现此布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7250386/

32 4 0
文章推荐： ios - UIView appereance 从下到上，反之亦然(核心动画)
文章推荐： ASP.NET Core 执行 Linux shell 命令
文章推荐： python - docker 。无此文件或目录
文章推荐： css - 在 Div 上禁用水平滚动
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com