Html 使我的网站扩展到css中的分辨率大小
这是我用CSS、HTML和PHP编程的第一周。当我开始我的网站时，我意识到当我按窗口大小缩放我的网站时，所有的文本都会开始重叠，引起问题，看起来很糟糕 我想知道我是否能得到一个关于我做错了什么的明确答案。我尝试过媒体查询之类的方法，但我还是一点也不懂 这是我的密码：Html 使我的网站扩展到css中的分辨率大小,html,css,resolution,Html,Css,Resolution,这是我用CSS、HTML和PHP编程的第一周。当我开始我的网站时，我意识到当我按窗口大小缩放我的网站时，所有的文本都会开始重叠，引起问题，看起来很糟糕 我想知道我是否能得到一个关于我做错了什么的明确答案。我尝试过媒体查询之类的方法，但我还是一点也不懂 这是我的密码： /*重置正文填充和边距*/ 身体{ 边际：0px； 填充：0px； } /*使标题变粘*/ #集箱{ 背景：黑色； 边框：1px实心#666； 高度：40px； 左：0； 位置：固定； 宽度：100%； 排名：0； } #标题{
/*重置正文填充和边距*/
身体{
边际：0px；
填充：0px；
}
/*使标题变粘*/
#集箱{
背景：黑色；
边框：1px实心#666；
高度：40px；
左：0；
位置：固定；
宽度：100%；
排名：0；
}
#标题{
线高：5px；
利润率：10px；
自动：宽度：940px；
文本对齐：左对齐；
}
#标题文字{
字体系列：“无衬线”；
尺寸：20px；
填充：2px；
字体大小：120%；
文字装饰：无；
}
/*页面内容的CSS。我给顶部和底部填充80px，以确保页眉和页脚不重叠的内容*/
#容器{
保证金：自动；
溢出：自动；
填充：80px；
宽度：100%；
高度：自动；
}
#内容{}
/*主页内容的CSS*/
#主页{
字体系列：“arial”；
填充：1px；
字体大小：100%；
文字装饰：无；
位置：绝对位置；
顶部：5em；
左：4em；
颜色：#5858；
右边距：850px；
}
#hometext2{
字体系列：“arial”；
填充：10px；
字号：80%；
文字装饰：无；
位置：绝对位置；
顶部：7em；
左：4.24em；
颜色：#5858；
右边距：1200px；
}
#hometext3{
字体系列：“arial”；
填充：1px；
字体大小：100%；
文字装饰：无；
位置：绝对位置；
顶部：5米；
左：65em；
颜色：#5858；
右边距：0；
}
#hometext4{
字体系列：“arial”；
填充：18px；
字号：80%；
文字装饰：无；
位置：绝对位置；
顶部：10米；
左：80em；
颜色：#5858；
右边距：0；
}
#主容器
replay.sc
a:链接{
颜色：灰色；
}
a:参观了{
颜色：灰色；
}
a:悬停{
颜色：白色；
}
a:主动的{
颜色：灰色；
}
文字装饰：无；
}
}
在此处上载您的重播，以生成包含下载链接和重播各种信息的页面。
生成页面时，您可以选择重播上要向公众显示的信息，如果您登录，以后可以编辑这些信息
在此处上载replay pack以生成包含每个replay的下载链接或每个replay的.rar文件的页面。
每次重播仅提供基本信息，以节省服务器负载
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
#容器{
位置：相对位置；
}
#广告{
z指数：-1；
左边框：实心；
}
#透明的
{
不透明度：0.4；
过滤器：α（不透明度=40）；
位置：绝对位置；
左：0px；
顶部：0px；
}
#规则边界{
边框样式：实心；
}
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
#容器{
位置：相对位置；
}
#广告{
z指数：-1；
左边框：实心；
}
#透明的
{
不透明度：0.4；
过滤器：α（不透明度=40）；
位置：绝对位置；
左：0px；
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}
<div class="header">
<a href="/" id="headertext"> replay.sc </a>
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>
font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax /* = 1vw or 1vh, whichever is larger */