麻烦老师帮忙看下代码是否正确有无改进的地方

来源：4-6 自由编程

dww1

2021-08-11 00:06:32

相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gareer Bulider </title>
    <meta name="Description" content="Gareer Bulider是培养小孩的优秀场所--可靠,设备齐全,资源丰富">
    <meta name="Keywords" content="运动,展览,交友">
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <div class="main-top">
            <!-- logo -->
            <div class="logo">
               <a href=""><img src="images/logo.png" alt=""></a>
            </div>
            <!-- 导航条 -->
            <nav class="main-nav">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">GALLERY</a></li>
                    <li><a href="">FACULTY</a></li>
                    <li><a href="">EVENTS</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- banner区域 -->
    <section class ="banner">
            <!-- 图片 -->
            <img src="images/banner3.jpg" class="banner-img"alt="">
            <!-- 遮罩层 -->
            <div class="hidden"></div>
                <!-- 表单 -->
            <form action="" method="POST">
                    <input type="text" placeholder="your Name"/>
                    <input type="text" placeholder="your phone" />
                    <input type="email" placeholder="your phone"  />
                    <textarea cols="50" rows="6">Write your Comment here</textarea> 
                    <input type="submit" class="submit"value="SEND MESSAGE" />
            </form>         
    </section>

相关代码：

*{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
header{
    width: 100%;
    background-color: #07cbc9;
}
header .main-top{
    width: 1200px;
    height: 80px;
    margin: 0 auto;
}
header .main-top .logo{
    float:left;
    height: 48px;
    padding: 16px 0;
}
header .main-top .logo img{
    height: 48px;
}
header .main-top nav.main-nav{
    float: right;
    padding-top: 32px;  
}
header .main-top .main-nav ul{
    width: 580px;
}
header .main-top nav.main-nav ul li{
    float: left;
    width: 80px;
    height: 16px;
    text-align: center;
    line-height: 16px; 
    margin-right: 20px;
}
header .main-top nav.main-nav ul li:last-child{
    margin-right: 0;
}
header .main-top nav.main-nav ul li a{
    color: #fff;
    font-size: 16px;
    display: block;
    width: 80px;
    height: 16px;
}
section.banner{
    height: 600px;
    position: relative;
}
section.banner .banner-img{
    width: 100%;
    height: 600px;
}
section.banner .hidden{
    position: absolute;
    width: 100%;
    height: 600px;
    top:50%;
    margin-top: -300px;
    left: 0;
    background-color:rgba(0,0,0,.5);
}
section.banner form{
    position: absolute;
    width: 520px;
    height: 350px;
    top: 100px;
    left: 50%;
    margin-left: -260px;
    background:none;
    text-align:center;
}
section.banner form input{
    width: 504px;
    height: 40px;
    margin-bottom: 20px;
    background:none;
    border: 1px solid #808080;
    color: #808080;
}
section.banner form textarea{
    width: 504px;
    height: 110px;
    background:none;
    border: 1px solid #808080;
    color: #808080;
}
section.banner form input.submit{
    width: 200px;
    height: 40px;
    margin-top: 20px;
}