第二次作业

劣酒82

已于 2024-06-06 19:43:19 修改

阅读量127

点赞数 3

文章标签：前端 html

于 2024-05-28 17:23:30 首次发布

本文链接：https://blog.csdn.net/2302_81617789/article/details/139272910

版权

1.游戏导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏导航栏</title>

    <style>
 
        table{
            background-color: darkslateblue;
            color: aliceblue;
            width: 750px;
            height: 40px;
            border-radius: 10px;
         
        }


        td:hover{
            background-color: brown;

        }

        span{
           text-shadow: 10px 8px 3px white;
        }

        .a{
            width:200px ;
            text-align: right;
            border-radius: 10px;
        }

        .b{
            width:200px ;
            text-align:left;
            border-radius: 10px;
        }
        a{
            color: azure;
          text-decoration: none;
        }

       


    </style>
</head>
<body>

        <table border="0px" align="center" >
            <tr>
                <td class="a"><span><a href="https://www.4399.com/flash/232532.htm" target="_blank">
                    游戏1</a></span></td>
                <td><span><a href="https://www.4399.com/flash/18012.htm" target="_blank">
                    游戏2</a></span></td>
                <td><span><a href="https://www.4399.com/flash/205551.htm" target="_blank">
                    游戏3</a></span></td>
                <td><span><a href="https://news.4399.com/naikuai/" target="_blank">
                    游戏4</a></span></td>
                <td><span><a href="https://www.4399.com/flash/230745.htm" target="_blank">
                    游戏5</a></span></td>
                <td><span><a href="https://news.4399.com/hxjy/" target="_blank">
                    游戏6</a></span></td>
                <td><span><a href="https://www.4399.com/flash/zmhj.htm#search3-b21e" target="_blank">
                     游戏7</a></span></td>
                <td><span><a href="https://www.4399.com/flash/137953.htm#search3-5b0b" target="_blank">
                    游戏8</a></span></td>
                <td class="b"><span><a href="https://a.4399.cn/game-id-111037.html#search3-6007" target="_blank">
                    游戏9</a></span></td>
                
            </tr>
        </table>

</body>
</html>

2.学校教务系统首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* @keyframes image {
            form{
                transform: scale(0.5);

            }
        to{
            transform: scale(1);
        }    
        } */

         @keyframes line {
            form{
              border-bottom: 0%;

            }
        to{
           border-bottom: 100%;
        }
    }
    *{
        margin: 0px;
    }
    
    body
    {
        text-align: center;  
      
     }
        .top{
            border: 1px;
            background-color: rgb(15, 122, 203);
            width: 100%;
            height: 120px;
            /* text-align: center;       */
        }
        .img1{
           padding: 15px;
           width: 800px;
           height: 70px;
           margin-left: 50px;
           margin-top: 10px;
           margin-bottom: 20px;
           /* animation: image; */
        }

        .top_1{
            float: right;
            margin-top:19px ;
            margin-right:200px;
            color: rgb(253, 254, 255);
            font-size: 16px;
        }

        ol li{
            list-style-type: none;
            display: inline-block;
            width: 168px;
            height: 30px;
            /* text-align: center; */
            font-size: 18px;
            /* margin-bottom: 5px; */
        }

        li:hover{
            border-bottom: 4px solid rgba(11, 73, 230, 0.721) ;
            transition-duration: 1s;
            animation: line linear; 
        }
        a:hover:not(.official_website){
            color: rgb(9, 93, 238);
        }

        a{
            color: black;
            text-decoration: none;
            
        }

        .official_website{
            color: white;
        }

        .one{
            margin-top: 10px;
            margin-left: 15px;
            text-align: right;
            background-repeat: no-repeat;
        }
         #search{
            width: 190px;
             height: 35px;
       }
        .news{
             
            width: 438px;
            height: 670px;
            text-align: center;
       }
       .message{
             font-size: 18px;
       }
       .news,.notice{
        float: left;
        padding: 22px;
       }
       .notice{
        text-align: center;
        width: 438px; 
        height: 700px;
        }
        ul>li{
            border-bottom: dotted 2px;
            height: 48px;
            margin-top: 24px;
        }
        .loading{
            width: 448px;
            height: 840px;
            float: right;
            box-shadow: 3px 1px 8px; 
            padding-bottom: 45px;
            padding-right: 45px;
            /* padding-top: 45px; */
            /* border: 1px red solid; */
        }

        #loading-1
        {
            text-align: left;
            margin: 19px;
            font-size: 29px;
        }
        .loading  li{
            list-style-type: none;
            text-align: left; 
        }

        .foot{
            width: 856px;
            height: 200px;
            text-align: center;
            margin-top: 46px;
        }
        .foot > div{
            float: left;
            width: 188px;
            height: 200px;
            border: 1px solid rebeccapurple;
            margin-left:12px;
            
            
        }
        .foot>div:hover{
            box-shadow: 1px 6px 4px;
        }

        .xjxy{
            background-color: rgb(4, 72, 4);
        }
        .zhgl{
            background-color: rgb(33, 106, 146);
        }
        .jgxm{
            background-color: orange;
        }
        .xzzx{
            background-color: rgb(20, 71, 198);
        }


        .lj{
            text-align: left;

        }
        .cylj{

            width: 670px;
            height: 120px;
            margin: 10px;
            font-size: 14px;
            padding-top: 34px;
        }

        .cylj>div{
           float: left;
            width: 120px;
            height: 10px;
        }
        .kjlj{
            width: 450px;
            height: 10px;
            float: right;
            font-size: 24px;
            padding-bottom: 64px;
        }
        .thelast
        {
            width: 100%;
            height: 120px;
            background-color: rgb(9, 122, 250);
        }

        .aa{
            border: 1px white solid;
            width: 190;
            height: 300px;
        }

        .bb{
           border: 1px solid rgb(237, 237, 243);
           width: 190;
            height: 300px;
        }
        .b{
            border: 1px solid rgb(4, 173, 207);
            background-color: #1370f2;
            width: 100%;
            height: 160px;
        }
        
    </style>

