Question

当我在全屏幕上浏览器或扩展我的网站看起来很好。我是css和html的新手。所以我听说包装它，但似乎没有用。我需要有人查看代码，因为我无法让它工作。我的网站是http://Littleguyssg.com

和基本代码

    <!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>

Answer 1

嗯。尝试使用像Bootstrap这样的东西，比如我刚写过这个 - 它非常简单且完全响应。如果你是新手，请亲自尝试一下。 Click here to learn more

<!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>

浏览器调整大小后，我的网站一直吓坏了

1 个答案: