第二次作业

最新推荐文章于 2024-09-29 18:24:40 发布

绿色农夫山泉

最新推荐文章于 2024-09-29 18:24:40 发布

阅读量146

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_81091194/article/details/139508432

版权

1.导航栏

<!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>
        div{
            width: 800px;
            height: 30px;
            margin: auto;
            border-color: rgb(16, 16, 88);
            border-style: solid;
             border-radius: 10px; 
            border-width: 5px;
            text-align: center;
            background-color:rgb(17, 17, 82);
             color: whitesmoke;
            text-shadow: 10px 10px 10px whitesmoke; 

            
            
        }
        ul{
            text-align: center;
            margin: auto;
        }
        li{
            width: 50px;
            list-style: none;
            display: inline-block;
        }
        li:hover{
            background-color: red;
            height: 30px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>游戏1</li>
            <li>游戏2</li>
            <li>游戏3</li>
            <li>游戏4</li>
            <li>游戏5</li>
            <li>游戏6</li>
            <li>游戏7</li>
            <li>游戏8</li>
            <li>游戏9</li>
            
        </ul>

    </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>
        .a{
            background-color: steelblue;
        }
        ul{
            /* text-align: center;
            margin: auto; */
        }
        .zz>li{
            width: 100px;
             list-style: none;
            display: inline-block;
            
        }
        .d1,.d2,.d3{
            float: left;
            width: 30%;
        }
        .e{
            background-color: steelblue;
            width: 100%;
            height: 250px;
            position: relative;
            top: 220px;
        }
        .e1{
            display: inline-block;
            position: relative;
            bottom:180px ;
        }
        .e2{
            display: inline-block;
            position: relative;
            bottom:180px ;
            left: 500px;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="a"><img src="./logo_jwc.png" alt=""></div>
    <div class="b">
        <ul class="zz">
            <li><img src="./屏幕截图 2024-06-04 211102.png" alt=""></li>
            <li>规章制度</li>
            <li>通知公告</li>
            <li>新闻动态</li>
            <li>质量监控</li>
            <li>教务系统</li>
            <li>教学改革</li>
            <li>教学简报</li>
        </ul>
    </div>
    <div class="c"><img src="./W020190530389531282518.jpg" alt="" ></div>
    
         <div class="d1" ><img src="https://swxy.csuft.edu.cn/images/news.png" alt="">新闻动态<br>学院2024年教师教学创新大赛产教融合赛道院级决赛顺利举办</div>
        <div class="d2" ><img src="https://swxy.csuft.edu.cn/images/news.png" alt="">通知公告<br>
            <ul>
                <li style="width: 500px;">关于中南林业科技大学2024年专升本考试</li>
                <li style="width: 500px;"><ins>关于开展2019年度校级一流本科专业建设点验收的通知</ins></li>
                <li style="width: 500px;"><ins>院教发〔2024〕7号关于做好2024届毕业论文（设计）检测的通知</ins></li>
                <li style="width: 500px;"><ins>2024年“专升本”考试准考证打印及考试须知</ins></li>
                <li style="width: 500px;"><ins></ins></li>
            </ul>
        </div>
        <div class="d3" ><img src="https://swxy.csuft.edu.cn/images/news.png" alt="">下载中心<br>
            <ul class="zz">
                <li style="width: 400px;"><ins>教务处邮箱</ins></li>
                <li style="width: 400px;"><ins>2023年6月全国大学生四六级查询</ins></li>
                <li style="width: 400px;"><ins>中南林业科技大学涉外学院免修课程申请表</ins></li>
                <li style="width: 400px;"><ins>2022年12月大学英语四六级成绩查询</ins></li>
                <li style="width: 400px;"><ins>中南林业科技大学教室申请表</ins></li>
                <li style="width: 400px;"><ins>转专业申请表</ins></li>
                <li style="width: 400px;"><ins>2021年12月大学英语四六级成绩查询</ins></li>
        
            </ul>
        </div>
    </div>
    <div class="e">
        <div class="e1">
        <p>
            Copyright ©2011 - 2019 中南林业科技大学涉外学院 域名备案信息：湘教QS4-201405-010072 湘ICP备09017705号<br><br>
            地址：湖南省长沙市望城区丁字湾街道 邮箱：znlswdzb@163.com
        </p>
        </div>
        <div class="e2"><img src="https://swxy.csuft.edu.cn/images/weChat.jpg" alt=""><p>官方微信</p></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>Document</title>
    
     <style>
        
        .b {
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif);
            width: 100%;
            height: 400px;
            background-repeat: no-repeat;
            
        }
        .c{
            position: fixed;
            top: 100px;
            left: 600px;
        }
        .d{
            position: fixed;
            top: 150px;
            left: 600px;
        }
        .e{
            position: fixed;
            top: 200px;
            left: 600px;
        }
        .f{
            position: fixed;
            top: 250px;
            left: 600px;

        }
        .g{
            position:fixed ;
            top: 300px;
            left: 600px;
        }
        .h{
            position:fixed ;
            top: 300px;
            left: 700px;
        }
        .i{position:fixed ;
            top: 410px;
            left: 600px;
        }

        

     </style>
</head>
<body>
    
    <form action="">
    <div class="a""><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png" alt="" width="700px" height="100px"></div>
    <div class="b"></div>
    <div class="c">
    <div class="d">用户登录</div>
    <div class="e">用户名：<input type="text" name="text" ></div>
    <div class="f">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"></div>
    <div class="g"><a href="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/xsMain.jsp"><button class="button" type="submit"> <img src="./jiantou.gif" alt=""></button></div>
    </a></div>
    <div class="h"><a href="#"><button class="wenhao" type="wenhao"><img src="./dlau1.gif" alt=""></button></a></div>
    </form>
  <div class="i">湖南强智科技发展有限公司 版权所有隐私声明|设为首页</div>
        
   
 
   
   
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=0, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .a{
            height: 75px;
            width: 950px;
            /* border: 1px solid red; */
            margin-left:300px;
           
        }
        .b{
            width: 100%;
            height: 41px;
            background-color:steelblue;
            color: whitesmoke;
         
        }
        ul{
           margin-left: 400px; 
           margin-top: 35px;
           margin: auto;
           }
        li{
            width: 90px;
            list-style: none;
            display: inline-block;
            margin-left: 100px;
            
        }
        .body{
            height: 450px;
            width: 910px;
            /* border: 1px solid red; */
            margin-left:300px;
        }
        .div1{
            height: 287px;
            /* border: 1px solid red; */
        }
        .div2{
            height: 138px;
            /* border: 1px solid red; */
        }
        
        .xk,.zl,.jh,.xf,.card,.password,.id{
            float: left;
        }
        .xp,.py,.cj{
            float: left;
        }
        .id{
            width: 265px;
            height: 287px;
            background-color: #09619F;
            
        }
        .xk{
            width: 153px;
            height: 287px;
            background-color: #4FB5C7;
        }
        .ly,.gg{
            width: 301px;
            height: 141px;
            
        }
        .xp,.py{
            width: 173px;
            height: 141px;
            
        }
        .cj,.zl{
            width: 130px;
            height: 138px;
            
        }
        .jh{
            width: 153px;
            height: 138px;
           
        }
        .xf{
            width: 173px;
            height: 138px;
           
        }
        .card,.password{
            width: 149px;
            height: 138px;
            
        }
        div{
            display: inline-block;
        }
        .py,.gg{
            margin-top: 3px;
        }
        .id,.xk,.xp,.py,.ly,.gg{
            /* margin-bottom:2px; */
            margin-right: 4px;
        }
        .cj,.zl,.jh,.xf,.card,.password{
            margin-right: 4px;
        }
        
        .xp{
            background-color: #1978D8;
        }
        .ly{
            background-color: #DB6987;
        }
        .gg{
            background-color: #8E7AAA;
        }
        .py{
            background-color: #90A8E3;
        }
        .cj{
            background-color: #187D9A;
        }
        .zl{
            background-color: #A0CF41;
        }
        .jh{
            background-color:#EAAF76 ;
        }
        .xf{
            background-color: #88BAD9;
        }
        .card{
            background-color: #B69CCC;
        }
        .password{
            background-color: #09619F;
        }
        .block-1{
           margin-left: 32px;
           font-size: 12px;
            color: white;
        }
       .block-2{
        font-size: 12px;
            color: white;
            margin-left: -5px;
       }
       .block-3{
        font-size: 12px;
            color: white;
            margin-left: 30px;
       }
       .block-4{
        font-size: 12px;
            color: white;
            margin-left: 43px;
       }
       .ts{
        width: 172px;
        height:87px;
       }
       
   
       .qiangzhi{
        font-size: 12px;
        color: #666;
        margin-left: 450px;
       }
        
    </style>
</head>
<body>
    <div class="a"><img src="./index_logo.gif" alt=""></div>
    <div class="b"><ul>
        <li><img src="./Nsb_menu_h.gif" alt=""></li>
        <li>我的桌面</li>
        <li>学籍成绩</li>
        <li>培养管理</li>
        <li>考试报名</li>
        <li>教学评价</li>
    </ul>
    </div>
        <div class="body">
            <div class="div1">
                <div class="id">
                    <div><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp1.png" style=" width:72px;height:64px; margin-top: 73px; margin-left: 25px;" ></div>
                    <div class="block-1">姓名: 郑烨
                        <br>
                         学号:xxxxxxxxxxx</div>
                        <div class="block-1">
                         个人信息
                        </div>
                </div>
              
                    <div class="xk">
                    <div><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp2.png" style="width: 65px; height: 65px; margin-top: 73px;margin-left: 30px;"></div>
                    <div class="block-1"></div>
                    <div class="block-1">选课中心</div>
                </div>
                <div class="zh-1">
                    <div class="xp">
                        <div>
                            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp3.png" style="width: 92px;height: 55px; margin-top: 23px; margin-left: 30px;">
                        </div>
                        <div class="block-1"></div>
                        <div class="block-1">学生评教</div>
                    </div>
             
                    <a href="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/ggly/ysly_query?Ves632DSdyV=NEW_XSD_WDZM"><div class="ly">
                        <div>
                            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp5.png" style="height: 57px; width: 80px; margin-left: 30px; margin-top: 20px;">
                        </div>
                        <div class="ts">
                        </div>
                        <div class="block-1">已收留言</div>
                    </div>
                </div>
                </a>
               <div class="zh-2">
                   <div class="py">
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp4.png" style="width: 71px; height: 62px; margin-top: 30px; margin-left: 30px;">
                    <!-- <div class="ts"></div> -->
                    <div class="block-1">培养方案</div>
                   </div>
                
                 <div class="gg">
                        <div>
                            <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp6.png" style="width:67px;height: 79px; margin-top:20px; margin-left: 30px;">
                        </div>
                        <div class="ts"></div>
                        <div class="block-1">已收公告</div>
                    </div>
                </div>
            
                  
        <div class="div2">
          
            <div class="cj">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp7.png" style="width: 66px; height: 59px; margin-top: 30px; margin-left: 30px;">
                </div>
                <div class="block-1"></div>
                <div class="block-2">课程成绩查询</div>
            </div>
           <div class="zl">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp8.png" style="width: 64px; height: 60px;margin-top: 30px; margin-left: 30px;">
                </div>
                <div class="block-1"></div>
                <div class="block-2">教学周历</div>
            </div>
            <div class="jh">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp9.png" style="width: 66px; height: 66px; margin-top: 25px; margin-left: 45px;">
                </div>
                <div class="block-1"></div>
                <div class="block-3">授课计划查询</div>
            </div>
            <div class="xf">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp10.png" style="width: 71px; height: 69px; margin-top: 25px; margin-left: 45px;">
                </div>
                <div class="block-1"></div>
                <div class="block-3">未获得的学分成绩查询</div>
            </div>
            <div class="card">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp11.png" style="width: 62px; height: 73px; margin-top: 25px; margin-left: 45px;">
                </div>
                <div class="block-1"></div>
                <div class="block-4">学籍卡片</div>
            </div>
            <div class="password">
                <div>
                    <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/tp12.png" style="width: 55px; height: 67px; margin-top: 25px; margin-left: 45px;">
                </div>
                <div class="block-1"></div>
                <div class="block-4">修改密码</div>
            </div>
        </div>
    </div>
   
    <div class="qiangzhi">
        Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号
    </div> 
</div>
</body>
</html>