</head>
<body>
    <!-- 头部 -->
    <div>
        <div class="top">
            <img class="img1" src="https://swxy.csuft.edu.cn/images/logo_jwc.png" alt="">
            <div class="top_1">
               <a class="official_website" href="https://swxy.csuft.edu.cn/">学院首项</a> |加入收藏
                <div><input id="search" type="search" placeholder="SEARCH">
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="menu">
            <ol class="navigation">
                <li class="one"> <a href="https://swxy.csuft.edu.cn/jwc/"><img src="https://swxy.csuft.edu.cn/images/home.png" alt=""></a></li> 
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcdbszn/zhgl/" target="_blank">规章制度</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/" target="_blank">通知公告</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxwdt/" target="_blank">新闻动态</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/zljk/" target="_blank">质量监控</a></li>
                <li><a href="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/" target="_blank">教务系统</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/cxsyjh/" target="_blank">教学改革</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcjxjb1/" target="_blank">教学简报</a></li>
            </ol>
        </div>
  </div>
    <!-- 主体 -->
<div class="body"><img src="https://swxy.csuft.edu.cn/jwc/jwcsydt/201905/W020190530389886662813.jpg" height="300px" width="1600px" alt="">
    <div>
        <div class="news">
            <a href="https://swxy.csuft.edu.cn/jwc/jwcxwdt/202404/t20240415_154310.html">   
                <h2>新闻动态</h2>
            </a>
            <a href="https://swxy.csuft.edu.cn/jwc/jwcxwdt/202404/t20240415_154310.html">
                <span class="message">学院2024年教师教学创新大赛产教融合赛道院级决赛顺利举办</span>
            </a>
        </div>
        <div class="notice">
                <a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/"> 
                    <h2>通知公告</h2>
                </a>       
                <div >
                    <ul >
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202403/t20240304_151365.html">
                            关于中南林业科技大学涉外学院2024年专升本考试专业科目课程大纲调整的通知          03-04</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202405/t20240530_158149.html">
                            关于开展2019年度校级一流本科专业建设点验收暨2024年校级一流本科专业建设点遴选的通知</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202405/t20240511_156448.html">
                            院教发〔2024〕7号关于做好2024届毕业论文（设计）诚信检测工作的通知</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202405/t20240511_156447.html">
                            院教发〔2024〕8号关于2024届毕业设计（论文）答辩相关规定的通知</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202404/t20240411_154250.html">
                            关于2024年春季学期重修安排的通知
                        </a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202404/t20240424_155417.html">
                            关于开展2024年院级课程思政教学竞赛的通知</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202404/t20240417_154509.html">
                            2024年“专升本”考试准考证打印及考试须知</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202404/t20240415_154354.html">
                            中南林业科技大学涉外学院2024年专升本免试生职业技能综合测试第二次征集志愿成绩公示</a></li>
                        <li><a href="https://swxy.csuft.edu.cn/jwc/jwctzgg/202404/t20240411_154238.html">
                            中南林业科技大学涉外学院2024年专升本免试生职业技能综合测试第二次征集志愿实施细则</a></li>
                        
                    </ul >
                </div>     
        </div>
   
        <div class="loading">
            <div id="loading-1"><a  href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202012/t20201223_106045.html">下载中心</a></div>
            <ul>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202012/t20201223_106045.html">教务处邮箱
                   <br> 2020-12-23
                </a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202308/t20230824_141833.html">2023年6月全国大学生四六级考试成绩
                    <br>2023-08-24
                </a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202305/t20230518_139640.html">中南林业科技大学涉外学院免修课程申请表
                    <br>2023-05-18
                </a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202302/t20230223_136880.html">022年12月大学英语四六级成绩
                    <br>2023-02-23
                </a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202208/t20220831_132748.html">中南林业科技大学涉外学院教室申请表<br>2022-08-31   </a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202210/t20221021_134352.html">2022年6月大学英语四六级成绩<br>2022-10-21</a></li>
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202203/t20220315_126144.html">转专业申请表<br>2022-03-15 </a></li> 
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202203/t20220315_126144.html">转专业申请表<br>2022-03-15 </a></li> 
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202203/t20220315_126144.html">转专业申请表<br>2022-03-15 </a></li> 
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202203/t20220315_126144.html">转专业申请表<br>2022-03-15 </a></li> 
                <li><a href="https://swxy.csuft.edu.cn/jwc/jwcxzzx/202203/t20220315_126144.html">转专业申请表<br>2022-03-15 </a></li> 
            </ul>
        </div>      
    </div>
    <div class="foot">
        <div class="xjxy">学籍学业</div>
        <div class="zhgl">综合管理</div>
        <div class="jgxm">教改项目</div>
        <div class="xzzx">下载中心</div>
    </div>
    <div class="lj">
        <div class="cylj">常用链接
            <hr>
            <div class="l-1"><a href="http://cpc.people.com.cn/">中共中央宣传部</a></div>
            <div class="l-2"><a href="http://www.xinhuanet.com/">| &nbsp;&nbsp;新华社&nbsp;&nbsp;|</a></div>
            <div class="l-3"><a href="http://www.people.com.cn/">人民网</a></div>
            <div class="l-4"><a href="https://www.gmw.cn/">|&nbsp;&nbsp;光明网</a></div>
        </div>
        <div class="kjlj">快捷链接
            <hr>
        </div>
    </div>
   </div> 
   <div class="aa">
   </div>
    <div class="a"></div>
   
   <div class="bb">
    

   </div><div class="b"></div>
 
