web前端作业

最新推荐文章于 2024-07-24 23:00:08 发布

连续讨伐

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量61

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/2302_81650296/article/details/140611985

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页</title>
</head>
<style>
    .table{

        height: 600px;
        width: 1500px;
    }
    .t1{
        height: 150px;
    }
    .t2{
        height: 450px;
    }
    .d1{
        position: relative;
        left: 100px;
    }
    .d2{
        position:absolute;
        right: 10px;
    }
    .t4{
        background-color: gainsboro;
    }

</style> 
<body>

    <table class="table">
        <tr class="t1">
            <td class="d1"><img src="./image.png" alt=""></td>
            <td class="d2">返回首页</td>
            </tr>
            <tr class="t2">
            <td class="t3" width="50%"><img src="./image copy.png" alt="" height="450px" width="750px"></td>
            <td class="t4" width="50%" align="center" >
                <h1>学生登陆</h1>
                <p class="p1">选择学校 <select name="学校" id=""> <option value="">请选择您的学校</option>
                    <option value="cdwl">成都文理学院</option> </select>
                </p>
                <p class="p2">用户名 <input type="text"></p>
                <p class="p3">密码 <input type="password" ></p>
             <button class="b1">登录</button>
            </td>
            </tr>
</table>
</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>
        div{
            /* border: 1px solid red; */
            margin-top: 5px;
            margin-left: 5px;
        }
        .box span{
            color: aliceblue;
            font-size: 13px;
        }
        .top{
            width: 950px;
            height: 75px;
            position: relative;
            margin: auto;
            
        }

        .max_menu{
            background-color:  rgb(52, 112, 190);
        }
        .min_menu1{
            width: 930px;
            height: 51px;
            position: relative;
            margin: auto;
        }
        .min_menu2{
            margin-top: -60px;
            margin-left: 80px;
        }
        .min_menu2 span{
            font-size: 20px;
            color: aliceblue;
            font-weight: 600;
            margin-left: 40px;
        }
        .box{
            position: relative;
            width: 910px;
            height: 450px;
            margin: 0 auto;
            margin-top: 20px;

            display: grid;
            grid-template-columns: repeat(6,1fr);
            grid-template-rows: repeat(3,1fr);

        }
        .box1{
            grid-column: 1/3;
            grid-row: 1/3;
            background-color: rgb(54, 105, 172);
        }
        .box2{
            grid-row: 1/3;
            background-color: rgb(46, 203, 228);
        }
        .box3{
            background-color: rgb(12, 159, 239);
        }
        .box4{
            grid-column: 5/7;
            background-color: rgb(244, 157, 171);
        }
        .box5{
            background-color: rgb(166, 192, 221);
        }
        .box6{
            grid-column: 5/7;
            background-color: rgb(172, 127, 213);
        }
        .box7{
            background-color: rgb(53, 127, 117);
        }
        .box8{
            background-color: rgb(140, 213, 29);
        }
        .box9{
            background-color: rgb(230, 171, 94);
        }
        .box10{
            background-color: rgb(157, 239, 239);
        }
        .box11{
            background-color: rgb(208, 178, 236);
        }
        .box12{
            background-color: rgb(65, 92, 150);
        }
        .img_box{
            position: relative;
            display:block;
            width: 100px;
        }
        .box1_1{
            margin-left: 32px;
        }
        .box1_2{
            position: absolute;
            top: 121px;  
            left: 168px; 
            /* display:block; */
            line-height: 0.4;
        }

        .span2{
            margin-left: 40px;
        }
        .span3{
            margin-left: 40px;
        }
        .span4{
            margin-left: 40px;
        }
        .span5{
            margin-left: 30px;
        }
        .span6{
            margin-left: 40px;
        }
        .span7{
            margin-left: 29px;
        }
        .span8{
            margin-left: 38px;
        }
        .span9{
            margin-left: 29px;
        }
        .span10{
            margin-left: 17px;
        }
        .span11{
            margin-left: 38px;
        }
        .span12{
            margin-left: 29px;
        }
        .bottom{
            margin: auto;
            margin-top: 20px;
            width: 950px;
            border: 1px solid rgba(36, 161, 229, 0.218);
        }
        .bottomid{
            margin: auto;
            width: 650px;
            color: rgb(106, 108, 108);
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="top">
    </div>
    <div class="max_menu">
        <div class="min_menu1">
            <div class="min_menu2">
                <span>我的桌面</span>
                <span>学籍成绩</span>
                <span>培养管理</span>
                <span>考试报名</span>
                <span>教学评价</span>
                <span>交流申请</span>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="box1">
            <div class="img_box">

                <div class="box1_1"><span>个人信息</span></div>
            </div>
            <div class="box1_2">
                <p><span class="span1_1">姓名：胥飞</span></p >
                <p><span class="span1_2">学号：2222222222</span></p >
            </div>
        </div>

        <div class="box2">
            <a href=" ">
            <div class="span2"><span>选课中心</span></div>
            </a >
        </div>

        <div class="box3">
            <div class="span3"><span>学生教评</span></div>
        </div>

        <div class="box4">
            <div class="span4"><span>已收留言</span></div>
        </div>

        <div class="box5">
            <div class="span5"><span>培养方案</span></div>
        </div>

        <div class="box6">
            <div class="span6"><span>已收公告</span></div>
        </div>

        <div class="box7">
            <div class="span7"><span>课程成绩查询</span></div>
        </div>

        <div class="box8">
            <div class="span8"><span>教学周历</span></div>
        </div>

        <div class="box9">
            <div class="span9"><span>授课计划查询</span></div>
        </div>

        <div class="box10">
            <div class="span10"><span>未获得学分成绩查询</span></div>
        </div>

        <div class="box11">
            <div class="span11"><span>学籍卡片</span></div>
        </div>

        <div class="box12">
            <div class="span12"><span>社会考试报名</span></div>
        </div>

    </div>
    <div class="bottom"></div>
    <div class="bottomid"><span>Copyright (C) 川ICP 备12345678910号</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>Document</title>
    <style>
        div{
            /* border: 1px solid red; */
            margin-top: 5px;

        }
         .top{
            width: 950px;
            height: 75px;
            position: relative;
            margin: auto;
            
        }

        .max_menu{
            background-color:  rgb(52, 112, 190);
        }
        .min_menu1{
            width: 930px;
            height: 51px;
            position: relative;
            margin: auto;
        }
        .img0{
            margin-top: 20px;
        }
        .min_menu2{
            margin-top: -60px;
            margin-left: 80px;
        }
        .min_menu2 span{
            font-size: 20px;
            color: aliceblue;
            font-weight: 600;
            margin-left: 40px;
        }

        .box{
            width: 964px;
            height: 820px;
            position: relative;
            margin: auto;
            border-bottom: 1px solid rgb(78, 170, 220) ;
        }
        .box1{
            width: 770px;
            height: 130px;
            position: absolute;
            left: 186px;
        }
        .box2{
            width: 180px;
            height: 820px;
            border-right: 1px solid rgb(78, 170, 220);
            border-bottom: 1px solid rgb(78, 170, 220);
        }
        li{
            list-style:none;
            list-style-position:outside;
            margin-top: 10px;
        }
        ol{
            padding-bottom: 20px;
            border-bottom: 1px solid rgb(78, 170, 220);
        }
        .box1 *{
            margin:0;
        }
        .menu1{
            height: 40px;
            padding-top: 20px;
        }
        .menu2{
            background-color: rgba(169, 216, 242, 0.239);
        }
        .bottomid{
            margin: auto;
            width: 650px;
            color: rgb(106, 108, 108);
        }
    </style>
</head>
<body>
    <div class="top">
    </div>
    <div class="max_menu">
        <div class="min_menu1">
            <div class="min_menu2">
                <span>我的桌面</span>
                <span>学籍成绩</span>
                <span>培养管理</span>
                <span>考试报名</span>
                <span>教学评价</span>
                <span>交流申请</span>
            </div>
        </div>
    </div>

    <div class="box">
        <div class="box1">
            <div class="menu1">
                <span class="span1" style="color: blue;font-size: 14px;font-weight: 700;">首页</span>
                <span class="span2" style="font-size:10px;font-weight:900;">>></span>
                <span class="span3" style="font-weight:900;">选课管理</span>
                <span class="span4" style="font-size:10px;font-weight:900;">>></span>
                <span class="span5" style="font-weight:900;">学生选课中心</span>
            </div>
            <div class="menu2">
               <table
                border="1px"
                width="770px"
                cellspacing=0>
                <tr>
                    <th scope="col" align="center">学年学期</th>
                    <th scope="col" align="center">选课名称</th>
                    <th scope="col" align="center">选课时间</th>
                    <th scope="col" align="center">操作</th>
                </tr>
                <tr>
                    <td colspan="4" align="center" style="font-size: 12px;">未查询到数据</td>
                </tr>
               </table>
            </div>
        </div>
        <div class="box2">
            <ol>
            <li>学期理论课表</li>
            <li>实验课表查询</li>
            <li>班级课表查询</li>
            <li>教室课表查询</li>
            <li>课程课表查询</li>
            </ol>
            <ol>
            <li>学生选课中心</li>
            <li>学生预选管理</li>
            <li>学生预选查询</li>
            </ol>
        </div>
    </div>
    <div class="bottomid"><span>Copyright (C)家里蹲大学发展有限公司 Al Rights hahahahah 川ICP 备12345678910号</span></div>
</body>
</html>