个人中心
gpt4 book ai didi

html - 使 HTML/CSS 代码适用于所有分辨率？

转载 作者：行者123 更新时间：2023-11-28 07:39:06 26 4
gpt4 key购买 nike

我有一个混合了 CSS index.html 代码的 HTML，但我不知道如何让它适用于所有分辨率。它的编码方式似乎很难进行更改，但也许我做得不对。

谁能帮我实现预期的结果？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome to My RO Server</title>
<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
    height: auto;
   background-color: #000000;
   background: url(images/background.jpg) no-repeat;
   color: #000000;
background-size: 100%;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   text-decoration: underline;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: underline;
}
</style>
<style type="text/css">
#Image1
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image2
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image3
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
bottom: 0;
#Image4
{
    height: auto;
   border: 0px #000000 solid;
}
#wb_Text1 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text1 div
{
   text-align: center;
}
#wb_Text3 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text3 div
{
   text-align: center;
}
#Image6
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#SlideShow1
{
   -moz-box-shadow: 0px 0px 3px #000000;
   -webkit-box-shadow: 0px 0px 3px #000000;
   box-shadow: 0px 0px 3px #000000;
}
#Image7
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#wb_Text4 
{
   background-color: transparent;
   border: 0px #000000 solid;
   padding: 0;
}
#wb_Text4 div
{
   text-align: left;
}
#Image10
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image9
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image8
{
bottom: 0;
   border: 0px #000000 solid;
}
#Image5
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image11
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
#Image12
{
bottom: 0;
padding:0px;
   border: 0px #000000 solid;
}
#Image13
{
    height: auto;
bottom: 0;
   border: 0px #000000 solid;
}
</style>
<script type="text/javascript" src="./swfobject.js"></script>
<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./jquery.effects.core.min.js"></script>
<script type="text/javascript" src="./jquery.effects.blind.min.js"></script>
<script type="text/javascript" src="./jquery.effects.bounce.min.js"></script>
<script type="text/javascript" src="./jquery.effects.clip.min.js"></script>
<script type="text/javascript" src="./jquery.effects.drop.min.js"></script>
<script type="text/javascript" src="./jquery.effects.fold.min.js"></script>
<script type="text/javascript" src="./jquery.effects.scale.min.js"></script>
<script type="text/javascript" src="./jquery.effects.slide.min.js"></script>
<script type="text/javascript" src="./wb.slideshow.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $("#SlideShow1").slideshow(
   {
      interval: 3000,
      type: 'sequence',
      effect: 'none',
      direction: '',
      effectlength: 2000
   });
});
</script>
</head>
<body>
<div id="wb_Image4" style="position:absolute;left:439px;top:194px;width:586px;height:428px;z-index:3;">
<img src="images/Layer5.png" id="Image4" alt="" border="0" style="width:586px;height:428px;"></div>
<div id="wb_YouTube1" style="position:absolute;font-family:Verdana;font-size:12px;left:573px;top:236px;width:335px;height:379px;z-index:4;">
Welcome to myRO!<br><br>

My intro text<br> <br><br>

-- <i>Staff</i>
</div>


<div id="wb_Text3" style="position:absolute;left:449px;top:624px;width:450px;height:16px;text-align:center;z-index:7;">
<span style="color:#FFFFFF;font-family:Arial;font-size:13px;"><strong>


Helena - MyRO 2015. All Rights Reserved.<br><br>

</strong></span></div>




<div id="wb_Image7" style="position:absolute;opacity:1;left:871px;top:193px;width:464px;height:429px;z-index:11;">
<img src="images/Layer5.png" id="Image7" alt="" border="0" style="width:464px;height:429px;"></div>

<div id="wb_Image8" style="position:absolute;left:389px;top:309px;width:138px;height:135px;z-index:18;">
<a href="#"><img src="images/register.png" id="Image8" alt="" border="0" style="width:138px;height:135px;"></a></div>