</body>
</html>

2.登录页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    table{

        background-color:white;
        width: 756px;
        height: 300px;
        margin-top: 50px   
     }

    td{
        text-align: center;

    }
   
    div{
        background-image: url();
        width: auto;

    }
    .image{
        background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.U9itcOshdvKzxvE-o_4yDwAAAA?rs=1&pid=ImgDetMain);
        width: 256px;
        margin-top: 40px;
        margin-left: 59px;
        height: 256px;
        display: inline-block;
    }
    
    td{
         font-size:40px;
    }
    .name1:active{
        color: orange;
    }

    .name1:hover{
        color: rgb(219, 5, 5);

    }

    #loading,#password{
        width: 60%;
        height: 50px;
    }
   
    </style>
</head>
<body>
    <!-- <a href="https://www.baidu.com"><div class="image" ></div></a> -->
    <form action="">
        <table border="1px" align="center">
            <tr >
                <td class="name1" colspan="2">密码登陆</td>
                <!-- <td class="name2">手机号登陆</td> -->
            </tr>
            <tr>
                <td colspan="2"><input type="text"   id="loading"  required placeholder="请输入账号">
                <!-- <td></td> -->
            </tr>
                  
            <tr>
                <td colspan="2"><input id="password"  type="password" placeholder="请输入账号密码"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2"><input type="reset" value="reset">
                <input type="submit" value="submit"></td>
                <!-- <td></td> -->
            </tr>
        </table>
    </form>
    
</body>
</html>

