Html 当浏览器调整大小时，我的网站一直在崩溃
当我的浏览器全屏显示或扩展时，我的网站看起来很好。我不熟悉css和html。所以我听说要把它包装起来，但这似乎不起作用。我需要有人检查代码，因为我无法让它工作。我的网站是 和基本代码Html 当浏览器调整大小时，我的网站一直在崩溃,html,css,web,mobile-website,Html,Css,Web,Mobile Website,当我的浏览器全屏显示或扩展时，我的网站看起来很好。我不熟悉css和html。所以我听说要把它包装起来，但这似乎不起作用。我需要有人检查代码，因为我无法让它工作。我的网站是 和基本代码 <!DOCTYPE html> <html> <head> <title>Little_Guys Gaming</title> <style> body { text
<!DOCTYPE html>
<html>
<head>
<title>Little_Guys Gaming</title>
<style>
body {
text-align : center ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
</style>
<body>
<div class="wrapper"> <style>
body{
background-image:url("base screen.png");
background-size:relative;
background-attachment:relative;
background-repeat:no-repeat;}
h1{
text-align:center;
}
</style>
</head>
<head>
<style type="text/css">
body {font-family:Arial, Sans-Serif;}
#container {width:300px; margin:100px 300px 300px auto;}
/* Nicely lines up the labels. */
form label {display:inline-block; width:140px;}
/* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
form input[type="text"],
form input[type="password"],
form .line {clear:both;}
form .line.submit {text-align:right;}
label.before{
content:"*" ;
color:red}
</style>
</head>
<div id="container">
<form action="poro.png">
<fieldset style= "width: 500px; margin: 0px auto">
<h1 style="text-align:center">Login</h1>
<div class="line"><label for="username">Username : </label><input type="text" id="username" required="" /></div>
<div class="line"><label for="pwd">Password : </label><input type="password" id="pwd" required="" /></div>
<div class="line submit"><input type="submit" value="Submit" /></div>
</fieldset>
<p><a href = "untitled1.html">Sign Up Here</p></a>
</form>
</div>
<head>
<style>
#img1 {
position:absolute;
bottom:10px;
left:50px
}
#img4 {
position:absolute;
bottom:10px;
left:800px
}
#img3 {
position:absolute;
bottom:10px;
left:550px
}
#img2 {
position:absolute;
bottom:10px;
left:275px
}
</style>
<a href="http://twitter.com/Littleguysporo"><img id="img1" src=twitter.png height="75px" width="75px"></a>
<a href="http://youtube.com/channel/UCvC0ytbzE1WHg5SY7arzXSQ"><img id="img2" src=Youtube.png height="100px" width="100px"></a>
<a href="http://twitch.tv/Little_Guys"><img id="img3" src=Twitch.png height="75px" width="75px"></a>
<a href="http://www.twitchalerts.com/donate/little_guys"><img id="img4" src=Paypal.png height="75px" width="75px"></a>
<style>
#teamspeak{
position:absolute;
right:100px;
top:500px;
font-size:x-large;}
#p2{
position:absolute;
right:200px;
top:550px;
font-size:x-large;
}
#p3 {
position:absolute;
right:250px;
top:600px;
font-size:x-large;}
#p4 {
position:absolute;
right:225px;
top:650px;
font-size:x-large;}
#p5 {
position:absolute;
right:215px;
top:700px;
font-size:x-large;}
#p6 {
position:absolute;
right:200px;
top:750px;
font-size:x-large;}
#p7 {
position:absolute;
right:215px;
top:800px;
font-size:x-large;}
#p8 {
position:absolute;
right:215px;
top:850px;
font-size:x-large;}
#p9 {
position:absolute;
right:215px;
top:900px;
font-size:x-large;}
#p10 {
position:absolute;
right:200px;
top:950px;
font-size:x-large;}
</style>
<a id="teamspeak" href=ts3server://Littleguyssg.com?port=9987><p>---------{Teamspeak == LittleGuyssg.com}------</p></a>
<p id="p2"> -------{Garrys Mod}-------</p>
<p id="p3">------{TTT}------</p>
<p id="p4">Poro's TTT Server</p>
<p id="p5">------{PropHunt}------</p>
<p id="p6">Poro's Prophunt Server</p>
<p id="p7">------{Sandbox}------</p>
<p id="p8">Poro's World War 7</p>
<p id="p9">------{DarkRp}-------</p>
<p id="p10">Poro's DarkRp Server</p>
</htmL> </div>
</body>
小家伙玩游戏
身体{
文本对齐：居中；
}
分区包装器{
文本对齐：左对齐；
左边距：自动；
右边距：自动；
}
身体{
背景图片：url（“base screen.png”）；
背景尺寸：相对尺寸；
背景依恋：亲属；
背景重复：无重复；}
h1{
文本对齐：居中；
}
正文{字体系列：Arial，无衬线；}
#容器{宽度：300px；边距：100px 300px 300px自动；}
/*把标签排好*/
表单标签{显示：内联块；宽度：140px；}
/*如果愿意，您可以将类添加到所有输入框中。这将更安全，更向后兼容*/
表单输入[type=“text”]，
表单输入[type=“password”]，
form.line{clear:both；}
form.line.submit{text align:right；}
在……之前{
内容：“*”；
颜色：红色}
登录
用户名：
密码：
#img1{
位置：绝对位置；
底部：10px；
左：50px
}
#img4{
位置：绝对位置；
底部：10px；
左：800px
}
#img3{
位置：绝对位置；
底部：10px；
左：550px
}
#img2{
位置：绝对位置；
底部：10px；
左：275px
}
#团队演讲{
位置：绝对位置；
右：100px；
顶部：500px；
字体大小：x-large；}
#p2{
位置：绝对位置；
右：200px；
顶部：550px；
字号：x大号；
}
#p3{
位置：绝对位置；
右：250px；
顶部：600px；
字体大小：x-large；}
#p4{
位置：绝对位置；
右：225px；
顶部：650px；
字体大小：x-large；}
#p5{
位置：绝对位置；
右：215px；
顶部：700px；
字体大小：x-large；}
#p6{
位置：绝对位置；
右：200px；
顶部：750px；
字体大小：x-large；}
#p7{
位置：绝对位置；
右：215px；
顶部：800px；
字体大小：x-large；}
#p8{
位置：绝对位置；
右：215px；
顶部：850px；
字体大小：x-large；}
#p9{
位置：绝对位置；
右：215px；
顶部：900px；
字体大小：x-large；}
#p10{
位置：绝对位置；
右：200px；
顶部：950px；
字体大小：x-large；}
----{Garrys Mod}-------
----{TTT}------
Poro的TTT服务器
----{PropHunt}------
Poro的Prophunt服务器
----{Sandbox}------
波罗的第七次世界大战
----{DarkRp}-------
Poro的DarkRp服务器
小家伙玩游戏
<!DOCTYPE html>
<head>
<title>Little Guys Gaming</title>
<style href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form action="" method="POST">
<input type="text" name="username" class="form-control">
<input type="password" name="password" class="form-control">
<input type="submit" class="btn btn-primary" value="Login">
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>