练习二霍格沃兹登录页面

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教务系统管理页面</title>
    <link rel="stylesheet" href="./教务管路系统页面.css">
</head>
<body>
    <!-- <div class="background-img"> -->
    <div class="head">
        <div class="school-logo">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.b266f91045ee5226679b16cedfca7d1d?rik=EjYusKboC3kLoQ&riu=http%3a%2f%2fwww.sz4a.cn%2fPublic%2fUploads%2fimage%2fcai%2fHogwarts-Logo-500x281.png&ehk=oXkZ28MvmZLIogX%2fDOzhbAaYwEfNuqpUGfoJmuTYaZg%3d&risl=&pid=ImgRaw&r=0" width="160px" height="90px">
        </div>
        <div class="text">
        <span class="school-text"><b>霍格沃兹魔法学校</b></span>
        </div>
    </div>
    <div class="body">
        <div class="img-left">
            <!-- <img src="https://image.9game.cn/2019/12/26/131870632.jpg" width="100%" height="400px"> -->
        </div>
        <div class="text-right">
            <div class="text-up">
                <h3 class="text-h">亲爱的新生巫师：</h3>
                <p class="text-p">我们愉快地通知您，您已获准在霍格沃兹魔法学校就读，请在入学通知书上签字后，将回信交予来信的猫头鹰。</p>
                <p class="text-img"><img src="../../imge/羽毛笔.png" width="30px" height="30px"></p>
            </div>
            <div class="text-down">
            <form action="https:www.baidu.com">
                <div class="table-text">
                    <p class="p1">姓名：</p>
                    <p class="p2">密码：</p>
                    <p class="p3">学院：</p>
                    <p class="p4">入学日：</p>
                </div>
                <div class="table">
                    <input type="text" name="username" placeholder="name"><br>
                    <input type="password" name="password" placeholder="password"><br>
                    <select name="school">
                        <option value="school1">格兰芬多</option>
                        <option value="school2">赫奇帕奇</option>
                        <option value="school3">拉文克劳</option>
                        <option value="school4">莱斯特林</option>
                    </select><br>
                    <input type="date" name="date"><br>
                    <button type="submit" class="button">Alohomora</button>
                    <span></span><br>          
                </div>
            </form>
            </div>
        </div>
    </div>
    <!-- </div> -->
    <div class="tail">
        <p class="tail-p">版权所有 @ 霍格沃兹学校  地址：伦敦国王十字车站 九又四分之三站台</p>
    </div>
</body>
</html>

2.css

.head{
    height: 90px;
    margin-top: 10px;
}
.school-logo{
    float: left;
    width: 170px; 
    height: 90px;
}
.school-text{
    font-size: 60px;
    font-family: myfont;
    color: rgb(21, 41, 25);
}
@font-face {
    font-family: myfont;
    src: url(../../imge/hanyidishengbiluochun.ttf);
}
.body{
    /* background-color: bisque; */
    height: 400px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.text{
    text-align: center;
    line-height: 80px;
    height: 90px;
    float: left;
}
.img-left{
    /* background-color: brown; */
    height: 400px;
    width: 60%;
    float: left;
    margin-left: 30px;
    animation: myframe 20s infinite alternate-reverse linear;     
}
@keyframes myframe{
    0%{
        background-image: url(https://ok.166.net/cain-corner/post/2019-12-23/1577072612463_wh1ot7.jpg);
        background-size: cover;
    }
    25%{
        background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.a2a0347fefa0e592d2b1befa4be7d260?rik=IYpjlsslb7JDuw&riu=http%3a%2f%2fp3.qhmsg.com%2ft0137830891a7a2aacd.jpg&ehk=5s%2fp4KBPtve2MC0xrlkVm5rBFzwlMnAKfsEl1%2f2bk0Q%3d&risl=&pid=ImgRaw&r=0);
        background-size: cover;
    }
    50%{
        background-image: url(https://image.9game.cn/2019/12/26/131870632.jpg);
        background-size: cover;
    }
    75%{
        background-image: url(https://img.zcool.cn/community/013f415f23da03a801215aa0697599.jpg@1280w_1l_2o_100sh.jpg);
        background-size: cover;
    }
    100%{
        background-image: url(https://c-ssl.duitang.com/uploads/blog/202111/22/20211122003813_188d1.jpg);
        background-size: cover;
    }
}
.text-right{
    background-image: url(https://s1.aigei.com/prevfiles/a30ab02ea54944408df3a8d2087e85ed.jpg?e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:Z7JnYDLQcTDV8Sv0iDrVikMREi0=);
    background-size: cover;
    height: 400px;
    width: 30%;
    float: left;
    margin-left: 50px;
}
.tail-p{
    text-align: center;
    color: #8099af;
    font-size: 13px;
}
.text-up{
    background-image: url(https://bpic.588ku.com/back_origin_min_pic/21/07/09/cd7aad073293f41c64592dcf19ef5153.jpg!/fw/750/quality/99/unsharp/true/compress/true);
    background-size: cover;
    padding-left: 20px;
    border: 6px double rgba(39, 26, 26, 0.701);
    box-shadow: 10px 10px 10px rgb(70, 69, 69);
}
.text-h{
    margin-top: 10;
    font-family: h;
    font-size: x-large;
}
@font-face {
    font-family: h;
    src: url(../../imge/hanyidishengbiluochun.ttf);
}
.text-p{
    font-family: p;
    text-decoration: underline;
    font-size: large;
    font-weight: bold;
    text-indent: 2em;
}
@font-face {
    font-family: p;
    src: url(../../imge/hanyidishengbiluochun.ttf);
}
.text-img{
    position: relative;
    left:250px
}
.table-text{
    float: left;
    margin-top: 1.5px;
    margin-left: 50px;
}
.table{
    float: left;
}
.p1,.p2,.p3,.p4{
    margin-top: 0px;
    margin-bottom: 0px;
}
.text-down{
    margin-top: 30px;  
}
.p2{
    margin-top: 2px;
}
.p3{
    margin-top: 2px;
}
.p4{
    margin-top: 2px;
}
.button{
    margin-top: 10px;
}
/* .background-img{
    background-image: url(https://s1.aigei.com/src/img/gif/83/83c9843c1540439dba8347c98d8f81f9.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/%7CimageView2/2/w/282&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:Dc64VtTRkVxkuEeD4GoQZO4mbss=);
    background-size: cover;
} */
input:not([type="submit"]){
    width: 150px;
}

3.效果图