当前位置： 文江博客话题详情

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

发布于 2024-12-02 10:53:35 字数 5949 浏览 0 评论 0原文

如果您右键单击 - 查看图像您会看到更好的

-编辑-

好吧，我会根据我的进度更新我的问题您可以在这里看到： 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 中使用， 我现在正在做横向视图，稍后我将做纵向视图（仅编辑 .visible 的正确属性）

原文

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

-EDIT-

Well, i will update my question according to my progres wich you can see here: http://piscolabis.info/licht/job_single.html

My only problem now is that the background images are not seen in the iphone!!!

HTML CODE

<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 CODE

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

Any thoughts about the images??

As I edited the full question, please note that this file will only be used in iphone,
I am doing the landscape view now i will do the portrait later on (only editing the right propertie of .visible)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

尴尬癌患者 2024-12-09 10:53:35

使用媒体查询来检测方向

/* 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">

use mediaqueries to detect orientation

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

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

combined with

<meta name="viewport" content="width=device-width, initial-scale=1.0">
回复 原文
~没有更多了~

关于作者

薄凉少年不暖心

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文