第二次作业---尚有许多缺陷

2301_81545217

已于 2024-06-01 19:46:38 修改

阅读量130

点赞数 1

文章标签： css javascript html

于 2024-06-01 19:45:48 首次发布

本文链接：https://blog.csdn.net/2301_81545217/article/details/139378523

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业5</title>
    <style>
        .A{
            width: 1280px;
            height: 60px;
            margin: auto;
            border: 1px solid black;
            border-radius: 25px;
            box-shadow: 10px 10px 10px gray;
            background-color: rgb(64, 62, 96);
        }
        .a,.b,.c,.d,.e,.f,.g,.h,.i{
            color:white;
            display: inline;
            height: 60px;
            text-shadow: 5px 5px 10px white;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="A">
        <span class="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游戏1</span>
        <span class="b">&nbsp;&nbsp;&nbsp;游戏2</span>
        <span class="c">&nbsp;&nbsp;&nbsp;游戏3</span>
        <span class="d">&nbsp;&nbsp;&nbsp;游戏4</span>
        <span class="e">&nbsp;&nbsp;&nbsp;游戏5</span>
        <span class="f">&nbsp;&nbsp;&nbsp;游戏6</span>
        <span class="g">&nbsp;&nbsp;&nbsp;游戏7</span>
        <span class="h">&nbsp;&nbsp;&nbsp;游戏8</span>
        <span class="i">&nbsp;&nbsp;&nbsp;游戏9</span>
    </div>
</body>
</html>

运行截图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业6-教务系统首页面</title>
    <style>
         .A{
            background-image: url("./e85356b7c46576b4a56ac5ea9b8390b.png");
            width: 1680px;
            height: 150px;
        }
        .B{
            width: 1680px;
            height: 40px;
        }
        .C{
            width: 1680px;
            height: 448px;
        }
        .D{
            width: 1680px;
            height: 300px;
            background-color:white;
        }
        .k,.a,.b,.c,.d,.e,.f,.g{
            list-style-type: none;
            display: inline;
        }
        .k{
            width: 100px;
            height: 60px;
            list-style-type: none;
        }
        .search{
            text-align: right;
            padding-top: 75px;
        }
        .section1,.section2,.section3{
            display: inline-block;
            margin: auto;
            width: 530px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="A">
        <div class="search">
            <form action="">\
                <input type="text">
                <button type="button" style="background-image: url(./image\ copy.png);"></button>
            </form>
        </div>
    </div>
    <div class="B">
        <div>
        <ul>
            <li title="k"></li>
            <li class="a">规章制度</li>
            <li class="b">通知公告</li>
            <li class="c">新闻动态</li>
            <li class="d">质量监控</li>
            <li class="e">教务系统</li>
            <li class="f">教学改革</li>
            <li class="g">教学简报</li>
        </ul>
        </div>
    </div>
    <div class="C"><img src="	https://swxy.csuft.edu.cn/jwc/jwcsydt/201905/W020190530389531282518.jpg" width="1680px"></div>
    <div class="D">
        <div class="section1">
            <h1>新闻动态</h1>
            <ul>
                <li>2024年湖南省普通高校教师课堂教学竞赛校内选拔赛顺</li>
            </ul>
        </div>
        <div class="section2">
            <h1>通知公告</h1>
            <ul>
                <li>关于中南林业科技大学涉外学院2024年专升本</li>
                <li>关于开展2019年度校级一流本科专业建设点验收暨</li>
                <li>院教发【2024】7号关于做好2024届毕业论</li>
                <li>院教发【2024】8号关于2024届毕业设计论文</li>
                <li>关于开展2024年院级课程思政教学竞赛的通知</li>
            </ul>
        </div>
        <div class="section3">
            <h1>下载中心</h1>
            <ul>
                <li>
                    教务处邮箱<br>
                    <span>2020-12-23</span>
                </li>
                <li>
                    2023年6月全国大学生四六级成绩<br>
                    <span>2023-08-24</span>
                </li>
                <li>
                    中南林业科技大学涉外学院免修课程申请表<br>
                    <span>2023-05-18</span>
                </li>
                <li>
                    2022年12月大学英语四六级成绩<br>
                    <span>2023-02-23</span>
                </li>
                <li>
                    2022年6月大学英语四六级成绩<br>
                    <span>2022-10-21</span>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

运行截图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业7-教务系统登录页面</title>
    <style>
        div{
            background-color: white;
        }
        .a{
            width:1280px ;
            height: 150px;
        }
        .b{
            width: 1280px;
            height: 310px;
            background-color:rgba(91, 88, 88, 0.274);
        }
        .c{
            width: 1280px;
            height: 160px;
            color: gray;
        }
        .aa,.ab{
            display: inline-block;
            text-align: center;
            background-color:rgba(91, 88, 88, 0.274);
        }
        .box{
            background-color:rgba(91, 88, 88, 0.274);
            position: absolute;
            top: 210px;
            left: 800px;
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="./image.png" width="1280px" height="150px">
    </div>
    <div class="b">
            <div class="aa"><img src="./ac52a2d5b3fbc5bfed91bb877abca44.png" width="640px" height="310px"></div>
            <div class="ab"> 
                <div class="box">
                    <h1>用户登录</h1>
                    用户名:<input type="text"><br>
                    密&nbsp;&nbsp;码&nbsp;: <input type="password"><br>
                    <button type="submit"><img src="./4bc9c7adde7bab922e0126d00d1082b.png"></button>
                    <button type="reset"><img src="./9d2839f59fd8b0de13216bd95f86d33.png"></button>
                </div>
            </div>
    </div>
    <div class="c">
        湖南强智科技发展有限公司&nbsp;版权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私声明|设为首页
    </div>
</body>
</html>

运行截图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业8-登陆后的页面</title>
    <style>
        .section1{
            width: 1680px;
            height: 111px;
            background-color: aqua;
            background-image: url("./a5d2cb3920ee6fe78f38bbaa6b70dca.png");
            background-repeat: no-repeat;
        }
        .section2{
            width:1680px ;
            height: 50px;
            background-color:rgb(10, 108, 237);
        }
        .section3{
            width:1680px;
            height: 480px;
        }
        .section4{
            width:1680px ;
            height: 160px;
            text-align: center;
        }
        li{
            list-style-type:none ;
            display: inline;
            width: 50px;
        }
        .A{
            width:548px;
            height: 320px;
            float: left;
            background-repeat: no-repeat;
        }
        .B{
            width:278px;
            height: 320px;
            float: left;
        }
        .C{
            width:278px;
            height: 320px;
            float: left;
        }
        .D{
            width:548px;
            height: 320px;
            float: left;
        }
        .E{
            width:274px;
            height: 160px;
            float: left;
        }
        .F{
            width:274px;
            height: 160px;
            float: left;
        }
        .G{
            width:278px;
            height: 160px;
            float: left;
        }
        .H{
            width:278px;
            height: 160px;
            float: left;
        }
        .I{
            width:278px;
            height: 160px;
            float: left;
        }
        .J{
            width:278px;
            height: 160px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="section1"></div>
    <div class="section2">
        <ul>
            <li></li>
            <li>我的桌面</li>
            <li>学习成绩</li>
            <li>培养管理</li>
            <li>考试报名</li>
            <li>教学评价</li>
        </ul>
    </div>
    <div class="section3">
        <div class="A"><img src="./5cf91a454dbd2ea8d331130fcf35248.png" width="548px" height="320px"></div>
        <div class="B"><img src="./d6b18deb7bbca968be5a2514c805805.png" width="278px" height="320px"></div>
        <div class="C"><img src="./84a4ee8ceecebfc63a3e8de87192eb8.png" width="278px" height="320px"></div>
        <div class="D"><img src="./c62dfce24c8212e0118324b40b9cdff.png" width="548px" height="320px"></div>
        <div class="E"><img src="./b6c693a403f708805bf32a6928740a4.png" width="274px" height="160px"></div>
        <div class="F"><img src="./3f4ce94a92945877a044eb4f14a216c.png" width="274px" height="160px"></div>
        <div class="G"><img src="./74c9d7bf275068447d2ca9d98948c97.png" width="278px" height="160px"></div>
        <div class="H"><img src="./2466200c5c2e94309f5e48f060a93aa.png" width="278px" height="160px"></div>
        <div class="I"><img src="./9266621459645a20a31f3a9c66806bd.png" width="278px" height="160px"></div>
        <div class="J"><img src="./163d107c1127ab77365af3e475c37ed.png" width="278px" height="160px"></div>
    </div>
    <div class="section4">
        <hr>
        Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号
    </div>
</body>
</html>

运行截图：