3.用户页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    body{
        text-align: center;
    }
        div{
            /* border: 1px solid rebeccapurple; */
            /* width: 200px;
            height: 130px; */
        }

        #img1{
            padding-right: 89px;
        }
        
        .box{
            padding-top: 24px;
            margin: auto;
            /* text-align: center; */
            display: grid;
            width: 840px;
            grid-template-columns: repeat(6,1fr);
            height: 360px;
            grid-template-rows: repeat(3,1fr);
            grid-gap: 12px;
        }
      
        .it3{
            grid-column: 5/7;
        }
        .it1{
              grid-area: 1/1/3/3;
        }

        .it4{
            grid-column: 5/7;
        }

        .it2{
            grid-area:1/3/3/4;
        }


        .top_img{
            width: 100%;
            height: 68px;
        }
      
       .id{
            width: 49px;
            height: 10px;
            /* border: 1px rgb(212, 10, 7) solid; */
            display: inline-block;
        }

        .nav{
            width:100% ;
            /* text-align: center; */
           background-color: rgb(9, 109, 224);
            height: 34px;
        }

        .nav  div{
            width: 120px;
            height: 32px;
            /* border: 1px solid red; */
            /* margin: 5px; */
            color: aliceblue;
 /* margin: auto; */
            display: inline-block;
            /* float: left; */
            font-size: 19px;
        }

        /* .img2{
            margin-bottom: 19px;
            padding-bottom: 15px;
        } */

        .nav >div:nth-child(7){
            margin-left: 98px;
            width: 45px;
            height: 12px;
        }

        .nav > div:hover{

            background-color: #5a92da;
        }
        .it1{
            background-color: rgb(16, 68, 180);
            
        }
        .img3{
            padding-top:78px;
            padding-right: 36px;
        }

        .id1{
            font-size: 10px;
            height: 34px;
             width: 56px;
            padding-bottom: 12px;
            /* border-bottom: 1px solid red; */
            margin-bottom: 9px;
            color: aliceblue;
        }
        .box div{
            color: aliceblue;
        }

        .it2{
               background-color: #27baef;
        }
        .img4{
         
            padding-right: 34px;
            padding-left: 24px;
            padding-top: 76px;
        }

        .itimg{
            background-color: #1664e3;
        }
        .it3{
            background-color: #dd13a7;
        }
        .img5{
            padding: 24px;
            
        }
        .it4{
            background-color: #ab06e2b1;
        }

        .itimg2{
            background-color: #9b6f9d;
            padding-top: 36px;
        }

        .it5{
            background-color: #40a4a2;
        }
        .it6{
            background-color: #6dc974;
        }
        .it7{
            background-color: #d2b049;
        }
        .it8{
             background-color: #7a83d4;
        }
        .it9{ background-color: #9978c6;
          
        }
        .it10{
            background-color: #3734e5;
        }
        .gap{
            /* border: 1px solid rebeccapurple; */
            width: 83%;
            height: 78px;
            text-align: center;
        }
        .gap > div{
            padding-left: 240px;
            padding-top: 67px;
        }
    </style>
</head>
<body>
    
    <div class="top_img"><img id="img1" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index_logo.gif"><span class="id"></span></div>
    <div class="nav">
            <div class="img2"><img class="" src="https://swxy.csuft.edu.cn/images/home.png" alt=""></div>
            <div class="one">我的桌面</div>
            <div class="two">学籍成绩</div>
            <div class="three">培养管理</div>
            <div class="four">考试报名</div>
            <div class="five">教学评价</div>
            <div ></div>
    </div>
    <div class="box">
        <div class="it1"><img class="img3" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp1.png"><span class="id1">姓名：xx
          学号：202561364</span>
        <div class="xx">个人信息</div></div>
        <div class="it2"><img class="img4" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp2.png" alt=""><span >选课中心</span></div>
        <div class="itimg"><img class="img5" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp3.png"><span style="padding-right: 45px;">学生评教<div style="width: 12px;"></div></span></div>
        <div class="it3"><img style="padding-top: 34px; padding-right: 49px;" src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp5.png"><div>已收留言</div></div>
        <div class="itimg2"><img  src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp4.png"><div>培养方案</div></div>
        <div class="it4"><img style="padding-right: 49px; padding-top: 34px; " src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp6.png"><div>已收公告</div></div>
        <div class="it5"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp7.png"><div>课表成绩查询</div></div>
        <div class="it6"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp8.png"><div>教学周历</div></div>
        <div class="it7"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp9.png"><div>授课计划查询</div></div>
        <div class="it8"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp10.png"><div>未获得学分成绩查询</div></div>
        <div class="it9"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp11.png"><div>学籍卡片</div></div>
        <div class="it10"><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp11.png"><div>修改密码 </div></div>
       
    </div> 
    <div ><div class="gap" >

    <div><hr>Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</div>
    </div></div>

 
</body>
</html>