当我调整大小时,我的html网页会混乱

时间:2017-02-26 14:17:37

标签: html css resize

我刚刚开始制作这个网站,我不知道为什么,但是当我调整它的大小时,页面就变得疯狂了。有些问题是我的标题很奇怪,与任务栏相同。请帮我。这是我的代码。

 <!DOCTYPE html>
 <html>
  <style type="text/css">
     body{
        font-family: arial;
        text-align: center;
     }

    *{ 
            margin: 0px;
            padding: 0px;
            /*background-attachment: fixed;*/
    }
    #div1{
        position: static;
        width: 100%;
        height: 550px;
        background-image: url("C:\\Users\\muadh\\Pictures\\harvest5.jpg");


    }
    #div2{
        background: #A3E4E7;
        height: 70px;
        width: 100%;
         line-height: 70px;

    }
    #div2 li{
        list-style-type: none;
        position: static;
        float: left;
        font-weight: 400;
        color: white;
        cursor: pointer;
        margin-left: 10px;

    }
    #div2 ul{
        position: static;
            float: right;

    }
    #div2 ul li{
        list-style-type: none;
        display: inline-block;
    }
    #div2 ul li a{
        padding: 20px;
        margin-right: 10px;
        text-decoration: none;
        color: white;
    }
    #div2 ul li:hover{
        transition-duration: 0.6s;
        background: #0767B6;  /*#E06300*/

    }

    h1{
        position: absolute; 
        height:60px;       
        top: 120px;     
        z-index: 99;             
        font-family: "arial"; 
        font-size: 60px; 
        padding: 2px;
        float: left;
        padding-left: 67px;  
        padding: 100%
        font-size: 12px;
        color: white;  
    }
    h3{
        position: absolute;yt

        font-size: 30px;
        height: 60px;
        top: 230px;
        padding-left: 67px;  
        list-style-type: none;
        float: left;
        color: white;
    }
     #link1 {border-radius: 100%;}

  </style>
 <head>
    <title>Metis Microsystem</title>
    <link rel = "icon" type = "image/jpg" href = "C:\Users\muadh\Pictures\circuit.jpg" id = "link1"/>
 </head>

  <body>
        <div id = "div1">
                <div id = "div2">
                   <div id = "nav_wrapper">                 
            <head>

                </head>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Founders</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Vision</a></li>
                            <li><a href="#">Technology</a></li>
                      </ul>
                  </div>
          </div>
          <h1>xxxxx xxxxxxxxxxx</h1>
          <h3>x xxxxxxxxxx xx xxxxxxxxxxxxx xxxxxx xxxxxxxxxx</h3>        
  </body>
 </html>  

1 个答案:

答案 0 :(得分:2)

不要复制粘贴,自己学习。

  • 有些标签已经打开但从未关闭过。
  • <head>标记定义了两次,一次在正文中(?)
  • 之前定义的
  • <style>标记,位于<head>之外(第一个)
  • 您的所有元素都没有&#39;位置&#39;财产&#39;,或如果他们这样做,这是绝对的。
  • <h3>
  • 中的列表类型
  • 你遗失了&#39;;&#39;每两行。

我建议您先从https://www.w3schools.com/css/css_intro.asp开始。