我的 html 网页在调整大小时出现混乱

Question

我刚开始制作这个网站，不知道为什么，但是当我调整它的大小时，页面变得很乱。一些问题是我的 header 变得奇怪并且与任务栏相同。请帮我。这是我的代码。

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

Answer 1

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

有打开但从未关闭的标签。
<head> 标签定义了两次，一次在正文中 (?)
<style> 之前定义的标签，在 <head> 之外（第一个）
None 个元素有 'position' 属性'，或者如果有，那是绝对的。
列表类型 <h3>
您缺少';'每两行。

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

我的 html 网页在调整大小时出现混乱

My html webpage messes up when I resize it

html

css

resize