<div id="wb_Image9" style="position:absolute;left:389px;top:459px;width:138px;height:135px;z-index:18;">
<a href="#"><img src="images/download.png" id="Image8" alt="" border="0" style="width:138px;height:135px;"></a></div>

<div id="wb_Image10" style="position:absolute;left:655px;top:560px;width:28px;height:28px;z-index:13;">
<a href="https://plus.google.com"><img src="images/google%2B.png" id="Image10" alt="" border="0" style="width:28px;height:28px;"></a></div>
<div id="wb_Image9" style="position:absolute;left:610px;top:560px;width:28px;height:28px;z-index:14;">
<a href="#" title="Facebook"><img src="images/facebook.png" id="Image9" alt="" border="0" style="width:28px;height:28px;"></a></div>
<div id="wb_Image8" style="position:absolute;left:990px;top:232px;width:245px;height:54px;z-index:15;">
<a href="#"><img src="images/control-panel.png" id="Image8" alt="" border="0" style="width:240px;height:54px;"></a></div>
<div id="wb_Image5" style="position:absolute;left:715px;top:475px;width:240px;height:54px;z-index:16;">
<img src="images/poring.png" id="Image5" alt="" border="0" style="width:201px;height:111px;"></a></div>
<div id="wb_Image11" style="position:absolute;left:943px;top:349px;width:240px;height:54px;z-index:17;">
<img src="images/myro.png" id="Image11" alt="" border="0" style="width:324px;height:243px;"></a></div>
<div id="wb_Image12" style="position:absolute;left:989px;top:299px;width:240px;height:54px;z-index:18;">
<a href="#"><img src="images/forum.png" id="Image12" alt="" border="0" style="width:240px;height:54px;"></a></div>
<div id="wb_Image13" style="position:absolute;left:565px;top:560px;width:28px;height:28px;z-index:19;">
<a href="#"><img src="images/twitter.png" id="Image13" alt="" border="0" style="width:28px;height:28px;"></a></div>
<div id="wb_Flash1" style="position:absolute;left:144px;top:222px;width:250px;height:250px;z-index:20;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="420" height="407" id="Flash1">
<param name="movie" value="sfx3.swf">
<param name="quality" value="High">
<param name="scale" value="ExactFit">
<param name="wmode" value="Transparent">
<param name="play" value="true">
<param name="loop" value="false">
<param name="menu" value="false">
<param name="allowfullscreen" value="false">
<param name="allowscriptaccess" value="sameDomain">
<param name="sAlign" value="tl">
<embed src="sfx3.swf" width="250" height="250" quality="High" wmode="Transparent" loop="false" play="true" menu="false" allowfullscreen="false" allowscriptaccess="sameDomain" scale="ExactFit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</div>
</body>
</html>

最佳答案

首先，您不能在 HTML 中编写所有网站样式。请阅读: http://www.w3schools.com/css/css_howto.asp

其次，您需要删除所有这些凌乱的 CSS，例如:

 position: absolute;
 left: 449px;
 top: 624px;
 width: 450px;
 height: 16px;
 text-align: center;
 z-index: 7;
 }

而是设置全局 CSS 规则，以便您可以在代码的多个位置使用它们。我推荐阅读

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

所以你会明白你需要在类而不是 div 上设置样式。为了简单的解决方案，你有现成的库，比如 http://getbootstrap.com/css/

其中包括正确组织和设置样式所需的一切。

关于html - 使 HTML/CSS 代码适用于所有分辨率？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31046135/

26 4 0
文章推荐： javascript - 无法在使用 cakephp 的情况下使用 javascript 添加 div
文章推荐： javascript - 如何在famo.us中使表面动态化？
文章推荐： jquery - ajax 请求后的 css 选择器(评论系统)
文章推荐： 在不同命名空间中具有相同名称的 C++ 友元类
行者123
个人简介

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

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