Question

所以我的网站是www.jacobweyer.com

当窗口变成某个小尺寸时，它会在右侧创建一个大的灰色区域，其中页眉和页脚不会扩展到覆盖。如何在保留较小的缓冲区域的同时摆脱较大的内容区域？我也有一个问题，我希望尽可能地使用我的社交媒体按钮，但我希望它尽可能保持尽可能正确，直到它可能与标题重叠。

HTML

    <!DOCTYPE html>
    <html>

    <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Alpha Tau Omega | Theta Omega</title>
     <link rel="stylesheet" type="text/css" href="ATOStyle.css" />
     <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>

    </head>

    <body>
     <div id="header">
       <div id="innerheader">
        <div id="banner">
        </div><!-- End banner-->
        <div id="title">
        </div> <!--End title -->
        <div id="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="rush.html">Rush</a></li>
                <li><a href="history.html">History</a></li>
                <li><a href="alumni.html">Alumni</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li><a href="media.html">Media</a></li>
            </ul>
        </div> <!--End navbar -->
     </div><!-- End innerheader -->
     <div id="outersocial">
     <div id="social">
       <ul>
            <li>
            <img src="./pieces/socialmedia/facebook.png" />   
            </li>
            <li>
            <img src="./pieces/socialmedia/twitter.png" />   
            </li>
            <li>
            <img src="./pieces/socialmedia/youtube.png" />
            </li>
      </ul>
    </div> <!-- End social-->
    </div> <!--End outersocial -->
    </div> <!-- End header -->

    <div id="pagecenter">
    </div> <!-- End pagecenter -->

    <div id="footer">
    <div id="footercontent">
        <div id="footerbanner1">
        </div> <!--end footerbanner1-->
        <div id="footernav">
        <p> Alpha Tau Omega Fraternity | Theta Omega Chapter | Northern Kentucky University | <a href="contactus.html">Contact Us!</a></p>
        </div> <!-- End footernav-->           
        <div id="footerbanner2">
        </div> <!-- End footerbanner2-->
    </div> <!--end footercontent -->
    </div> <!--end footer-->
    </body>
    </html>

CSS

     body {
     height: 100%;
     width: 100%;
     margin: 0px 0px 0px 0px;
     background-color: #808080
     }

      /* Header Container */
     #header {
      background:url(./pieces/headerBar.png);
     position: static;    
     width:100%;
     height:139px;
     padding:0;
     z-index: 10000;
     }

     /* Container inside the header for sorting elements */
     #innerheader {
     height: 139px;
      width: 750px;
       margin-right: auto;
      margin-left: auto;
         position: relative;
     }
       /* The following is the Nav Bar */
      #navbar {
     position: relative;
   top: 76px;
     left: 210px;
    margin-left: inherit;
       }
      #navbar ul {
      list-style-type: none; 
   margin: 0px; 
   padding: 0px;
         }

       #navbar ul li {
      font-family: Arial, Helvetica, sans-serif; 
  text-decoration: none;
        color: #000000; 
   display: inline-block; 
   width: 50px; 
   height: 20px;    
   margin: 10px;
       }

       #navbar ul li a {
       text-decoration: none; 
   color: black;  
       }

       #navbar ul li a:hover {
       color: white;
       }

       /*The following is the Intertwine Banner */
       #banner {
       background:url(./pieces/banner.png); 
   position: absolute; 
   margin-left: 0px; 
   min-height: 193px;
       min-width: 183px;
       background-repeat: no-repeat;
       }

       /* Alpha Tau Omega - Theta Omega Title */
      #title {
      position: absolute;
      background: url(./pieces/name.png);
      margin-left: 190px;
      min-height: 75px;
      min-width: 285px;
      }

    /* The following are the social media icons */
    #outersocial{
position:;
left:50%;
height: 139px;
width:50%;
    }

   #social {
    position: absolute;  
top: 2px;
right: 10px;
    }

   #social ul {
    list-style-type: none;
     }

    #social li{
    display: inline-block;
    width: 36px;
    height: auto;
    margin: 5px;
    }
    #social img {
width: 36px;
height: auto;
    }

    /* Pagecenter is where the content will be on the web page*/
    #pagecenter {
    position: static;
     margin-right: auto;
     margin-left: auto;
 height: 50px;
     width: 750px;
     min-height: 1000px;
     background:url(./pieces/mainBG.png);
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     margin-top: -19px;
 z-index:50
    }

    /* The following is the footer and its content */
    #footer {
    margin-top: 20px;
    padding-top: 30px;
    background: url(./pieces/footerbar.png);
    height: 77px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    bottom: 0px;
    position: static;
    }

    #footerbanner1 {
    background: url(./pieces/footerbanner.png);
    position: absolute;
    min-height: 95px;
    min-width: 90px;
    background-repeat: no-repeat;
margin-top: -30px;
left: 10px;
    }

    #footerbanner2 {
background: url(./pieces/footerbanner.png);
    position: absolute;
    min-height: 95px;
    min-width: 90px;
    background-repeat: no-repeat;
margin-top: -30px;
right: 10px;
    }

    #footercontent {
width: 100%;
height: 100%;
right: 5px;
left: 5px;
    }

    #footernav {
font-family: 'Quattrocento Sans', sans-serif;
position: absolute;
text-align: center;
right: 15%;
left: 15%;
    }

    #footernav p {
margin: 0px;
padding-right: 25%;
padding-left: 25%;
font-family: 'Quattrocento Sans', sans-serif;
color: white;
position: relative;
    }

    #footernav a {
font-family: 'Quattrocento Sans', sans-serif;
color: white;
    }

    #footernav a:hover {
color: orange;  
    }

Answer 1

对象只是一种特殊的数据，具有属性和方法。对象属性可以是三种基本数据类型中的任何一种，也可以是任何抽象数据类型，例如另一个对象。对象属性通常是在对象方法内部使用的变量，但也可以是在整个页面中使用的全局可见变量。

向对象添加属性的语法是：

objectName.objectProperty = propertyValue;

例1。：

person=new Object();
person.firstname="stack";
person.lastname="overflow";
person.age=50;
person.color="black";

示例2：

var message="Hello India!";
var x=message.length;

这里.length是对象消息的属性。

我希望它会对你有所帮助。

定位元素的问题和网页的调整宽度

1 个答案: