我有一个混合了 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/