gpt4 book ai didi

CSS:从液态到固定以实现更小的分辨率

转载 作者:行者123 更新时间:2023-11-27 22:29:12 24 4
gpt4 key购买 nike

下面的代码是一个包含 3 个元素的迷你网页:左侧:足球球门 + 球图像中心:一段视频右侧:手机图片

以像我的 1440 x 900 这样的分辨率查看整个内容,没有问题,所有显示都正常。但是,当您使用较窄的分辨率(或将导航器窗口的宽度调整为较小的宽度)时,手机图像会位于视频后面(或位于其上方的视频)。

为了解决这个问题,我想做的是:当达到 1280px 的宽度和 830px 的高度时,这是极限分辨率(小于这个,事情就会出错)我试图让所有元素固定(不再 float ),所以滚动条显示,访问者可以使用它们,任何元素都不会被隐藏。

如何实现?请帮帮我,已经好几个小时了,我快疯了。

我最后的尝试:添加到 body 标签最小宽度:1280px;

但没有结果 :( 我想知道这是否被正确使用,是否可以作为解决方案......你怎么看?

PD:请在此处下载图片: http://aracelid.110mb.com/myfolder.zip

非常感谢

<head> 

<style type="text/css">
#navigation {
}

#navigation ul, #navigation ul li {
list-style: none;
margin: 0;
padding: 0;
}


#navigation ul {
padding: 5px 15px;
text-align: left;
}

#navigation ul li {
display: inline;

margin-right: 0px;
padding-top:10px;
}

#navigation ul li a div {
background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;

padding: 10px 0.5em;

color: #FFFFFF;
text-decoration: none;
font-size:12px;
}

#navigation ul li a div:hover {
background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;

padding: 10px 0.5em;

color:#FFFFFF;
text-decoration: none;
font-size:12px;
}
</style>

</head>

<body style="background-color:#E7E7E7;font-family: Arial, Helvetica, sans-serif;">

<div style="z-index:-1;position:absolute;left:0;top:30%;height:50%;width:100%;float:none">

<div style="position:absolute;top:100px;left:0px;"><img src="myfolder/goal.jpg"></div>
<div style="position:absolute;top:-90px;right:0px"><img src="myfolder/sonyx10_06.jpg"></div>

</div>


<div style="position:absolute;top:15%;left:20%">
<div id="navigation" style="z-index:1;position:relative;top:-18px;left:0px">
<ul>
<li><a href="#" id="t1" style="color:#FFFFFF;text-decoration:none;" ><div id="t1" style="float:left;width:140px;text-align:center;">tab1&nbsp;&nbsp;</div></a></li>
<li><a href="#" id="t2" style="color:#FFFFFF;text-decoration:none;"><div id="t2" style="float:left;width:140px;text-align:center">tab2&nbsp;</div></a></li>
<li><a href="#" id="t3" style="color:#FFFFFF;text-decoration:none;"><div id="t3" style="float:left;width:140px;text-align:center">tab3&nbsp;&nbsp;&nbsp;</div></a></li>
</ul>

</div>

<div id="video" style="z-index:50;text-align:left;float:left;width:726px;height:491px;padding:0px;margin-top:-20px">


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="710" height="480" id="index" align="middle">
<param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://elandroidelibre.movilgol.mobi/video.swf" width="710" height="480">
<param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>


</div>

</div>



</body>

最佳答案

为包含元素指定 min-widthmin-height。下次,请将您的代码精简到最低限度。

一些小技巧

  • 不要使用样式属性。你要将您的内容与推介会。这就是你使用 CSS 的原因。不要在那里混合风格。

  • 记住:绝对定位的内容位于最近的具有定位的父元素不同于static。 z-index 可以只能设置在带有 a 的元素上定位不同于static

我做了一些重写,因为它太乱了:(我把视频改成了红色 Pane ,因为它太分散注意力了:))

   <head> 

<style type="text/css">

body{
background-color:#E7E7E7;
font-family: Arial, Helvetica, sans-serif;
position:relative;
min-width:1280px;
min-height:830px;
}

#navigation {
list-style: none;
margin: 70px 0px 0px 0px;
padding: 0;
text-align:center;
}

#navigation li {
display: inline-block;
}

#navigation a {
display: block;
width: 140px;
height: 15px;
background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;
padding: 10px 0.5em;
color: #FFFFFF;
text-decoration: none;
font-size:12px;
text-align: center;
}

#navigation a:hover {
background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;
}

#container{
position: relative;
}

#goal, #gsm {
top: 100px;
position:absolute;
}

#goal {
left:0px;
}

#gsm {
right:0px;
}

#video {
position:relative; z-index: 1;
width:726px;height:491px;
background: #F00;
margin: 0px auto;
}
</style>

</head>

<body>

<ul id="navigation">
<li><a href="#" id="t1">tab1&nbsp;&nbsp;</a></li>
<li><a href="#" id="t2">tab2&nbsp;</a></li>
<li><a href="#" id="t3">tab3&nbsp;&nbsp;&nbsp;</a></li>
</ul>

<div id="container">
<img id="goal" src="myfolder/goal.jpg">
<img id="gsm" src="myfolder/sonyx10_06.jpg">
<div id="video"></div>
</div>

</body>

我知道它并不完美,但它是我能收集到的最快的示例,我认为您已经可以从中学到很多东西。

关于CSS:从液态到固定以实现更小的分辨率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4318635/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com