使HTML/CSS代码适用于所有分辨率？_Html_Css_Responsive Design

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

html css responsive-design

使HTML/CSS代码适用于所有分辨率？,html,css,responsive-design,Html,Css,Responsive Design,我有一个混合了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-

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


欢迎使用我的RO服务器
身体
{
高度：自动；
背景色：#000000；
背景：url（images/background.jpg）不重复；
颜色：#000000；
背景大小：100%；
}
A.
{
颜色：#C8D7EB；
文字装饰：下划线；
}
a:参观了
{
颜色：#C8D7EB；
}
a:主动的
{
颜色：#C8D7EB；
}
a:悬停
{
颜色：公元376年；
文字装饰：下划线；
}
#图1
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图2
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图3
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
底部：0；
#图4
{
高度：自动；
边框：0px#000000实心；
}
#wb_Text1
{
背景色：透明；
边框：0px#000000实心；
填充：0；
}
#wb_Text1分区
{
文本对齐：居中；
}
#wb_Text3
{
背景色：透明；
边框：0px#000000实心；
填充：0；
}
#wb_Text3分区
{
文本对齐：居中；
}
#图6
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#幻灯片1
{
-moz盒阴影：0px 0px 3px#000000；
-网络工具包盒阴影：0px 0px 3px#000000；
盒影：0px 0px 3px#000000；
}
#图7
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#wb_Text4
{
背景色：透明；
边框：0px#000000实心；
填充：0；
}
#wb_Text4分区
{
文本对齐：左对齐；
}
#图像10
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图9
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图8
{
底部：0；
边框：0px#000000实心；
}
#图5
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图11
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
#图12
{
底部：0；
填充：0px；
边框：0px#000000实心；
}
#图13
{
高度：自动；
底部：0；
边框：0px#000000实心；
}
$（文档）.ready（函数（）
{
$（“#幻灯片放映1”）。幻灯片放映(
{
间隔时间：3000，
类型：'序列'，
效果：“无”，
方向：“”，
有效期：2000年
});
});
欢迎来到迈罗


我的介绍文字



--职员

海伦娜-迈罗2015年。保留所有权利。

首先，您不能在HTML中对所有网站样式进行编码。请阅读：

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

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

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

因此，您将了解需要在类而不是div上设置样式。为了简单的解决办法，你们有现成的图书馆，比如

这包括了您需要正确组织和设计的所有内容。

您能解释一下实际问题是什么吗？哪些分辨率不起作用？以何种方式？您不需要为每个元素设置高度：自动。每个元素的高度由标准自动确定（由其内容定义）。您好，我有一个分辨率为1024x768的人报告了一个问题，即文本框（layer5.png中）不适合屏幕，它们被切断了。你可以在这里看到：分辨率更高的人1920x1200也有一个问题，就是屏幕上的按钮和框太高了。Sargo Darya，那是因为我自己把一些代码弄乱了，试图解决它。但是我想不出来（至少你应该做的是给我们一个这个网站的链接。你实际上

可以在HTML中编码你所有的网站风格。这只是一个非常糟糕的做法。谢谢，我会试试这个。我没有编码这个模板，只是做了布局设计，希望我能设法让它工作。。。