麻烦老师看下代码谢谢

来源：4-8 自由编程

夜的解忧铺

2021-08-29 11:15:25

<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>
            <div class="center">
                <!-- 表单 -->
                <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="input-sub"value="SEND MESSAGE" />
                </form>
            </div> 
            </div>           
    </section>

    <!-- about区域 -->
    <section class="about">
        <div class="main-about">
            <!-- 标题和简要描述-->
            <h2>ABOUT</h2>
            <ol>
                <li></li>
            </ol>
            <p class="w1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard  dummy text ever since the 1500s.</p>
        </div>
            <!-- 详细描述 -->
        <div class="secondary-about">
            <div class="left">
                <h2>A WORD ABOUT US</h2>
                <div class="hidden-left">
                    <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
                    <input type="submit" class="explore" value="EXPLORE">
                </div> 
            </div>
            <!-- 放置图片 -->
            <img src="images/bb3.jpg" alt="">
            <!-- 学生和天赋 -->
            <div class="right">
                <div class="students">
                    <p>70000</p>
                    <ol>
                        <li></li>
                    </ol>
                    <span>Students</span>
                </div>
                <div class="faculty">
                    <p>600</p>
                    <ol>
                        <li></li>
                    </ol>
                    <span>Faculty</span>
                </div>
            </div>
        </div>
    </section>

*{
    padding: 0;
    margin: 0;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
/* 头部 */
header{
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
}
header .main-top{
    width: 1200px;
    margin: 0 auto;
    /*清除浮动  */
    overflow: hidden;
}
header .main-top .logo{
    float: left;
    height: 48px;
    padding-top: 16px;
}
/* a标签没有完全包裹图片，图片具有特殊性，它撑不起a标签，建议将a标签转换为块级元素 */
header .main-top .logo a{
    display:block;
}
header .main-top .main-nav{
    float: right;
    /* height: 48px; */
    /* padding-top: 16px; */
}
header .main-top .main-nav ul{
    /* 左侧导航宽度设置太大，建议不设置宽度 让内容撑开 */
    /* width: 600px; */
    /* height: 48px; */
    /* margin: 0 auto; */
}
header .main-top .main-nav ul li{
    float: left;
    margin-right: 20px;
    /* text-align: center; */
    /* line-height: 48px; */
    /* 文字的垂直居中可以使用行高 */
    line-height: 80px;
}
header .main-top .main-nav ul li:last-child{
    margin-right: 0;
}
header .main-top .main-nav ul li a{
    display: block;
    color: #fff;
    font-size: 16px;
}
/* banner区域 */
.banner{
    position: relative;
    /* 不设置banner的高度，是让图片将banner的高度撑开，由于img标签本身存在间隙，所以导致banner的高度大一些 */
    width: 100%;

}
.banner .banner-img{
    width: 100%;
    height: 600px;
    /* img是行内元素，转换为块级元素，来消除间隙 */
    display:block;
}
.banner .hidden{
    position: absolute;
    width: 100%;
    height: 600px;
    top: 0;
    left:0; 
    background-color: rgba(0, 0, 0, .6);
}
.banner .center{
    position:absolute;
    width: 506px;
    top: 100px;
    left: 50%;
    margin-left: -253px;
    text-align: center;
}
.banner .center form input,.banner .center textarea{
    /* 减少冗余代码 */
    width: 504px;
    /* height: 40px; */
    /* margin-bottom: 20px; */
    border: 1px solid #808080;
    background:none;
    color: #808080;
}
.banner .center form input{
    height: 40px;
    margin-bottom: 20px;
}
.banner .center textarea{
    height: 110px;
}
.banner .center .input-sub{
    width: 200px;
    margin-top: 20px;
}
/* about区域 */
.about{
    width: 1200px;
    margin: 0 auto;  
}
.about .main-about{
    text-align: center;
}
.about .main-about h2{
    font-size: 32px;
}
.about .main-about ol li{
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
.about .main-about p{
    margin: 0 auto; 
    width: 450px;
}
.about .main-about p.w1{
    color: rgb(128, 128, 128);
    font-size: 14px;
}
.about .secondary-about{
    width: 1201px;
    height: 434px;
    padding-top: 30px;
    overflow: hidden;
}
.about .secondary-about .left{
    float: left;
    position: relative;
}
.about .secondary-about .left h2{
    width: 200px;
    margin-right: 60px;
}
.about .secondary-about .left .hidden-left{
    position: absolute;
    width: 256px;
    padding: 20px;
    font-size: 16px;
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, .5);
    margin-top: 20px;
}
.about .secondary-about .left .hidden-left input{
    width: 140px;
    height: 40px;
    margin-top: 20px;
    border: none;
    background-color: rgb(0, 0, 0);
    color: #fff;
}
.about .secondary-about img{
    float: left;
    width: 650px;
}
.about .secondary-about .right{
    float: right;
    margin-left: 26px;   
}
.about .secondary-about .right .students, .faculty{
    width: 260px;
    border: 1px solid #07cbc9 ;
    text-align: center;
}
.about .secondary-about .right .students{
    margin-bottom: 30px;
}
.about .secondary-about .right .students p, .faculty p{
    font-size: 28px;
    font-weight: bold;
    padding-top: 40px;
}
.about .secondary-about .right ol li{
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
.about .secondary-about .right .students span, .faculty span{
    display: inline-block;
    padding-bottom: 40px;
}